CINXE.COM

<!doctype html> <html data-n-head-ssr lang="ja-JP" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22ja-JP%22%7D%7D"> <head > <title>Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1.0"><meta data-n-head="ssr" http-equiv="X-UA-Compatible" content="IE=edge"><meta data-n-head="ssr" data-hid="description" name="description" content="Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on&nbsp;Medium! Flutter について Flutter&nbsp;は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。特徴 - 言語は Dart - フルスタックのUI framework (Material and iOS) &nbsp; &nbsp; - Reactive (inspired by React) &nbsp; &nbs"><meta data-n-head="ssr" data-hid="og:site_name" property="og:site_name" content="note（ノート）"><meta data-n-head="ssr" data-hid="og:url" property="og:url" content="https://note.com/najeira/n/n8924408dd07b"><meta data-n-head="ssr" data-hid="og:title" property="og:title" content="Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira"><meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on&nbsp;Medium! Flutter について Flutter&nbsp;は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。特徴 - 言語は Dart - フルスタックのUI framework (Material and iOS) &nbsp; &nbsp; - Reactive (inspired by React) &nbsp; &nbs"><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://assets.st-note.com/production/uploads/images/5843702/profile_de4f50223970e44ffaa5689ca38ee76f.jpg?fit=bounds&format=jpeg&quality=85&width=330"><meta data-n-head="ssr" data-hid="og:type" property="og:type" content="article"><meta data-n-head="ssr" data-hid="twitter:site" property="twitter:site" content="@note_PR"><meta data-n-head="ssr" data-hid="twitter:card" property="twitter:card" content="summary"><meta data-n-head="ssr" data-hid="twitter:url" property="twitter:url" content="https://note.com/najeira/n/n8924408dd07b"><meta data-n-head="ssr" data-hid="twitter:title" property="twitter:title" content="Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira"><meta data-n-head="ssr" data-hid="twitter:description" property="twitter:description" content="Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on&nbsp;Medium! Flutter について Flutter&nbsp;は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。特徴 - 言語は Dart - フルスタックのUI framework (Material and iOS) &nbsp; &nbsp; - Reactive (inspired by React) &nbsp; &nbs"><meta data-n-head="ssr" data-hid="twitter:app:id:iphone" property="twitter:app:id:iphone" content="906581110"><meta data-n-head="ssr" data-hid="twitter:app:name:iphone" property="twitter:app:name:iphone" content="note（ノート）"><meta data-n-head="ssr" data-hid="twitter:app:url:iphone" property="twitter:app:url:iphone" content="note://note/n8924408dd07b"><meta data-n-head="ssr" data-hid="twitter:app:id:googleplay" property="twitter:app:id:googleplay" content="mu.note"><meta data-n-head="ssr" data-hid="twitter:app:name:googleplay" property="twitter:app:name:googleplay" content="note（ノート）"><meta data-n-head="ssr" data-hid="twitter:app:url:googleplay" property="twitter:app:url:googleplay" content="note.mu://note/n8924408dd07b"><meta data-n-head="ssr" data-hid="fb:app_id" property="fb:app_id" content="665869046808089"><meta data-n-head="ssr" data-hid="robots" name="robots" content="max-image-preview:large"><meta data-n-head="ssr" data-hid="thumbnail" name="thumbnail" content="https://assets.st-note.com/production/uploads/images/5843702/profile_de4f50223970e44ffaa5689ca38ee76f.jpg?fit=bounds&format=jpeg&quality=85&width=330"><link data-n-head="ssr" rel="preconnect" href="https://d2l930y2yx77uc.cloudfront.net" crossorigin="anonymous"><link data-n-head="ssr" rel="preconnect" href="https://assets.st-note.com" crossorigin="anonymous"><link data-n-head="ssr" rel="preconnect" href="https://www.google-analytics.com" crossorigin="anonymous"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/svg/production.ico"><link data-n-head="ssr" rel="icon" type="image/png" sizes="192x192" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/android-chrome-192x192.png"><link data-n-head="ssr" rel="icon" type="image/png" sizes="512x512" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/android-chrome-512x512.png"><link data-n-head="ssr" rel="apple-touch-icon" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="60x60" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon-60x60.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="76x76" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon-76x76.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="120x120" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon-120x120.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="152x152" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon-152x152.png"><link data-n-head="ssr" rel="apple-touch-icon" sizes="180x180" href="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/apple-touch-icon.png"><link data-n-head="ssr" rel="canonical" href="https://note.com/najeira/n/n8924408dd07b"><link data-n-head="ssr" rel="preload" href="https://assets.st-note.com/production/uploads/images/5843702/profile_de4f50223970e44ffaa5689ca38ee76f.jpg?width=800" as="image"><style data-n-head="ssr" type="text/css">:root{--navbar-primary-top-margin:0px;--navbar-primary-height:64px;--navbar-primary-mobile-height:48px}.o-navbarPrimaryGuest__iconButton.svelte-1yivl54{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--color-text-clickable-icon);border:0;background-color:transparent}.o-navbarPrimaryGuest__iconButton.svelte-1yivl54:hover{color:var(--color-text-secondary)}.o-navbarPrimaryGuest__navItem.svelte-1yivl54{position:relative}@media only screen and (max-width: 768px){.o-navbarPrimaryGuest__navItem--mobileHidden.svelte-1yivl54{display:none}}.o-navbarPrimaryGuest__link.svelte-1yivl54{font-size:var(--font-size-xs);display:block;color:var(--color-text-secondary)}.o-navbarPrimaryGuest__searchArea.svelte-1yivl54{width:100%;max-width:520px;margin:0 16px}@media only screen and (max-width: 768px){.o-navbarPrimaryGuest__searchArea.svelte-1yivl54{width:auto;margin-left:auto;margin-right:8px}} .m-navbarContainer.svelte-qah1lm{display:flex;align-items:center;justify-content:space-between;width:auto;min-height:var(--navbar-primary-height);margin-right:24px;margin-left:24px}@media only screen and (max-width: 480px){.m-navbarContainer.svelte-qah1lm{width:calc(100% - 32px);min-height:var(--navbar-primary-mobile-height);margin-right:16px;margin-left:16px}}@media only screen and (max-width: 360px){.m-navbarContainer.svelte-qah1lm{width:calc(100% - 16px);min-height:var(--navbar-primary-mobile-height);margin-right:8px;margin-left:8px}}@media only screen and (min-width: 411px) and (max-width: 480px){.m-navbarContainer.svelte-qah1lm{width:calc(100% - 32px);margin-right:16px}}.m-navbarContainer__nav.svelte-qah1lm{display:flex;align-items:center;gap:16px}@media only screen and (min-width: 769px){.m-navbarContainer__nav.svelte-qah1lm{min-width:200px;justify-content:flex-end}}@media only screen and (max-width: 360px){.m-navbarContainer__nav.svelte-qah1lm{gap:12px}} .m-navbarLogoContainer.svelte-1s7rfpy{display:flex;flex-direction:row;flex-shrink:0;align-items:center;gap:8px}@media only screen and (max-width: 360px){.m-navbarLogoContainer.svelte-1s7rfpy{gap:4px}}@media only screen and (min-width: 769px){.m-navbarLogoContainer.svelte-1s7rfpy{min-width:200px}} .m-navbarLogo.svelte-wdp6vs{display:flex;align-items:stretch;justify-content:flex-start;max-width:200px;max-height:40px} .m-logoDecoration.svelte-mbd3bl{width:32px;height:32px;display:flex}@media only screen and (max-width: 360px){.m-logoDecoration.svelte-mbd3bl{width:24px;height:24px}} @media only screen and (min-width: 769px){.o-navbarSearchForm.svelte-xctz9i.svelte-xctz9i{width:100%}}@media only screen and (max-width: 768px){.o-navbarSearchForm--open.svelte-xctz9i.svelte-xctz9i{position:fixed;top:var(--navbar-primary-top-margin);left:0;right:0;z-index:1000;padding:4px;display:flex;background-color:var(--color-surface-normal);align-items:center}}@media only screen and (min-width: 481px) and (max-width: 768px){.o-navbarSearchForm--open.svelte-xctz9i.svelte-xctz9i{height:var(--navbar-primary-height)}}@media only screen and (max-width: 768px){.o-navbarSearchForm__form.svelte-xctz9i.svelte-xctz9i{flex-grow:1}}.o-navbarSearchForm__iconButton.svelte-xctz9i.svelte-xctz9i{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--color-text-clickable-icon);border:0;background-color:transparent;border:0;background-color:transparent}.o-navbarSearchForm__iconButton.svelte-xctz9i.svelte-xctz9i:hover{color:var(--color-text-secondary)}.o-navbarSearchForm__iconButton.close.svelte-xctz9i.svelte-xctz9i{margin-left:12px}@media only screen and (max-width: 768px){.o-navbarSearchForm__close.svelte-xctz9i.svelte-xctz9i{display:flex;justify-content:center;align-items:center;width:40px;height:40px}.o-navbarSearchForm__close.svelte-xctz9i .o-navbarSearchForm__iconButton.svelte-xctz9i{margin-left:0}}@media only screen and (min-width: 769px){.o-navbarSearchForm__close.svelte-xctz9i.svelte-xctz9i{display:none}}@media only screen and (min-width: 769px){.o-navbarSearchForm__dropdown.svelte-xctz9i.svelte-xctz9i{width:100%;max-width:560px}} .a-button.svelte-rln4l.svelte-rln4l{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;margin:0;font-weight:bold;line-height:1;color:var(--color-text-secondary);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:top;touch-action:manipulation;cursor:pointer;background:var(--color-surface-normal);border:none;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.a-button.svelte-rln4l .a-button__inner.svelte-rln4l{position:relative;z-index:2;font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:center}.a-button[data-type=none].svelte-rln4l.svelte-rln4l{color:var(--color-text-secondary)}.a-button[data-type=disabled].svelte-rln4l.svelte-rln4l{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}.a-button[data-type=basic].svelte-rln4l.svelte-rln4l{color:var(--color-text-primary);border:1px solid var(--color-border-default)}.a-button[data-type=primary].svelte-rln4l.svelte-rln4l{color:var(--color-text-invert);background-color:var(--color-custom-accent)}.a-button[data-type=secondary].svelte-rln4l.svelte-rln4l{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent)}.a-button[data-type=danger].svelte-rln4l.svelte-rln4l{color:var(--color-text-invert);background-color:var(--color-surface-danger)}.a-button[data-type=primaryNext].svelte-rln4l.svelte-rln4l{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-size=small].svelte-rln4l.svelte-rln4l{min-height:32px}@media only screen and (max-width: 480px){.a-button[data-size=small].svelte-rln4l.svelte-rln4l{padding-right:12px;padding-left:12px}}.a-button[data-size=small].svelte-rln4l .a-button__inner.svelte-rln4l{font-size:var(--font-size-xs)}.a-button[data-size=large].svelte-rln4l.svelte-rln4l{min-height:48px}.a-button[data-size=large].svelte-rln4l .a-button__inner.svelte-rln4l{font-size:var(--font-size-base)}.a-button[data-width=default].svelte-rln4l.svelte-rln4l{width:-moz-fit-content;width:fit-content}.a-button[data-width=fit].svelte-rln4l.svelte-rln4l{width:100%}.a-button[data-width=square].svelte-rln4l.svelte-rln4l{width:32px}@media only screen and (max-width: 480px){.a-button[data-width=mobile-square].svelte-rln4l.svelte-rln4l{width:32px}}.a-button[data-focus-disabled=true].svelte-rln4l.svelte-rln4l:focus{outline:none}.a-button[data-focus-disabled=false].svelte-rln4l.svelte-rln4l:active,.a-button[data-focus-disabled=false].svelte-rln4l.svelte-rln4l:hover{outline:none}.a-button.svelte-rln4l.svelte-rln4l:disabled{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}.a-button__overlay.svelte-rln4l.svelte-rln4l{position:absolute;z-index:1;inset:0;display:block;overflow:hidden;pointer-events:none}.a-button__overlay.svelte-rln4l.svelte-rln4l::before,.a-button__overlay.svelte-rln4l.svelte-rln4l::after{content:"";position:absolute;inset:0;display:block;background-color:var(--color-reactionOverlay);opacity:0;transition:opacity 200ms cubic-bezier(1, 0, 0, 1)}@media only screen and (min-width: 769px){.a-button.svelte-rln4l:hover .a-button__overlay.svelte-rln4l::before{opacity:1}}@media only screen and (min-width: 769px){.a-button.svelte-rln4l:active .a-button__overlay.svelte-rln4l::after{opacity:1}}</style><script data-n-head="ssr" type="application/ld+json">[{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":"https://note.com/najeira/n/n8924408dd07b","headline":"Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した","keywords":"Flutter","datePublished":"2018-03-02T11:48:43.000+09:00","dateModified":"2021-09-11T11:11:17.000+09:00","author":{"@type":"Person","name":"najeira","url":"https://note.com/najeira"},"publisher":{"@type":"Organization","name":"note（ノート）","logo":{"@type":"ImageObject","url":"https://assets.st-note.com/poc-image/manual/production/logo_202212.png","width":"216","height":"55"}},"image":{"@type":"ImageObject","url":"https://assets.st-note.com/production/uploads/images/5843629/177619fd4ffba1fb4b605a20b0ef08ea.jpg","width":480,"height":853},"description":"Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on Medium! Flutter について Flutter は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。特徴 - 言語は Dart - フルスタックのUI framework (Material and iOS)     - Reactive (inspired by React)   &nbs"},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://note.com","name":"note"}},{"@type":"ListItem","position":2,"item":{"@id":"https://note.com/najeira","name":"najeira"}},{"@type":"ListItem","position":3,"item":{"@id":"https://note.com/najeira/n/n8924408dd07b","name":"Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した"}}]}]</script><script data-n-head="ssr" src="https://cdn.st-note.com/js/tw-widget.js"></script><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/3427ed1.modern.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.1127f446de4643037805.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.249483100988e26d6de3.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.91a8112116fcbdd0592e.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.5b0457fc6e665f1da8f5.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.82d525281d487594506b.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ab22a230b4d1245b2d19.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.d2e942f6697d9b3f9dbc.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.cab32fcbb629cd9d5a96.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.b62041f1f40f3cce9ace.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.a46bf33067655175b8d3.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.00fe191f7660a9dcf22d.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.6c5b2e17251566d5bc7e.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.5c419eb23cce2e3d7d9c.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.dcf72b6ba41fca7ee59b.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.2ea735466ef1acb4d91f.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ebbb5c6b4b226c0cabed.js" as="script"><style data-vue-ssr-id="b9c17b08:0 9890688e:0 491de0eb:0 79952778:0 77ee93c7:0 b22c9886:0 9a2ba1b2:0 22eef300:0 e3e4b428:0 8476ae2a:0 7c04943c:0 537e6005:0 7d5d5264:0 6867d075:0 586e8863:0 71236d44:0 6f838680:0 cb94b2b8:0 521a0fef:0 38c81ff8:0 421b9b6e:0 27867ef6:0 0c97d4f7:0 0f7ec27e:0 0037aa1c:0 03477958:0 0630f22c:0 23675465:0 c4fa64ca:0 07d561d9:0 15093948:0 2bfcffb2:0 6e0744b6:0 7fb08cd2:0 279e8690:0 515bbe18:0 459ac050:0 3ea6a7b9:0 d1e4310a:0 2994f01c:0 5a2c9f55:0 0775d74e:0 827fd6a0:0 05133ab4:0 17daded0:0 d70db550:0">/*! * ress.css • v3.0.0 * MIT License * github.com/filipelinhares/ress */html{box-sizing:border-box;-webkit-text-size-adjust:100%;word-break:normal;tab-size:4}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}hr{overflow:visible;height:0}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{background-color:initial}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[disabled]{cursor:default}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer;color:inherit}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:initial;border-style:none}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;white-space:normal;max-width:100%}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}img{border-style:none}progress{vertical-align:initial}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default} /*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}audio,canvas,embed,iframe,img,object,svg,video{display:initial;vertical-align:initial}.-translate-x-1\/2,.-translate-y-1\/2,.before\:rotate-45:before,.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.snap-x{--tw-scroll-snap-strictness:proximity}.shadow-1{--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent}.container{width:100%}@media (min-width:481px){.container{max-width:481px}}@media (min-width:769px){.container{max-width:769px}}@media (min-width:941px){.container{max-width:941px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:2048px){.container{max-width:2048px}}.pointer-events-none{pointer-events:none!important}.visible{visibility:visible!important}.collapse{visibility:collapse!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.sticky{position:-webkit-sticky!important;position:sticky!important}.inset-0{inset:0!important}.inset-1\/2{inset:50%!important}.-bottom-1{bottom:-.25rem!important}.-bottom-2{bottom:-.5rem!important}.-right-\[6px\]{right:-6px!important}.bottom-0{bottom:0!important}.bottom-1{bottom:.25rem!important}.bottom-4{bottom:1rem!important}.bottom-\[1\.25vw\]{bottom:1.25vw!important}.bottom-\[calc$100\%\+1rem$\]{bottom:calc(100% + 1rem)!important}.bottom-px{bottom:1px!important}.left-0{left:0!important}.left-1\/2{left:50%!important}.left-4{left:1rem!important}.left-5{left:1.25rem!important}.left-8{left:2rem!important}.left-\[-16px\]{left:-16px!important}.left-\[-5px\]{left:-5px!important}.left-\[15\.83333333\%\]{left:15.83333333%!important}.left-\[22\%\]{left:22%!important}.right-0{right:0!important}.right-1{right:.25rem!important}.right-2{right:.5rem!important}.right-3{right:.75rem!important}.right-4{right:1rem!important}.right-\[-8px\]{right:-8px!important}.right-\[1\.25vw\]{right:1.25vw!important}.top-0{top:0!important}.top-1{top:.25rem!important}.top-1\/2{top:50%!important}.top-2{top:.5rem!important}.top-3{top:.75rem!important}.top-4{top:1rem!important}.top-\[-0\.5625rem\]{top:-.5625rem!important}.top-\[-5px\]{top:-5px!important}.top-\[-60px\]{top:-60px!important}.top-\[-8px\]{top:-8px!important}.top-\[19\.11468813\%\]{top:19.11468813%!important}.top-\[27\.04373358\%\]{top:27.04373358%!important}.top-\[36px\]{top:36px!important}.top-\[44px\]{top:44px!important}.top-\[calc$100\%\+1rem$\]{top:calc(100% + 1rem)!important}.top-full{top:100%!important}.isolate{isolation:isolate!important}.z-10{z-index:10!important}.z-50{z-index:50!important}.z-\[11\]{z-index:11!important}.z-\[1\]{z-index:1!important}.z-\[2\]{z-index:2!important}.z-\[5\]{z-index:5!important}.z-\[6\]{z-index:6!important}.z-\[9999\]{z-index:9999!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-4{margin:1rem!important}.m-6{margin:1.5rem!important}.m-8{margin:2rem!important}.m-auto{margin:auto!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.mx-\[8px\]{margin-left:8px!important;margin-right:8px!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-14{margin-top:3.5rem!important;margin-bottom:3.5rem!important}.my-16{margin-top:4rem!important;margin-bottom:4rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.my-6{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-8{margin-top:2rem!important;margin-bottom:2rem!important}.\!mb-\[104px\]{margin-bottom:104px!important}.\!mb-\[92px\]{margin-bottom:92px!important}.-mb-\[0\.125rem\]{margin-bottom:-.125rem!important}.-ml-2{margin-left:-.5rem!important}.-mr-4{margin-right:-1rem!important}.-mt-0{margin-top:0!important}.-mt-0\.5{margin-top:-.125rem!important}.-mt-1{margin-top:-.25rem!important}.-mt-1\.5{margin-top:-.375rem!important}.-mt-2{margin-top:-.5rem!important}.-mt-3{margin-top:-.75rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-10{margin-bottom:2.5rem!important}.mb-12{margin-bottom:3rem!important}.mb-16{margin-bottom:4rem!important}.mb-2{margin-bottom:.5rem!important}.mb-2\.5{margin-bottom:.625rem!important}.mb-24{margin-bottom:6rem!important}.mb-3{margin-bottom:.75rem!important}.mb-4{margin-bottom:1rem!important}.mb-5{margin-bottom:1.25rem!important}.mb-6{margin-bottom:1.5rem!important}.mb-8{margin-bottom:2rem!important}.mb-\[0\.1875rem\]{margin-bottom:.1875rem!important}.mb-\[16px\]{margin-bottom:16px!important}.mb-\[24px\]{margin-bottom:24px!important}.mb-\[8px\]{margin-bottom:8px!important}.ml-0{margin-left:0!important}.ml-0\.5{margin-left:.125rem!important}.ml-1{margin-left:.25rem!important}.ml-16{margin-left:4rem!important}.ml-2{margin-left:.5rem!important}.ml-4{margin-left:1rem!important}.ml-8{margin-left:2rem!important}.ml-\[-100px\]{margin-left:-100px!important}.ml-\[16px\]{margin-left:16px!important}.ml-auto{margin-left:auto!important}.mr-0{margin-right:0!important}.mr-0\.5{margin-right:.125rem!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:.75rem!important}.mr-4{margin-right:1rem!important}.mr-\[4px\]{margin-right:4px!important}.mr-auto{margin-right:auto!important}.mt-0{margin-top:0!important}.mt-0\.5{margin-top:.125rem!important}.mt-1{margin-top:.25rem!important}.mt-10{margin-top:2.5rem!important}.mt-12{margin-top:3rem!important}.mt-14{margin-top:3.5rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:.75rem!important}.mt-4{margin-top:1rem!important}.mt-5{margin-top:1.25rem!important}.mt-6{margin-top:1.5rem!important}.mt-8{margin-top:2rem!important}.mt-9{margin-top:2.25rem!important}.mt-\[0\.125rem\]{margin-top:.125rem!important}.mt-\[0\.275rem\]{margin-top:.275rem!important}.mt-\[0\.875rem\]{margin-top:.875rem!important}.mt-\[120px\]{margin-top:120px!important}.mt-\[3\.125rem\]{margin-top:3.125rem!important}.mt-\[3\.75vw\]{margin-top:3.75vw!important}.mt-\[8px\]{margin-top:8px!important}.mt-auto{margin-top:auto!important}.box-border{box-sizing:border-box!important}.box-content{box-sizing:initial!important}.line-clamp-1{-webkit-line-clamp:1!important}.line-clamp-1,.line-clamp-2{overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important}.line-clamp-2{-webkit-line-clamp:2!important}.line-clamp-3{-webkit-line-clamp:3!important}.line-clamp-3,.line-clamp-4{overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important}.line-clamp-4{-webkit-line-clamp:4!important}.line-clamp-5{-webkit-line-clamp:5!important}.line-clamp-5,.line-clamp-6{overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important}.line-clamp-6{-webkit-line-clamp:6!important}.line-clamp-none{overflow:visible!important;-webkit-box-orient:horizontal!important;-webkit-line-clamp:none!important}.\!block,.block,.line-clamp-none{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.table{display:table!important}.grid{display:grid!important}.\!contents,.contents{display:contents!important}.list-item{display:list-item!important}.\!hidden,.hidden{display:none!important}.aspect-\[128\/67\]{aspect-ratio:128/67!important}.aspect-\[1280\/670\]{aspect-ratio:1280/670!important}.aspect-\[2\/1\]{aspect-ratio:2/1!important}.aspect-\[240\/128\]{aspect-ratio:240/128!important}.aspect-\[4\/3\]{aspect-ratio:4/3!important}.aspect-\[400\/171\]{aspect-ratio:400/171!important}.aspect-\[470\/310\]{aspect-ratio:470/310!important}.aspect-\[500\/497\]{aspect-ratio:500/497!important}.aspect-\[640\/360\]{aspect-ratio:640/360!important}.aspect-\[680\/489\]{aspect-ratio:680/489!important}.aspect-square{aspect-ratio:1/1!important}.aspect-video{aspect-ratio:16/9!important}.h-0{height:0!important}.h-1\/2{height:50%!important}.h-10{height:2.5rem!important}.h-11{height:2.75rem!important}.h-12{height:3rem!important}.h-14{height:3.5rem!important}.h-16{height:4rem!important}.h-20{height:5rem!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-5{height:1.25rem!important}.h-6{height:1.5rem!important}.h-72{height:18rem!important}.h-8{height:2rem!important}.h-9{height:2.25rem!important}.h-\[1\.125rem\]{height:1.125rem!important}.h-\[1\.3125rem\]{height:1.3125rem!important}.h-\[101px\]{height:101px!important}.h-\[10px\]{height:10px!important}.h-\[150px\]{height:150px!important}.h-\[159px\]{height:159px!important}.h-\[16\.25vw\]{height:16.25vw!important}.h-\[18px\]{height:18px!important}.h-\[20px\]{height:20px!important}.h-\[21px\]{height:21px!important}.h-\[24px\]{height:24px!important}.h-\[40px\]{height:40px!important}.h-\[45\%\]{height:45%!important}.h-\[50px\]{height:50px!important}.h-\[7rem\]{height:7rem!important}.h-auto{height:auto!important}.h-full{height:100%!important}.h-px{height:1px!important}.h-screen{height:100vh!important}.max-h-\[104px\]{max-height:104px!important}.max-h-\[192px\]{max-height:192px!important}.max-h-\[360px\]{max-height:360px!important}.max-h-\[400px\]{max-height:400px!important}.max-h-\[580px\]{max-height:580px!important}.min-h-6{min-height:1.5rem!important}.min-h-\[163px\]{min-height:163px!important}.min-h-\[203px\]{min-height:203px!important}.min-h-\[296px\]{min-height:296px!important}.min-h-\[340px\]{min-height:340px!important}.min-h-\[49px\]{min-height:49px!important}.min-h-screen{min-height:100vh!important}.w-1\/2{width:50%!important}.w-1\/3{width:33.333333%!important}.w-1\/4{width:25%!important}.w-10{width:2.5rem!important}.w-11\/12{width:91.666667%!important}.w-12{width:3rem!important}.w-16{width:4rem!important}.w-20{width:5rem!important}.w-28{width:7rem!important}.w-3\/4{width:75%!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-\[1000px\]{width:1000px!important}.w-\[104px\]{width:104px!important}.w-\[128px\]{width:128px!important}.w-\[16\.25vw\]{width:16.25vw!important}.w-\[180px\]{width:180px!important}.w-\[20px\]{width:20px!important}.w-\[220px\]{width:220px!important}.w-\[23\.75vw\]{width:23.75vw!important}.w-\[292px\]{width:292px!important}.w-\[300px\]{width:300px!important}.w-\[4\.5rem\]{width:4.5rem!important}.w-\[56px\]{width:56px!important}.w-\[60px\]{width:60px!important}.w-\[61\%\]{width:61%!important}.w-\[6rem\]{width:6rem!important}.w-\[70\.55555556\%\]{width:70.55555556%!important}.w-\[70px\]{width:70px!important}.w-\[7rem\]{width:7rem!important}.w-\[8\.5rem\]{width:8.5rem!important}.w-\[calc$100\%-23\.75vw$\]{width:calc(100% - 23.75vw)!important}.w-\[calc$100\%-32px$\]{width:calc(100% - 32px)!important}.w-auto{width:auto!important}.w-fit{width:-moz-fit-content!important;width:fit-content!important}.w-full{width:100%!important}.w-max{width:max-content!important}.w-min{width:min-content!important}.w-px{width:1px!important}.w-screen{width:100vw!important}.min-w-0{min-width:0!important}.min-w-40{min-width:10rem!important}.min-w-44{min-width:11rem!important}.min-w-72{min-width:18rem!important}.min-w-\[120px\]{min-width:120px!important}.min-w-\[200px\]{min-width:200px!important}.min-w-\[56px\]{min-width:56px!important}.max-w-\[104px\]{max-width:104px!important}.max-w-\[216px\]{max-width:216px!important}.max-w-\[22\.5rem\]{max-width:22.5rem!important}.max-w-\[240px\]{max-width:240px!important}.max-w-\[30rem\]{max-width:30rem!important}.max-w-\[32rem\]{max-width:32rem!important}.max-w-\[470px\]{max-width:470px!important}.max-w-\[480px\]{max-width:480px!important}.max-w-\[50\%\]{max-width:50%!important}.max-w-\[600px\]{max-width:600px!important}.max-w-\[640px\]{max-width:640px!important}.max-w-\[940px\]{max-width:940px!important}.max-w-\[992px\]{max-width:992px!important}.max-w-fit{max-width:-moz-fit-content!important;max-width:fit-content!important}.max-w-full{max-width:100%!important}.max-w-md{max-width:28rem!important}.max-w-screen-lg{max-width:941px!important}.flex-1{flex:1 1 0%!important}.flex-none{flex:none!important}.flex-shrink{flex-shrink:1!important}.flex-shrink-0{flex-shrink:0!important}.shrink{flex-shrink:1!important}.shrink-0{flex-shrink:0!important}.flex-grow{flex-grow:1!important}.flex-grow-0{flex-grow:0!important}.grow{flex-grow:1!important}.grow-0{flex-grow:0!important}.table-auto{table-layout:auto!important}.border-collapse{border-collapse:collapse!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)!important}.snap-mandatory{--tw-scroll-snap-strictness:mandatory!important}.snap-start{scroll-snap-align:start!important}.snap-end{scroll-snap-align:end!important}.list-inside{list-style-position:inside!important}.list-disc{list-style-type:disc!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-\[24px_1fr\]{grid-template-columns:24px 1fr!important}.grid-cols-\[repeat$auto-fill\2c minmax\(216px\2c 1fr$\)\]{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))!important}.grid-cols-\[repeat$auto-fill\2c minmax\(284px\2c 1fr$\)\]{grid-template-columns:repeat(auto-fill,minmax(284px,1fr))!important}.grid-cols-\[repeat$auto-fit\2c _minmax\(200px\2c _1fr$\)\]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}.grid-cols-\[repeat$auto-fit\2c minmax\(284px\2c 400px$\)\]{grid-template-columns:repeat(auto-fit,minmax(284px,400px))!important}.flex-row{flex-direction:row!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.content-center{align-content:center!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.items-baseline{align-items:baseline!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.justify-items-center{justify-items:center!important}.gap-0{gap:0!important}.gap-0\.5{gap:.125rem!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.gap-\[0\.125rem\]{gap:.125rem!important}.gap-\[0\.5625rem\]{gap:.5625rem!important}.gap-\[0\.625rem\]{gap:.625rem!important}.gap-\[16px\]{gap:16px!important}.gap-\[32px\]{gap:32px!important}.gap-x-1{column-gap:.25rem!important}.gap-x-2{column-gap:.5rem!important}.gap-x-3{column-gap:.75rem!important}.gap-x-4{column-gap:1rem!important}.gap-y-1{row-gap:.25rem!important}.gap-y-2{row-gap:.5rem!important}.gap-y-3{row-gap:.75rem!important}.gap-y-4{row-gap:1rem!important}.gap-y-6{row-gap:1.5rem!important}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0!important;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))!important;border-bottom-width:calc(1px*var(--tw-divide-y-reverse))!important}.divide-border-default>:not([hidden])~:not([hidden]){border-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.self-start{align-self:flex-start!important}.self-end{align-self:flex-end!important}.self-center{align-self:center!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-scroll{overflow:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-x-scroll{overflow-x:scroll!important}.truncate{overflow:hidden!important;white-space:nowrap!important}.text-ellipsis,.truncate{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.whitespace-pre-line{white-space:pre-line!important}.whitespace-pre-wrap{white-space:pre-wrap!important}.break-all{word-break:break-all!important}.break-keep{word-break:keep-all!important}.rounded{border-radius:.25rem!important}.rounded-3xl{border-radius:1.5rem!important}.rounded-\[0\.25rem\]{border-radius:.25rem!important}.rounded-\[16px\]{border-radius:16px!important}.rounded-\[4px\]{border-radius:4px!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.rounded-t-\[4px\]{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.border{border-width:1px!important}.border-0{border-width:0!important}.border-4{border-width:4px!important}.border-8{border-width:8px!important}.border-b{border-bottom-width:1px!important}.border-b-0{border-bottom-width:0!important}.border-b-\[1px\]{border-bottom-width:1px!important}.border-l{border-left-width:1px!important}.border-r{border-right-width:1px!important}.border-t,.border-t-\[1px\]{border-top-width:1px!important}.border-solid{border-style:solid!important}.border-\[\#5E5E5E\]{--tw-border-opacity:1!important;border-color:rgb(94 94 94/var(--tw-border-opacity))!important}.border-border-default{border-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.border-border-invert{border-color:var(--color-border-invert,#fff)!important}.border-border-primary{border-color:var(--color-border-primary,#08131a)!important}.border-border-strong{border-color:var(--color-border-strong,rgba(8,19,26,.2196078431372549))!important}.border-border-weak{border-color:var(--color-border-weak,rgba(8,19,26,.03137254901960784))!important}.border-gray-300{border-color:var(--color-gray-300,#aeb7bd)!important}.border-transparent{border-color:transparent!important}.border-l-border-default{border-left-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.border-t-background-secondary{border-top-color:var(--color-background-secondary,#f5f8fa)!important}.border-t-border-default{border-top-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.bg-\[\#149274\]{--tw-bg-opacity:1!important;background-color:rgb(20 146 116/var(--tw-bg-opacity))!important}.bg-background-primary{background-color:var(--color-background-primary,#fff)!important}.bg-background-secondary{background-color:var(--color-background-secondary,#f5f8fa)!important}.bg-blackAlpha-100{background-color:var(--color-blackAlpha-100,rgba(0,0,0,.1411764705882353))!important}.bg-blackAlpha-600{background-color:var(--color-blackAlpha-600,rgba(0,0,0,.6588235294117647))!important}.bg-blackAlpha-900{background-color:var(--color-blackAlpha-900,#000)!important}.bg-gray-900{background-color:var(--color-gray-900,#08131a)!important}.bg-social-facebook{background-color:var(--color-social-facebook,#1877f2)!important}.bg-social-line{background-color:var(--color-social-line,#01b901)!important}.bg-social-twitter{background-color:var(--color-social-twitter,#000)!important}.bg-surface-caution{background-color:var(--color-surface-caution,#ac7a2d)!important}.bg-surface-cautionSubdued{background-color:var(--color-surface-cautionSubdued,#fefbea)!important}.bg-surface-dangerSubdued{background-color:var(--color-surface-dangerSubdued,#fdf0f3)!important}.bg-surface-disabled{background-color:var(--color-surface-disabled,rgba(0,0,0,.1411764705882353))!important}.bg-surface-normal{background-color:var(--color-surface-normal,#fff)!important}.bg-surface-primary{background-color:var(--color-surface-primary,#08131a)!important}.bg-surface-quaternary{background-color:var(--color-surface-quaternary,#f5f8fa)!important}.bg-surface-successSubdued{background-color:var(--color-surface-successSubdued,#e6f6f2)!important}.bg-transparent{background-color:initial!important}.bg-whiteAlpha-800{background-color:var(--color-whiteAlpha-800,hsla(0,0%,100%,.9019607843137255))!important}.bg-yellow-900{background-color:var(--color-yellow-900,#716724)!important}.bg-cover{background-size:cover!important}.bg-center{background-position:50%!important}.object-contain{object-fit:contain!important}.object-cover{object-fit:cover!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:.75rem!important}.p-4{padding:1rem!important}.p-6{padding:1.5rem!important}.p-8{padding:2rem!important}.p-\[0\.625rem\]{padding:.625rem!important}.p-\[2px\]{padding:2px!important}.\!px-16{padding-left:4rem!important;padding-right:4rem!important}.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.px-\[16px\]{padding-left:16px!important;padding-right:16px!important}.px-\[32px\]{padding-left:32px!important;padding-right:32px!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important}.py-12{padding-top:3rem!important;padding-bottom:3rem!important}.py-14{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-8{padding-top:2rem!important;padding-bottom:2rem!important}.py-\[8px\]{padding-top:8px!important;padding-bottom:8px!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-10{padding-bottom:2.5rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:.75rem!important}.pb-4{padding-bottom:1rem!important}.pb-6{padding-bottom:1.5rem!important}.pb-\[24px\]{padding-bottom:24px!important}.pl-1{padding-left:.25rem!important}.pl-10{padding-left:2.5rem!important}.pl-2{padding-left:.5rem!important}.pl-4{padding-left:1rem!important}.pl-8{padding-left:2rem!important}.pr-2{padding-right:.5rem!important}.pr-4{padding-right:1rem!important}.pr-8{padding-right:2rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-10{padding-top:2.5rem!important}.pt-16{padding-top:4rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:.75rem!important}.pt-4{padding-top:1rem!important}.pt-6{padding-top:1.5rem!important}.pt-8{padding-top:2rem!important}.pt-\[16px\]{padding-top:16px!important}.pt-\[32px\]{padding-top:32px!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.-indent-4{text-indent:-1rem!important}.align-baseline{vertical-align:initial!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.text-2xl{font-size:var(--font-size-2xl,1.75rem)!important}.text-3xl{font-size:var(--font-size-3xl,2.25rem)!important}.text-\[0\.625rem\]{font-size:.625rem!important}.text-\[1\.875rem\]{font-size:1.875rem!important}.text-\[1rem\]{font-size:1rem!important}.text-\[4rem\]{font-size:4rem!important}.text-base{font-size:var(--font-size-base,1rem)!important}.text-lg{font-size:var(--font-size-lg,1.125rem)!important}.text-sm{font-size:var(--font-size-sm,.875rem)!important}.text-xl{font-size:var(--font-size-xl,1.25rem)!important}.text-xs{font-size:var(--font-size-xs,.75rem)!important}.font-bold{font-weight:700!important}.font-normal{font-weight:400!important}.font-semibold{font-weight:600!important}.capitalize{text-transform:capitalize!important}.italic{font-style:italic!important}.leading-6{line-height:1.5rem!important}.leading-8{line-height:2rem!important}.leading-9{line-height:2.25rem!important}.leading-\[1\.125rem\]{line-height:1.125rem!important}.leading-\[1\.3125rem\]{line-height:1.3125rem!important}.leading-loose{line-height:2!important}.leading-none{line-height:1!important}.leading-normal{line-height:1.5!important}.tracking-\[\.06em\]{letter-spacing:.06em!important}.tracking-\[0\.04em\]{letter-spacing:.04em!important}.text-\[\#149274\]{--tw-text-opacity:1!important;color:rgb(20 146 116/var(--tw-text-opacity))!important}.text-\[\#4F9AA8\]{--tw-text-opacity:1!important;color:rgb(79 154 168/var(--tw-text-opacity))!important}.text-\[\#AA2A2A\]{--tw-text-opacity:1!important;color:rgb(170 42 42/var(--tw-text-opacity))!important}.text-\[\#ECA726\]{--tw-text-opacity:1!important;color:rgb(236 167 38/var(--tw-text-opacity))!important}.text-background-primary{color:var(--color-background-primary,#fff)!important}.text-custom-accent{color:var(--color-custom-accent,#238f76)!important}.text-social-facebook{color:var(--color-social-facebook,#1877f2)!important}.text-social-line{color:var(--color-social-line,#01b901)!important}.text-text-caution{color:var(--color-text-caution,#c88d34)!important}.text-text-clickable-icon{color:var(--color-text-clickable-icon,rgba(8,19,26,.5019607843137255))!important}.text-text-danger{color:var(--color-text-danger,#bc3852)!important}.text-text-danger-reaction{color:var(--color-text-danger-reaction,#a53148)!important}.text-text-invert{color:var(--color-text-invert,#fff)!important}.text-text-like{color:var(--color-text-like,#eb4667)!important}.text-text-offer{color:var(--color-text-offer,#e4674e)!important}.text-text-primary{color:var(--color-text-primary,#08131a)!important}.text-text-secondary{color:var(--color-text-secondary,rgba(8,19,26,.6588235294117647))!important}.text-text-success{color:var(--color-text-success,#238f76)!important}.text-whiteAlpha-900{color:var(--color-whiteAlpha-900,#fff)!important}.text-yellow-300{color:var(--color-yellow-300,#f7e675)!important}.underline{-webkit-text-decoration-line:underline!important;text-decoration-line:underline!important}.line-through{-webkit-text-decoration-line:line-through!important;text-decoration-line:line-through!important}.opacity-70{opacity:.7!important}.shadow-1{--tw-shadow:var(--elevation-1,0px 1px 3px 1px rgba(0,0,0,0.1411764705882353),0px 1px 2px 0px rgba(0,0,0,0.2196078431372549))!important;--tw-shadow-colored:var(--elevation-1,0px 1px 3px 1px rgba(0,0,0,0.1411764705882353),0px 1px 2px 0px rgba(0,0,0,0.2196078431372549))!important;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.outline{outline-style:solid!important}.outline-2{outline-width:2px!important}.outline-offset-2{outline-offset:2px!important}.outline-inherit{outline-color:inherit!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important}.transition,.transition-all{transition-duration:.15s!important}.transition-all{transition-property:all!important}.transition-colors{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color!important;transition-duration:.15s!important}.transition-opacity{transition-property:opacity!important;transition-duration:.15s!important}.duration-200{transition-duration:.2s!important}.ease-in{transition-timing-function:var(--easeIn,ease-in)!important}.ease-inOut{transition-timing-function:var(--easeInOut,ease-in-out)!important}.ease-inOutExpo{transition-timing-function:var(--easeInOutExpo,cubic-bezier(1,0,0,1))!important}.font-palt{font-feature-settings:var(--font-feature-settings-palt,"palt" 1)!important}@font-face{font-family:"PrimaryEmojiFont";src:local("Apple Color Emoji");unicode-range:u+2764}html{box-sizing:border-box;font-size:100%}body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;font-size:var(--font-size-base);font-weight:400;font-kerning:normal;line-height:1.5;color:var(--color-text-primary);word-wrap:break-word;background-color:var(--color-background-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[tabindex]:active,[tabindex]:hover{outline:none}@media only screen and (min-width:769px){[data-tooltip]:focus,[data-tooltip]:hover{position:relative}[data-tooltip]:focus:after,[data-tooltip]:hover:after{position:absolute;display:block;max-width:200px;padding:4px 8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.5;text-align:center;text-overflow:ellipsis;word-break:break-all;white-space:nowrap;pointer-events:none;content:attr(data-tooltip);border:1px solid var(--color-border-weak);border-radius:4px;opacity:0;animation:tooltipAnimation .2s cubic-bezier(1,0,0,1) .2s forwards;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%);color:var(--color-text-secondary);background-color:var(--color-background-secondary)}@keyframes tooltipAnimation{0%{opacity:0}to{opacity:1}}}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::placeholder{color:var(--color-text-placeholder)}button{padding:0}a{color:inherit;text-decoration:none}*,:after,:before{box-sizing:inherit}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{padding:0;margin:0}address,cite,dfn,em,i{font-style:normal}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-weight:400;color:inherit}ol,ul{list-style-type:none}table{width:100%}th{text-align:left}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}:root{--color-custom-accent:#238f76;--color-custom-accent-reaction:#1e7b65;--color-surface-primary:#08131a;--color-surface-secondary:#5193c6;--color-surface-tertiary:#5a656b;--color-surface-quaternary:#f5f8fa;--color-surface-like:#eb4667;--color-surface-success:#238f76;--color-surface-success-reaction:#1e7b65;--color-surface-danger:#bc3852;--color-surface-danger-reaction:#a53148;--color-surface-caution:#ac7a2d;--color-surface-disabled:rgba(0,0,0,0.1411764705882353);--color-surface-normal:#fff;--color-surface-clear:hsla(0,0%,100%,0);--color-surface-successSubdued:#e6f6f2;--color-surface-dangerSubdued:#fdf0f3;--color-surface-cautionSubdued:#fefbea;--color-surface-badge:#e4674e;--color-surface-offer:#e4674e;--color-surface-invert:#000;--color-surface-image-overlay:rgba(0,0,0,0.3215686274509804);--color-text-primary:#08131a;--color-text-secondary:rgba(8,19,26,0.6588235294117647);--color-text-clickable-icon:rgba(8,19,26,0.5019607843137255);--color-text-disabled:rgba(8,19,26,0.5019607843137255);--color-text-success:#238f76;--color-text-success-reaction:#1e7b65;--color-text-danger:#bc3852;--color-text-danger-reaction:#a53148;--color-text-caution:#c88d34;--color-text-like:#eb4667;--color-text-offer:#e4674e;--color-text-point:#8b7f2c;--color-text-invert:#fff;--color-text-placeholder:#888;--color-border-primary:#08131a;--color-border-default:rgba(8,19,26,0.1411764705882353);--color-border-weak:rgba(8,19,26,0.03137254901960784);--color-border-strong:rgba(8,19,26,0.2196078431372549);--color-border-focus:#3439c9;--color-border-success:#238f76;--color-border-danger:#bc3852;--color-border-caution:#c88d34;--color-border-offer:#e4674e;--color-border-invert:#fff;--color-background-primary:#fff;--color-background-secondary:#f5f8fa;--color-social-twitter:#000;--color-social-twitter-reaction:#222;--color-social-facebook:#1877f2;--color-social-facebook-reaction:#0b5fcc;--color-social-hatena:#00a4df;--color-social-hatena-reaction:#007eac;--color-social-line:#01b901;--color-social-line-reaction:#018601;--color-social-note:#5ac8b8;--color-social-note-reaction:#3cb3a2;--color-ambientLight:rgba(0,0,0,0.1411764705882353);--color-keyLight:rgba(0,0,0,0.2196078431372549);--color-reactionOverlay:rgba(8,19,26,0.03137254901960784)}@media only screen and (prefers-color-scheme:dark){html.android-webview,html.ios-webview{--color-custom-accent:#25c1a9;--color-custom-accent-reaction:#228d74;--color-surface-primary:hsla(0,0%,100%,0.9019607843137255);--color-surface-secondary:#90cfeb;--color-surface-tertiary:#c5ccd1;--color-surface-quaternary:#000;--color-surface-like:#eb4667;--color-surface-success:#2cb696;--color-surface-success-reaction:#27a286;--color-surface-danger:#eb4667;--color-surface-danger-reaction:#d43f5d;--color-surface-caution:#ffb442;--color-surface-disabled:hsla(0,0%,100%,0.12156862745098039);--color-surface-normal:#202222;--color-surface-clear:hsla(0,0%,100%,0.2196078431372549);--color-surface-successSubdued:#145445;--color-surface-dangerSubdued:#762334;--color-surface-cautionSubdued:#75531e;--color-surface-badge:#e4674e;--color-surface-offer:#e4674e;--color-surface-invert:#fff;--color-surface-image-overlay:rgba(0,0,0,0.3215686274509804);--color-text-primary:hsla(0,0%,100%,0.9019607843137255);--color-text-secondary:hsla(0,0%,100%,0.6588235294117647);--color-text-clickable-icon:hsla(0,0%,100%,0.4);--color-text-disabled:hsla(0,0%,100%,0.4);--color-text-success:#2cb696;--color-text-success-reaction:#27a286;--color-text-danger:#eb4667;--color-text-danger-reaction:#d43f5d;--color-text-caution:#ffb442;--color-text-like:#eb4667;--color-text-offer:#e4674e;--color-text-point:#a69735;--color-text-invert:#08131a;--color-text-placeholder:#888;--color-border-primary:hsla(0,0%,100%,0.9019607843137255);--color-border-default:hsla(0,0%,100%,0.12156862745098039);--color-border-weak:hsla(0,0%,100%,0.03137254901960784);--color-border-strong:hsla(0,0%,100%,0.2196078431372549);--color-border-focus:#60aedb;--color-border-success:#2cb696;--color-border-danger:#eb4667;--color-border-caution:#ffb442;--color-border-offer:#e4674e;--color-border-invert:#08131a;--color-background-primary:#202222;--color-background-secondary:#000;--color-social-twitter:#000;--color-social-twitter-reaction:#222;--color-social-facebook:#1877f2;--color-social-facebook-reaction:#0b5fcc;--color-social-hatena:#00a4df;--color-social-hatena-reaction:#007eac;--color-social-line:#01b901;--color-social-line-reaction:#018601;--color-social-note:#5ac8b8;--color-social-note-reaction:#3cb3a2;--color-ambientLight:rgba(0,0,0,0.1411764705882353);--color-keyLight:rgba(0,0,0,0.2196078431372549);--color-reactionOverlay:rgba(8,19,26,0.03137254901960784)}}:root{--font-feature-settings-palt:"palt" 1;--color-clear:hsla(0,0%,100%,0);--color-whiteAlpha-900:#fff;--color-whiteAlpha-800:hsla(0,0%,100%,0.9019607843137255);--color-whiteAlpha-700:hsla(0,0%,100%,0.8196078431372549);--color-whiteAlpha-600:hsla(0,0%,100%,0.6588235294117647);--color-whiteAlpha-500:hsla(0,0%,100%,0.5019607843137255);--color-whiteAlpha-400:hsla(0,0%,100%,0.4);--color-whiteAlpha-300:hsla(0,0%,100%,0.3215686274509804);--color-whiteAlpha-200:hsla(0,0%,100%,0.2196078431372549);--color-whiteAlpha-100:hsla(0,0%,100%,0.12156862745098039);--color-whiteAlpha-50:hsla(0,0%,100%,0.03137254901960784);--color-blackAlpha-900:#000;--color-blackAlpha-800:rgba(0,0,0,0.9019607843137255);--color-blackAlpha-700:rgba(0,0,0,0.8196078431372549);--color-blackAlpha-600:rgba(0,0,0,0.6588235294117647);--color-blackAlpha-500:rgba(0,0,0,0.5019607843137255);--color-blackAlpha-400:rgba(0,0,0,0.4);--color-blackAlpha-300:rgba(0,0,0,0.3215686274509804);--color-blackAlpha-200:rgba(0,0,0,0.2196078431372549);--color-blackAlpha-100:rgba(0,0,0,0.1411764705882353);--color-blackAlpha-50:rgba(0,0,0,0.03137254901960784);--color-grayAlpha-800:rgba(8,19,26,0.9019607843137255);--color-grayAlpha-700:rgba(8,19,26,0.8196078431372549);--color-grayAlpha-600:rgba(8,19,26,0.6588235294117647);--color-grayAlpha-500:rgba(8,19,26,0.5019607843137255);--color-grayAlpha-400:rgba(8,19,26,0.4);--color-grayAlpha-300:rgba(8,19,26,0.3215686274509804);--color-grayAlpha-200:rgba(8,19,26,0.2196078431372549);--color-grayAlpha-100:rgba(8,19,26,0.1411764705882353);--color-grayAlpha-50:rgba(8,19,26,0.03137254901960784);--color-gray-900:#08131a;--color-gray-800:#202a30;--color-gray-700:#363f42;--color-gray-600:#5a656b;--color-gray-500:#7e888f;--color-gray-400:#9ca7ad;--color-gray-300:#aeb7bd;--color-gray-200:#c5ccd1;--color-gray-100:#dce0e3;--color-gray-50:#f5f8fa;--color-darkblue-900:#181a5d;--color-darkblue-800:#1e2072;--color-darkblue-700:#232788;--color-darkblue-600:#292d9e;--color-darkblue-500:#2e33b3;--color-darkblue-400:#3439c9;--color-darkblue-300:#6165d5;--color-darkblue-200:#8d90e1;--color-darkblue-100:#babced;--color-darkblue-50:#e7e7f9;--color-blue-900:#32517d;--color-blue-800:#43709d;--color-blue-700:#4981b2;--color-blue-600:#5193c6;--color-blue-500:#57a0d4;--color-blue-400:#60aedb;--color-blue-300:#70bce1;--color-blue-200:#90cfeb;--color-blue-100:#bae2f4;--color-blue-50:#e3f4fb;--color-green-900:#145445;--color-green-800:#196755;--color-green-700:#1e7b65;--color-green-600:#238f76;--color-green-500:#27a286;--color-green-400:#2cb696;--color-green-300:#5ac6ad;--color-green-200:#89d6c4;--color-green-100:#b7e6db;--color-green-50:#e6f6f2;--color-yellow-900:#716724;--color-yellow-800:#8b7f2c;--color-yellow-700:#a69735;--color-yellow-600:#c0af3d;--color-yellow-500:#dbc746;--color-yellow-400:#f5df4e;--color-yellow-300:#f7e675;--color-yellow-200:#f9ed9c;--color-yellow-100:#fcf4c3;--color-yellow-50:#fefbea;--color-orange-900:#75531e;--color-orange-800:#916626;--color-orange-700:#ac7a2d;--color-orange-600:#c88d34;--color-orange-500:#e4a13b;--color-orange-400:#ffb442;--color-orange-300:#ffb94f;--color-orange-200:#ffcd81;--color-orange-100:#ffe1b3;--color-orange-50:#fff3e0;--color-red-900:#753528;--color-red-800:#914131;--color-red-700:#ac4e3b;--color-red-600:#c85a44;--color-red-500:#e4674e;--color-red-400:#ff7357;--color-red-300:#ff927c;--color-red-200:#ffb1a1;--color-red-100:#ffcfc6;--color-red-50:#ffeeeb;--color-pink-900:#762334;--color-pink-800:#8d2a3e;--color-pink-700:#a53148;--color-pink-600:#bc3852;--color-pink-500:#d43f5d;--color-pink-400:#eb4667;--color-pink-300:#f0718a;--color-pink-200:#f49bad;--color-pink-100:#f9c6d0;--color-pink-50:#fdf0f3;--color-purple-900:#4d2459;--color-purple-800:#5f2c6e;--color-purple-700:#713583;--color-purple-600:#833d98;--color-purple-500:#9546ad;--color-purple-400:#a74ec2;--color-purple-300:#ba75cf;--color-purple-200:#d09fde;--color-purple-100:#e1c3ea;--color-purple-50:#f4eaf8;--elevation-6:0px 6px 10px 4px rgba(0,0,0,0.1411764705882353),0px 2px 3px 0px rgba(0,0,0,0.2196078431372549);--elevation-4:0px 4px 8px 3px rgba(0,0,0,0.1411764705882353),0px 1px 3px 0px rgba(0,0,0,0.2196078431372549);--elevation-1:0px 1px 3px 1px rgba(0,0,0,0.1411764705882353),0px 1px 2px 0px rgba(0,0,0,0.2196078431372549);--z-index-toast:10000;--z-index-modal:9999;--z-index-popupMessage:9998;--z-index-10000:10000;--z-index-9999:9999;--z-index-9998:9998;--z-index-50:50;--z-index-40:40;--z-index-30:30;--z-index-20:20;--z-index-10:10;--z-index-0:0;--easeOut:cubic-bezier(0,0,0.58,1);--easeInOutExpo:cubic-bezier(1,0,0,1);--easeInOut:cubic-bezier(0.42,0,0.58,1);--easeIn:cubic-bezier(0.42,0,1,1);--ratio-movieNoteCard:56.25%;--ratio-soundNoteCard:66.66667%;--ratio-imageNoteCard:66.66667%;--ratio-introductionCard:56.25%;--ratio-circlePlanCard:56.25%;--ratio-circleCard:52.34375%;--ratio-userPopupBanner:50%;--ratio-contestBanner:33.33333%;--ratio-movieCover:56.25%;--ratio-magazineCover--card:35.5%;--ratio-magazineCover:16.875%;--ratio-creatorCover--card:35.5%;--ratio-creatorCover:16.875%;--ratio-noteDetailCover:52.34375%;--size-breakpoint-2xl:2048px;--size-breakpoint-xl:1280px;--size-breakpoint-lg:941px;--size-breakpoint-md:769px;--size-breakpoint-sm:481px;--size-breakpoint_xlarge:1920px;--size-breakpoint_large:1280px;--size-breakpoint_tb:768px;--size-breakpoint_sp:480px;--size-breakpoint_sp_under:360px;--size-content_navbar_primary_mobile_height:48px;--size-content_navbar_primary_height:64px;--size-content_edit:580px;--size-content_timeline:580px;--size-content_2column_sub:280px;--size-content_2column_main:610px;--size-content_large:1920px;--size-content_small:620px;--size-content:940px;--family-emoji:PrimaryEmojiFont,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Apple Color Emoji","noto color emoji",Arial,"Segoe UI Emoji","Segoe UI Symbol",Meiryo,sans-serif;--family-monospace:SFMono-Regular,Consolas,Menlo,Courier,monospace;--family-en:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial;--family-number:"Open Sans",sans-serif;--family-windowsSerif:YakuHanMPs,"Yu Mincho",YuMincho,"MS PMincho",serif;--family-windowsYakuhan:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif;--family-windows:"Segoe UI",Arial,Meiryo,sans-serif;--family-serif:"Hiragino Mincho ProN","Hiragino Mincho Pro",HGSMinchoE,"Yu Mincho",YuMincho,"MS PMincho",serif;--family-base:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;--family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;--font-size-4xl:3.5rem;--font-size-3xl:2.25rem;--font-size-2xl:1.75rem;--font-size-xl:1.25rem;--font-size-lg:1.125rem;--font-size-base:1rem;--font-size-sm:0.875rem;--font-size-xs:0.75rem;--font-size-article-title-desktop:2rem;--font-size-layout-infra-56:3.5rem;--font-size-layout-infra-36:2.25rem;--font-size-layout-infra-20:1.25rem;--font-size-layout-infra-16:1rem;--font-size-layout-infra-14:0.875rem;--font-size-layout-infra-12:0.75rem}.modal-open{overflow:hidden}.modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:none}.modal-open .modal-wrapper{display:block}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-blackAlpha-400);opacity:1}@media only screen and (prefers-color-scheme:dark){.modal-backdrop html.ios-webview{background-color:var(--color-whiteAlpha-500)}}.modal-backdrop-enter{opacity:0}.modal-backdrop-enter-active{transition:all .2s ease-in-out}.modal-backdrop-enter-to,.modal-backdrop-leave{opacity:1}.modal-backdrop-leave-active{transition:all .2s ease-in-out}.modal-backdrop-leave-to{opacity:0}.modal-content-wrapper{position:fixed;top:0;right:0;left:0;z-index:2;height:100%;overflow:auto;text-align:center}.modal-content-wrapper:before{display:inline-block;height:100%;vertical-align:middle;content:""}.modal-content{position:relative;display:inline-block;text-align:left;vertical-align:middle}.modal-content-enter{opacity:0;transform:scale(.9)}.modal-content-enter-active{transition:all .2s ease-in-out 30ms}.modal-content-enter-to{opacity:1;transform:scale(1)}.modal-content-leave-active{display:none;transition:all .2s ease-in-out}.modal-content-slide-enter{transform:translateY(100%)}.modal-content-slide-enter-active{transition:all .3s ease-out 30ms}.modal-content-slide-enter-to,.modal-content-slide-leave{transform:translate(0)}.modal-content-slide-leave-active{transition:all .2s ease-in}.modal-content-slide-leave-to{transform:translateY(100%)}.sortable-ghost{position:relative}.sortable-ghost:before{position:absolute;top:4px;right:4px;bottom:4px;left:4px;z-index:3;display:block;content:"";background-color:var(--color-surface-normal);border:1px dashed var(--color-grayAlpha-300)}.d-inline-block{display:inline-block}.before\:absolute:before{content:var(--tw-content)!important;position:absolute!important}.before\:bottom-0:before{content:var(--tw-content)!important;bottom:0!important}.before\:left-4:before{content:var(--tw-content)!important;left:1rem!important}.before\:block:before{content:var(--tw-content)!important;display:block!important}.before\:h-4:before{content:var(--tw-content)!important;height:1rem!important}.before\:w-4:before{content:var(--tw-content)!important;width:1rem!important}.before\:origin-bottom-left:before{content:var(--tw-content)!important;transform-origin:bottom left!important}.before\:rotate-45:before{content:var(--tw-content)!important;--tw-rotate:45deg!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.before\:border-b:before{content:var(--tw-content)!important;border-bottom-width:1px!important}.before\:border-r:before{content:var(--tw-content)!important;border-right-width:1px!important}.before\:border-border-default:before{content:var(--tw-content)!important;border-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.before\:bg-background-secondary:before{content:var(--tw-content)!important;background-color:var(--color-background-secondary,#f5f8fa)!important}.before\:content-\[\'\'\]:before{--tw-content:""!important;content:var(--tw-content)!important}.before\:content-\[\'\30FB\'\]:before{--tw-content:"・"!important;content:var(--tw-content)!important}.after\:-mt-3:after{content:var(--tw-content)!important;margin-top:-.75rem!important}.after\:block:after{content:var(--tw-content)!important;display:block!important}.after\:h-px:after{content:var(--tw-content)!important;height:1px!important}.after\:w-full:after{content:var(--tw-content)!important;width:100%!important}.after\:border-t:after{content:var(--tw-content)!important;border-top-width:1px!important}.after\:border-dashed:after{content:var(--tw-content)!important;border-style:dashed!important}.after\:border-border-strong:after{content:var(--tw-content)!important;border-color:var(--color-border-strong,rgba(8,19,26,.2196078431372549))!important}.after\:content-\[\'\'\]:after{--tw-content:""!important;content:var(--tw-content)!important}.first\:ml-0:first-child{margin-left:0!important}.last\:mb-0:last-child{margin-bottom:0!important}.last\:mt-0:last-child{margin-top:0!important}.last\:pb-0:last-child{padding-bottom:0!important}.first-of-type\:mt-0:first-of-type{margin-top:0!important}.empty\:mr-0:empty{margin-right:0!important}.empty\:mt-0:empty{margin-top:0!important}.focus-within\:outline:focus-within{outline-style:solid!important}.hover\:border-border-strong:hover{border-color:var(--color-border-strong,rgba(8,19,26,.2196078431372549))!important}.hover\:bg-background-secondary:hover{background-color:var(--color-background-secondary,#f5f8fa)!important}.hover\:bg-blackAlpha-500:hover{background-color:var(--color-blackAlpha-500,rgba(0,0,0,.5019607843137255))!important}.hover\:bg-reactionOverlay:hover{background-color:var(--color-reactionOverlay,rgba(8,19,26,.03137254901960784))!important}.hover\:text-text-primary:hover{color:var(--color-text-primary,#08131a)!important}.hover\:text-text-secondary:hover{color:var(--color-text-secondary,rgba(8,19,26,.6588235294117647))!important}.hover\:underline:hover{-webkit-text-decoration-line:underline!important;text-decoration-line:underline!important}.hover\:no-underline:hover{-webkit-text-decoration-line:none!important;text-decoration-line:none!important}.hover\:opacity-70:hover{opacity:.7!important}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}.disabled\:cursor-text:disabled{cursor:text!important}.group:hover .group-hover\:opacity-50{opacity:.5!important}@media (min-width:481px){.sm\:mx-10{margin-left:2.5rem!important;margin-right:2.5rem!important}.sm\:mx-\[16px\]{margin-left:16px!important;margin-right:16px!important}.sm\:-mt-6{margin-top:-1.5rem!important}.sm\:mb-12{margin-bottom:3rem!important}.sm\:mb-2{margin-bottom:.5rem!important}.sm\:mb-4{margin-bottom:1rem!important}.sm\:mb-\[1\.25vw\]{margin-bottom:1.25vw!important}.sm\:mb-\[2\.5vw\]{margin-bottom:2.5vw!important}.sm\:mb-\[3\.75vw\]{margin-bottom:3.75vw!important}.sm\:ml-10{margin-left:2.5rem!important}.sm\:mr-1{margin-right:.25rem!important}.sm\:mt-4{margin-top:1rem!important}.sm\:mt-6{margin-top:1.5rem!important}.sm\:mt-8{margin-top:2rem!important}.sm\:block{display:block!important}.sm\:flex{display:flex!important}.sm\:grid{display:grid!important}.sm\:hidden{display:none!important}.sm\:max-h-\[440px\]{max-height:440px!important}.sm\:w-\[80px\]{width:80px!important}.sm\:w-\[84px\]{width:84px!important}.sm\:w-auto{width:auto!important}.sm\:w-full{width:100%!important}.sm\:w-min{width:min-content!important}.sm\:min-w-\[84px\]{min-width:84px!important}.sm\:snap-center{scroll-snap-align:center!important}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sm\:justify-center{justify-content:center!important}.sm\:gap-3{gap:.75rem!important}.sm\:gap-3\.5{gap:.875rem!important}.sm\:gap-8{gap:2rem!important}.sm\:gap-\[11\.25vw\]{gap:11.25vw!important}.sm\:gap-x-8{column-gap:2rem!important}.sm\:p-10{padding:2.5rem!important}.sm\:p-6{padding:1.5rem!important}.sm\:px-0{padding-left:0!important;padding-right:0!important}.sm\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.sm\:px-16{padding-left:4rem!important;padding-right:4rem!important}.sm\:px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.sm\:py-12{padding-top:3rem!important;padding-bottom:3rem!important}.sm\:pb-0{padding-bottom:0!important}.sm\:pb-6{padding-bottom:1.5rem!important}.sm\:pl-4{padding-left:1rem!important}.sm\:pt-1{padding-top:.25rem!important}.sm\:pt-14{padding-top:3.5rem!important}.sm\:text-base{font-size:var(--font-size-base,1rem)!important}.sm\:text-lg{font-size:var(--font-size-lg,1.125rem)!important}.sm\:text-sm{font-size:var(--font-size-sm,.875rem)!important}.sm\:text-xs{font-size:var(--font-size-xs,.75rem)!important}}@media (min-width:769px){.md\:sticky{position:-webkit-sticky!important;position:sticky!important}.md\:bottom-2{bottom:.5rem!important}.md\:right-2{right:.5rem!important}.md\:top-6{top:1.5rem!important}.md\:m-0{margin:0!important}.md\:m-2{margin:.5rem!important}.md\:mx-0{margin-left:0!important;margin-right:0!important}.md\:my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.md\:mb-0{margin-bottom:0!important}.md\:mb-10{margin-bottom:2.5rem!important}.md\:mb-2{margin-bottom:.5rem!important}.md\:mb-4{margin-bottom:1rem!important}.md\:mb-5{margin-bottom:1.25rem!important}.md\:mb-6{margin-bottom:1.5rem!important}.md\:ml-0{margin-left:0!important}.md\:ml-16{margin-left:4rem!important}.md\:ml-24{margin-left:6rem!important}.md\:mr-0{margin-right:0!important}.md\:mr-4{margin-right:1rem!important}.md\:mt-0{margin-top:0!important}.md\:mt-10{margin-top:2.5rem!important}.md\:mt-6{margin-top:1.5rem!important}.md\:mt-8{margin-top:2rem!important}.md\:line-clamp-3{overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important}.md\:block{display:block!important}.md\:flex{display:flex!important}.md\:\!inline-flex{display:inline-flex!important}.md\:grid{display:grid!important}.md\:hidden{display:none!important}.md\:aspect-\[1280\/670\]{aspect-ratio:1280/670!important}.md\:h-8{height:2rem!important}.md\:h-\[104px\]{height:104px!important}.md\:h-\[360px\]{height:360px!important}.md\:h-full{height:100%!important}.md\:w-2\/5{width:40%!important}.md\:w-40{width:10rem!important}.md\:w-8{width:2rem!important}.md\:w-\[104px\]{width:104px!important}.md\:w-\[152px\]{width:152px!important}.md\:w-\[36\.5rem\]{width:36.5rem!important}.md\:w-\[640px\]{width:640px!important}.md\:w-\[calc$100\%-152px$\]{width:calc(100% - 152px)!important}.md\:w-auto{width:auto!important}.md\:w-full{width:100%!important}.md\:min-w-\[375px\]{min-width:375px!important}.md\:min-w-\[96px\]{min-width:96px!important}.md\:max-w-fit{max-width:-moz-fit-content!important;max-width:fit-content!important}.md\:max-w-md{max-width:28rem!important}.md\:flex-1{flex:1 1 0%!important}.md\:flex-initial{flex:0 1 auto!important}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.md\:flex-row{flex-direction:row!important}.md\:items-center{align-items:center!important}.md\:justify-end{justify-content:flex-end!important}.md\:gap-2{gap:.5rem!important}.md\:gap-3{gap:.75rem!important}.md\:gap-4{gap:1rem!important}.md\:gap-\[4\.5rem\]{gap:4.5rem!important}.md\:gap-x-1{column-gap:.25rem!important}.md\:gap-x-8{column-gap:2rem!important}.md\:gap-y-12{row-gap:3rem!important}.md\:overflow-auto{overflow:auto!important}.md\:rounded{border-radius:.25rem!important}.md\:border{border-width:1px!important}.md\:border-0{border-width:0!important}.md\:border-border-default{border-color:var(--color-border-default,rgba(8,19,26,.1411764705882353))!important}.md\:p-0{padding:0!important}.md\:p-4{padding:1rem!important}.md\:p-6{padding:1.5rem!important}.md\:p-8{padding:2rem!important}.md\:p-\[40px\]{padding:40px!important}.md\:px-0{padding-left:0!important;padding-right:0!important}.md\:px-16{padding-left:4rem!important;padding-right:4rem!important}.md\:px-4{padding-left:1rem!important;padding-right:1rem!important}.md\:px-40{padding-left:10rem!important;padding-right:10rem!important}.md\:px-7{padding-left:1.75rem!important;padding-right:1.75rem!important}.md\:py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important}.md\:py-12{padding-top:3rem!important;padding-bottom:3rem!important}.md\:py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.md\:pb-0{padding-bottom:0!important}.md\:pl-0{padding-left:0!important}.md\:pl-3{padding-left:.75rem!important}.md\:pr-0{padding-right:0!important}.md\:pr-4{padding-right:1rem!important}.md\:pt-0{padding-top:0!important}.md\:pt-12{padding-top:3rem!important}.md\:text-2xl{font-size:var(--font-size-2xl,1.75rem)!important}.md\:text-\[1\.25rem\]{font-size:1.25rem!important}.md\:text-\[2rem\]{font-size:2rem!important}.md\:text-sm{font-size:var(--font-size-sm,.875rem)!important}.md\:text-xs{font-size:var(--font-size-xs,.75rem)!important}.md\:transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-duration:.15s!important}.md\:before\:left-6:before{content:var(--tw-content)!important;left:1.5rem!important}.hover\:md\:text-text-secondary:hover{color:var(--color-text-secondary,rgba(8,19,26,.6588235294117647))!important}.md\:hover\:text-text-primary:hover{color:var(--color-text-primary,#08131a)!important}.md\:hover\:text-text-secondary:hover{color:var(--color-text-secondary,rgba(8,19,26,.6588235294117647))!important}.md\:hover\:opacity-100:hover{opacity:1!important}}@media (min-width:941px){.lg\:block{display:block!important}.lg\:\!flex{display:flex!important}.lg\:min-w-\[180px\]{min-width:180px!important}.lg\:grid-cols-\[384px_minmax$auto\2c 940px$\]{grid-template-columns:384px minmax(auto,940px)!important}.lg\:flex-col{flex-direction:column!important}.lg\:items-start{align-items:flex-start!important}.lg\:px-8{padding-left:2rem!important;padding-right:2rem!important}.lg\:text-xs{font-size:var(--font-size-xs,.75rem)!important}.lg\:transition-all{transition-property:all!important;transition-duration:.15s!important}}@media print{.print\:hidden{display:none!important}}.peer:hover~.peer-hover\:\[\&_\.thumbnail\]\:opacity-50 .thumbnail{opacity:.5!important} .nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#29d;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red} .o-navBar[data-v-1339646a]{position:relative;background-color:var(--color-surface-normal);border:none;transition:transform .3s ease}@media only screen and (max-width:768px){.o-navBar[data-v-1339646a]{border-bottom:1px solid var(--color-border-default);box-shadow:none}}.o-navBar.is-sticky[data-v-1339646a]{position:-webkit-sticky;position:sticky;top:0;z-index:21;border-bottom:1px solid var(--color-border-default);transition:transform .3s ease;transform:translate(0)}@media print{.o-navBar.is-sticky[data-v-1339646a]{display:none}}.o-navBar.is-stickyActive1[data-v-1339646a]{transform:translateY(-100%)}.o-navBar.is-stickyActive1 .o-navBar__creator[data-v-1339646a]{max-height:100px;visibility:visible;opacity:1;transition:opacity .3s}.o-navBar.is-stickyActive2[data-v-1339646a]{transform:translate(0)}.o-navBar.is-stickyHide[data-v-1339646a]{transform:translateY(-200%)}.o-navBar.is-stickyHide .o-navBar__creator[data-v-1339646a]{visibility:hidden;transition:max-height .3s ease,opacity 0s .3s,visibility 0s .3s}.o-navBar__creator[data-v-1339646a]{position:absolute;top:64px;left:0;width:100%;max-height:0;visibility:hidden;opacity:0}@media only screen and (max-width:480px){.o-navBar__creator[data-v-1339646a]{top:48px}} .o-navbarMessage[data-v-6e9284f6]{position:fixed;bottom:0;left:0;z-index:20;display:block;width:100%;padding:0;text-align:center} .p-creator--background[data-v-1069daa1]{background-color:var(--color-background-secondary)} .t-creator[data-v-7a3ab06c]{position:relative;min-height:100vh}.t-creator--background[data-v-7a3ab06c]{background-color:var(--color-background-secondary)}@media only screen and (min-width:769px)and (max-width:940px){.t-creator--background[data-v-7a3ab06c]{background-color:var(--color-background-primary)}}@media only screen and (min-width:481px)and (max-width:768px){.t-creator--background[data-v-7a3ab06c]{background-color:var(--color-background-primary)}}.t-creator__actionItemsFieldForPc[data-v-7a3ab06c]{display:flex;align-items:center}@media only screen and (max-width:768px){.t-creator__actionItemsFieldForPc[data-v-7a3ab06c]{display:none}}.t-creator__actionItemsFieldForSmartphone[data-v-7a3ab06c]{display:flex;align-items:center;justify-content:flex-end;margin:16px}@media only screen and (min-width:769px){.t-creator__actionItemsFieldForSmartphone[data-v-7a3ab06c]{display:none}} .loading[data-v-7f26520d]{display:flex;align-items:center;width:620px;min-height:60vh;padding:48px 0;margin:0 auto}@media only screen and (max-width:768px){.loading[data-v-7f26520d]{width:auto}} .o-cautionBar__title[data-v-ec3f6504]{font-weight:700}.o-cautionBar__onlyVisibleToYou[data-v-ec3f6504]{display:flex;align-items:center;justify-content:center;margin-bottom:8px}.o-cautionBar__onlyVisibleToYouIcon[data-v-ec3f6504]{margin-right:4px} .p-article[data-v-8a71fdf2]{position:relative}.p-article__body[data-v-8a71fdf2]{width:620px;margin-right:auto;margin-left:auto}@media only screen and (max-width:768px){.p-article__body[data-v-8a71fdf2]{width:auto}}@media print{.p-article__body[data-v-8a71fdf2]{width:640px}}.p-article__gradient[data-v-8a71fdf2]{background:linear-gradient(0deg,var(--color-background-primary) 0,var(--color-background-primary) 5%,transparent)}.p-article__content[data-v-8a71fdf2]{margin-top:48px}@media only screen and (max-width:768px){.p-article__content[data-v-8a71fdf2]{margin-top:0}}.p-article__paywall[data-v-8a71fdf2]{margin-bottom:48px}@media only screen and (max-width:480px){.p-article__paywall[data-v-8a71fdf2]{margin-bottom:32px}}@media print{.p-article__paywall[data-v-8a71fdf2]{display:none}}.p-article__contest[data-v-8a71fdf2]{margin-top:48px;margin-bottom:16px}@media only screen and (min-width:481px)and (max-width:768px){.p-article__contest[data-v-8a71fdf2]{margin-right:40px;margin-left:40px}}@media only screen and (max-width:480px){.p-article__contest[data-v-8a71fdf2]{margin-top:32px;margin-right:16px;margin-left:16px}}@media print{.p-article__contest[data-v-8a71fdf2]{display:none}}.p-article__hashtags[data-v-8a71fdf2]{margin-top:16px;margin-bottom:48px}@media only screen and (min-width:481px)and (max-width:768px){.p-article__hashtags[data-v-8a71fdf2]{margin-right:40px;margin-left:40px}}@media only screen and (max-width:480px){.p-article__hashtags[data-v-8a71fdf2]{margin-right:16px;margin-bottom:32px;margin-left:16px}}@media print{.p-article__hashtags[data-v-8a71fdf2]{display:none}}.p-article__review[data-v-8a71fdf2]{position:relative;z-index:1;margin-top:16px;margin-bottom:16px}@media only screen and (max-width:768px){.p-article__review[data-v-8a71fdf2]{margin-right:16px;margin-left:16px}}@media print{.p-article__review[data-v-8a71fdf2]{display:none}}.p-article__rating[data-v-8a71fdf2]{position:relative;z-index:0;margin-top:1.5rem;margin-bottom:1.5rem}@media only screen and (max-width:768px){.p-article__rating[data-v-8a71fdf2]{margin-right:1rem;margin-left:1rem}}@media print{.p-article__rating[data-v-8a71fdf2]{display:none}}.p-article__support[data-v-8a71fdf2]{position:relative;z-index:0;margin-top:16px;margin-bottom:32px}@media only screen and (max-width:480px){.p-article__support[data-v-8a71fdf2]{margin-bottom:24px}}@media print{.p-article__support[data-v-8a71fdf2]{display:none}}.p-article__supportAppeal[data-v-8a71fdf2]{margin-top:2rem}.p-article__action[data-v-8a71fdf2]{position:relative;margin-top:32px;margin-bottom:2rem}@media only screen and (max-width:480px){.p-article__action[data-v-8a71fdf2]{margin-top:24px}}@media print{.p-article__action[data-v-8a71fdf2]{display:none}}.p-article__afterGuestLikingOnboarding[data-v-8a71fdf2]{height:0;overflow:hidden;transition-duration:.25s;transition-property:height}@media only screen and (min-width:481px)and (max-width:768px){.p-article__afterGuestLikingOnboarding[data-v-8a71fdf2]{margin:0 16px}}.p-article__creator[data-v-8a71fdf2]{position:relative;z-index:0;margin-top:12px;margin-bottom:16px}@media print{.p-article__creator[data-v-8a71fdf2]{display:none}}.p-article__extraItemSection[data-v-8a71fdf2]{width:620px;padding-top:16px;margin-right:auto;margin-left:auto;border-top:1px solid var(--color-border-default)}.p-article__extraItemSection[data-v-8a71fdf2]:last-child{border-bottom:1px solid var(--color-border-default)}@media only screen and (max-width:768px){.p-article__extraItemSection[data-v-8a71fdf2]{width:auto}}.p-article__extraItemSection[data-v-8a71fdf2]:empty{display:none}@media print{.p-article__extraItemSection[data-v-8a71fdf2]{display:none}}.p-article__extraRecommendedSection[data-v-8a71fdf2]{width:620px;padding-top:16px;margin-right:auto;margin-left:auto}@media only screen and (max-width:768px){.p-article__extraRecommendedSection[data-v-8a71fdf2]{width:auto}}.p-article__extraRecommendedSection[data-v-8a71fdf2]:empty{display:none}@media print{.p-article__extraRecommendedSection[data-v-8a71fdf2],.p-article__share[data-v-8a71fdf2]{display:none}}.p-article__sideCreatorInfo[data-v-8a71fdf2]{position:fixed;left:0;transition:top .3s ease}@media screen and (max-width:1124px){.p-article__sideCreatorInfo[data-v-8a71fdf2]{display:none}}@media print{.p-article__sideCreatorInfo[data-v-8a71fdf2]{display:none}}.p-article__sideShareBooster[data-v-8a71fdf2]{position:fixed;right:0;bottom:0}@media screen and (max-width:1124px){.p-article__sideShareBooster[data-v-8a71fdf2]{display:none}}@media print{.p-article__sideShareBooster[data-v-8a71fdf2]{display:none}}@media screen and (min-width:1125px){.p-article__shareBooster[data-v-8a71fdf2]{display:none}}@media print{.p-article__shareBooster[data-v-8a71fdf2]{display:none}} .o-noteDetailStatusBar__title[data-v-7f5e5b1a]{font-weight:700}.o-noteDetailStatusBar__copy[data-v-7f5e5b1a]{margin-right:8px}.o-noteDetailStatusBar__copy[data-v-7f5e5b1a]:hover{color:inherit}.o-noteDetailStatusBar__copyButtonsWrapper[data-v-7f5e5b1a]{display:flex;align-items:center;justify-content:center}.o-noteDetailStatusBar__copyButtonsWrapper[data-v-7f5e5b1a]:not(:last-child){margin-bottom:8px}.o-noteDetailStatusBar__copyButton[data-v-7f5e5b1a]:not(:first-child){margin-left:8px}.o-noteDetailStatusBar__reservationDate[data-v-7f5e5b1a]{margin-bottom:8px}.o-noteDetailStatusBar__emphasized[data-v-7f5e5b1a]{padding:4px 8px;margin:0 4px;font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-invert);word-break:break-all;background-color:var(--color-blackAlpha-50);border-radius:4px} @media print{.o-articleTopNotices[data-v-37cf15c7]{display:none}}.o-articleTopNotices__message[data-v-37cf15c7]{margin-top:16px}@media only screen and (max-width:768px){.o-articleTopNotices__message[data-v-37cf15c7]{margin:16px}}.o-articleTopNotices__spoilerImage[data-v-37cf15c7]{width:70px}@media only screen and (max-width:480px){.o-articleTopNotices__spoilerImage[data-v-37cf15c7]{width:56px}} .a-button{display:inline-block;display:inline-flex;min-height:40px;padding:0 16px;margin:0;font-weight:700;line-height:1;color:var(--color-text-secondary);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:top;touch-action:manipulation;cursor:pointer;background:var(--color-surface-normal);border:none;border-radius:4px;-webkit-appearance:none;appearance:none}.a-button,.a-button .a-button__inner{align-items:center;justify-content:center}.a-button .a-button__inner{position:relative;display:flex;font-size:var(--font-size-sm)}.a-button[data-type=none]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.a-button[data-type=none]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=none]:hover{color:var(--color-text-primary)}}.a-button[data-type=disabled]{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-type=disabled]:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button[data-type=basic]{color:var(--color-text-primary);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=basic]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=basic]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=primary]{color:var(--color-text-invert);background-color:var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=primary]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=primary]:hover{background-color:var(--color-custom-accent-reaction)}}.a-button[data-type=secondary]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=secondary]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=secondary]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=offerSecondary]{color:var(--color-text-offer);border:1px solid var(--color-border-offer)}.a-button[data-type=danger]{color:var(--color-text-invert);background-color:var(--color-surface-danger)}@media only screen and (min-width:769px){.a-button[data-type=danger]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=danger]:hover{background-color:var(--color-surface-danger-reaction)}}.a-button[data-type=dangerSecondary]{color:var(--color-text-danger);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=dangerSecondary]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=dangerSecondary]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=twitter]{color:var(--color-text-invert);background-color:var(--color-social-twitter)}@media only screen and (min-width:769px){.a-button[data-type=twitter]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=twitter]:hover{background-color:var(--color-social-twitter-reaction)}}.a-button[data-type=facebook]{color:var(--color-text-invert);background-color:var(--color-social-facebook)}@media only screen and (min-width:769px){.a-button[data-type=facebook]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=facebook]:hover{background-color:var(--color-social-facebook-reaction)}}.a-button[data-type=floating]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent);border-radius:9999px}@media only screen and (min-width:769px){.a-button[data-type=floating]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=floating]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=primaryNext]{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-type=secondaryNext]{color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.a-button[data-size=small]{min-height:32px}@media only screen and (max-width:480px){.a-button[data-size=small]{padding-right:12px;padding-left:12px}}.a-button[data-size=small] .a-button__inner{font-size:var(--font-size-xs)}.a-button[data-size=large]{min-height:48px}.a-button[data-size=large] .a-button__inner{font-size:var(--font-size-base)}.a-button[data-width=fit]{width:100%}.a-button[data-width=square]{width:32px}.a-button[data-disable-focus=false]:active,.a-button[data-disable-focus=false]:hover,.a-button[data-disable-focus=true]:focus{outline:none}.a-button:disabled{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button:disabled:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button--icon{padding-right:0;padding-left:0}.a-button--icon .a-button__icon{margin-right:0} .c-button{visibility:hidden} .note-common-styles__textnote-body{overflow:hidden;font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro",HGSMinchoE,"Yu Mincho",YuMincho,"MS PMincho",serif;color:var(--color-text-primary);pointer-events:auto}[class$=device_windows] .note-common-styles__textnote-body,[class$=device_windows] .note-common-styles__textnote-body .note-editor-placeholder:after{font-family:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif}[class$=font_sansserif] .note-common-styles__textnote-body,[class$=font_sansserif] .note-common-styles__textnote-body .note-editor-placeholder:after{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif}@media only screen and (min-width:481px)and (max-width:768px){.note-common-styles__textnote-body{padding-right:40px;padding-left:40px}}@media only screen and (max-width:480px){.note-common-styles__textnote-body{padding-right:16px;padding-left:16px}}.note-common-styles__textnote-body b,.note-common-styles__textnote-body strong{font-weight:700}.note-common-styles__textnote-body pre,.note-common-styles__textnote-body pre[data-name=preCode]{margin-top:36px;margin-bottom:36px;font-family:SFMono-Regular,Consolas,Menlo,Courier,monospace;font-size:var(--font-size-xs);line-height:1.125rem;color:var(--color-text-invert);white-space:pre-wrap;background-color:var(--color-surface-invert)}@media only screen and (max-width:480px){.note-common-styles__textnote-body pre,.note-common-styles__textnote-body pre[data-name=preCode]{margin:32px -16px}}.note-common-styles__textnote-body code,.note-common-styles__textnote-body code[data-name=code]{display:block;padding:36px;overflow-x:auto;font-family:SFMono-Regular,Consolas,Menlo,Courier,monospace;font-size:var(--font-size-xs);line-height:1.125rem;color:var(--color-text-invert);word-wrap:normal;white-space:pre;background-color:initial;-webkit-overflow-scrolling:touch}@media only screen and (max-width:480px){.note-common-styles__textnote-body code,.note-common-styles__textnote-body code[data-name=code]{padding:24px}.note-common-styles__textnote-body code::-webkit-scrollbar,.note-common-styles__textnote-body code[data-name=code]::-webkit-scrollbar{display:none}}.note-common-styles__textnote-body>ol,.note-common-styles__textnote-body>ul,.note-common-styles__textnote-body blockquote,.note-common-styles__textnote-body figure,.note-common-styles__textnote-body h2,.note-common-styles__textnote-body h3,.note-common-styles__textnote-body hr,.note-common-styles__textnote-body p{margin-top:36px;margin-bottom:36px}@media only screen and (max-width:480px){.note-common-styles__textnote-body>ol,.note-common-styles__textnote-body>ul,.note-common-styles__textnote-body blockquote,.note-common-styles__textnote-body figure,.note-common-styles__textnote-body h2,.note-common-styles__textnote-body h3,.note-common-styles__textnote-body hr,.note-common-styles__textnote-body p{margin-top:30px;margin-bottom:30px}}.note-common-styles__textnote-body>.code-block-container:last-child pre,.note-common-styles__textnote-body>blockquote:last-child,.note-common-styles__textnote-body>figure:last-child,.note-common-styles__textnote-body>h2:last-child,.note-common-styles__textnote-body>h3:last-child,.note-common-styles__textnote-body>hr:last-child,.note-common-styles__textnote-body>ol:last-child,.note-common-styles__textnote-body>p:last-child,.note-common-styles__textnote-body>ul:last-child{margin-bottom:0}.note-common-styles__textnote-body a{text-decoration:underline;cursor:pointer}@media only screen and (min-width:769px){.note-common-styles__textnote-body a:hover{color:var(--color-text-primary);text-decoration:none}}.note-common-styles__textnote-body img{display:block;max-width:100%;height:auto!important;margin:0 auto;text-align:center;cursor:pointer;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body img.is-slide{cursor:zoom-in}.note-common-styles__textnote-body img.lazyload{width:1000px;height:100px;object-fit:cover;border-radius:8px}.note-common-styles__textnote-body figure>a:has(img){display:table;margin:0 auto}.note-common-styles__textnote-body figcaption{display:block;margin-top:16px;font-size:var(--font-size-sm);text-align:center}.note-common-styles__textnote-body figcaption:empty{margin-top:0}.note-common-styles__textnote-body figure[data-align=right] a,.note-common-styles__textnote-body figure[data-align=right] img{margin:0 0 0 auto}.note-common-styles__textnote-body figure[data-align=left] a,.note-common-styles__textnote-body figure[data-align=left] img{margin:0 auto 0 0}.note-common-styles__textnote-body h2,.note-common-styles__textnote-body h3{margin-bottom:-18px;font-weight:700;font-feature-settings:"palt" 1;line-height:2.25rem;letter-spacing:.04em}@media only screen and (max-width:480px){.note-common-styles__textnote-body h2,.note-common-styles__textnote-body h3{margin-bottom:-15px;line-height:1.875rem}}.note-common-styles__textnote-body h2:last-child,.note-common-styles__textnote-body h3:last-child{margin-bottom:0}.note-common-styles__textnote-body h2{margin-top:54px;font-size:var(--font-size-2xl)}@media only screen and (max-width:480px){.note-common-styles__textnote-body h2{margin-top:45px;font-size:var(--font-size-xl)}}.note-common-styles__textnote-body h3{margin-top:36px;font-size:var(--font-size-xl)}@media only screen and (max-width:480px){.note-common-styles__textnote-body h3{margin-top:30px;font-size:var(--font-size-lg)}}.note-common-styles__textnote-body h2+h3{margin-top:54px}@media only screen and (max-width:480px){.note-common-styles__textnote-body h2+h3{margin-top:45px}}.note-common-styles__textnote-body p,.note-common-styles__textnote-body ul li{font-size:var(--font-size-lg);line-height:2.25rem}@media only screen and (max-width:480px){.note-common-styles__textnote-body p,.note-common-styles__textnote-body ul li{font-size:var(--font-size-base)}.note-common-styles__textnote-body ul li{line-height:1.875rem}.note-common-styles__textnote-body p{line-height:2rem}}.note-common-styles__textnote-body blockquote,.note-common-styles__textnote-body figure blockquote{padding:25px 36px;font-size:var(--font-size-base);line-height:2.25rem;background-color:var(--color-background-secondary)}@media only screen and (max-width:480px){.note-common-styles__textnote-body blockquote,.note-common-styles__textnote-body figure blockquote{padding:18px 24px;font-size:var(--font-size-sm);line-height:1.875rem}}.note-common-styles__textnote-body blockquote>*,.note-common-styles__textnote-body figure blockquote>*{margin-top:0;margin-bottom:0;font-size:var(--font-size-base)}@media only screen and (max-width:480px){.note-common-styles__textnote-body blockquote>*,.note-common-styles__textnote-body figure blockquote>*{font-size:var(--font-size-sm)}}.note-common-styles__textnote-body blockquote+figcaption,.note-common-styles__textnote-body figure blockquote+figcaption{text-align:right}.note-common-styles__textnote-body figure blockquote{margin:0}.note-common-styles__textnote-body ol,.note-common-styles__textnote-body ul{padding-left:24px}.note-common-styles__textnote-body ol li,.note-common-styles__textnote-body ul li{margin-top:9px;margin-bottom:9px;overflow:initial}@media only screen and (max-width:480px){.note-common-styles__textnote-body ol li,.note-common-styles__textnote-body ul li{margin-top:7px;margin-bottom:7px}}.note-common-styles__textnote-body ol li p,.note-common-styles__textnote-body ul li p{margin:0 auto}.note-common-styles__textnote-body ul>li{list-style-type:disc}.note-common-styles__textnote-body ol{counter-reset:num 0}.note-common-styles__textnote-body ol>li{list-style-type:none;counter-increment:num 1}.note-common-styles__textnote-body ol>li>p:before{padding-right:4px;margin-left:-20px;content:counter(num) ".";speak:none}.note-common-styles__textnote-body hr{border:none;border-bottom:1px solid var(--color-border-strong)}.note-common-styles__textnote-body ruby rt{color:var(--color-text-secondary)}@media print{.note-common-styles__textnote-body p,.note-common-styles__textnote-body ul li{font-size:var(--font-size-sm);line-height:1.3125rem}.note-common-styles__textnote-body blockquote{font-size:var(--font-size-sm)}.note-common-styles__textnote-body img{max-width:320px;max-height:400px;object-fit:contain}.note-common-styles__textnote-body figcaption{font-size:.625rem}}.note-common-styles__textnote-body [embedded-service=alu]{max-width:500px;margin-right:auto;margin-left:auto}.note-common-styles__textnote-body .fude-iframe-ratio-widget__wrap{position:relative;width:100%;height:0;overflow:hidden;border-radius:4px}.note-common-styles__textnote-body .fude-iframe-ratio-widget__inner{position:static;left:auto;max-width:none;height:auto;padding-top:0;padding-bottom:0}.note-common-styles__textnote-body .fude-iframe-ratio-widget__iframe{position:absolute;top:0;left:0;display:block;width:100%;height:100%}.note-common-styles__textnote-body .fude-iframe-ratio-widget__domain{text-align:right}.note-common-styles__textnote-body .fude-iframe-ratio-widget__link{display:inline-block;padding-top:8px;font-size:var(--font-size-xs);color:var(--color-text-secondary);text-decoration:none}.note-common-styles__textnote-body [embedded-service=apple-music]{overflow-x:auto;-webkit-overflow-scrolling:touch}.note-common-styles__textnote-body [embedded-service=apple-music]::-webkit-scrollbar{display:none}.note-common-styles__textnote-body [embedded-service=attachment]{border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.note-common-styles__textnote-body [embedded-service=attachment]:hover{border:1px solid var(--color-grayAlpha-300);transition:border .2s cubic-bezier(1,0,0,1)}}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__link{display:flex;align-items:center;padding:16px;text-decoration:none;cursor:pointer}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__link{flex-direction:column}}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__info{display:flex;flex-grow:1;align-items:center;padding-right:16px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__info{width:100%;padding-right:0}}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__icon{padding-right:16px;color:var(--color-text-clickable-icon)}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__data{flex-grow:1}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__filename{display:block;margin-bottom:8px;font-size:var(--font-size-base);font-weight:700;word-break:break-all}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__loading{padding:40px 16px 16px;font-size:var(--font-size-sm);line-height:1;color:var(--color-text-secondary);text-align:center}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__loadingLabel{padding-top:24px;background-image:url(https://assets.st-note.com/poc-image/manual/production/loading_128x128.gif);background-repeat:no-repeat;background-position:50% 10%;background-size:32px}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__filesize{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__note{font-size:var(--font-size-xs);color:var(--color-custom-accent);text-decoration:none}@media only screen and (min-width:769px){.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__note:hover{color:var(--color-custom-accent-reaction)}}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__download{width:100%;padding-top:16px}}.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__download .a-icon{margin-right:8px}.note-common-styles__textnote-body [embedded-service=external-article] a{display:flex;flex:1;flex-direction:column;padding:24px;text-decoration:none}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] a{padding:16px}}.note-common-styles__textnote-body [embedded-service=external-article] a:first-child{width:100%}.note-common-styles__textnote-body [embedded-service=external-article] a:nth-child(2){flex:0;min-width:220px;padding:0;background-position:50%;background-size:cover;border-left:1px solid var(--color-border-weak)}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] a:nth-child(2){min-width:120px}}.note-common-styles__textnote-body [embedded-service=external-article] strong{display:block;margin-bottom:8px;font-size:var(--font-size-base);font-weight:700;word-break:break-all}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] strong{font-size:var(--font-size-sm)}}.note-common-styles__textnote-body [embedded-service=external-article] em{display:block;margin-bottom:4px;font-size:var(--font-size-xs);line-height:1.5;color:var(--color-text-secondary)}.note-common-styles__textnote-body [embedded-service=external-article] em:nth-child(3){margin-bottom:0;color:var(--color-text-primary)}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget{display:table;width:100%;border:1px solid var(--color-border-default);border-radius:4px}@media only screen and (min-width:769px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget:hover{border:1px solid var(--color-grayAlpha-300);transition:border .2s cubic-bezier(1,0,0,1)}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget>a{display:table-cell;padding:16px;vertical-align:middle}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-title{max-height:2.8em;font-size:var(--font-size-sm)}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-description{display:-webkit-box;max-height:3em;overflow:hidden;color:var(--color-text-secondary);word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-image{width:225px;height:150px;vertical-align:middle;background-repeat:no-repeat;background-position:50%;background-size:cover;border-left:1px solid var(--color-border-default);border-radius:0 3px 3px 0}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-image{width:120px;height:120px}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping{display:flex;flex-direction:column}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping>a:first-child{order:2}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image{display:flex;width:225px;height:225px;padding:16px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image{order:1;width:100%;height:190px;min-height:190px;padding:16px 16px 0;border:none}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-disclaimer{text-decoration:underline}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-productImage{display:block;flex-grow:1;width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:contain}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-price{display:flex;align-items:flex-end;justify-content:flex-start;margin-top:16px;margin-bottom:16px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-price{display:block;margin-top:8px;margin-bottom:8px}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-button .a-button{padding:0 16px}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-button .a-button__inner{margin-top:8px;margin-bottom:8px;font-size:var(--font-size-xs);white-space:normal}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-button .a-button[data-size=small]{min-height:32px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-button .a-button[data-size=small]{padding-right:12px;padding-left:12px}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-regularprice,.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-saleprice{margin-right:0;margin-bottom:0;margin-left:0;font-size:var(--font-size-base);font-weight:700;line-height:1;color:var(--color-text-primary)}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-saleprice+.external-article-widget-regularprice{padding-left:8px;font-size:var(--font-size-xs);font-weight:400;color:var(--color-text-secondary);text-decoration:line-through}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-currency{padding-left:2px;font-size:var(--font-size-xs)}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-update{margin-left:8px;font-size:var(--font-size-xs);line-height:1;color:var(--color-text-secondary)}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-update{display:block;margin-top:4px;margin-left:0}}.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-url+.external-article-widget-button{margin-top:16px}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget{width:100%;max-width:500px;margin-right:auto;margin-left:auto;overflow:hidden;border:1px solid var(--color-border-default);border-radius:4px}@media only screen and (min-width:769px){.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget:hover{border:1px solid var(--color-grayAlpha-300);transition:border .2s cubic-bezier(1,0,0,1)}}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__link{display:block!important;width:100%;padding:0!important}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__header{position:relative;width:100%;height:0;padding-bottom:52.3%;overflow:hidden}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__cover{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__img{width:100%!important;height:100%!important;object-fit:cover;border:none}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__body{display:block;padding:16px}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__title{display:block;display:-webkit-box;margin-bottom:8px;overflow:hidden;font-size:var(--font-size-base);font-weight:700;font-feature-settings:"palt" 1;line-height:1.5;letter-spacing:.04em;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__title{font-size:var(--font-size-sm)}}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__description{display:block;display:-webkit-box;margin-bottom:8px;overflow:hidden;font-size:var(--font-size-xs);font-style:normal;line-height:1.5;color:var(--color-text-secondary);word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2}.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__url{display:block;font-size:var(--font-size-xs);font-style:normal;line-height:1.5}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__link{display:grid;grid-template-areas:"detail aside" "status aside";grid-template-rows:1fr auto;grid-template-columns:1fr 190px;padding:16px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__link{grid-template-areas:"detail aside" "status status";grid-template-rows:1fr auto;grid-template-columns:1fr 140px}}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__link{grid-template-columns:1fr 132px}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__detail{display:flex;flex-direction:column;grid-area:detail;justify-content:center;padding-right:16px}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__domain{margin-bottom:4px;font-size:var(--font-size-xs);color:var(--color-text-secondary)}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__title{display:-webkit-box;margin-bottom:8px;overflow:hidden;font-size:var(--font-size-base);font-weight:700;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__title{font-size:var(--font-size-sm);-webkit-line-clamp:3}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__property{display:flex}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__property{display:block}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__owner{display:-webkit-box;margin-right:16px;overflow:hidden;font-size:var(--font-size-xs);-webkit-box-orient:vertical;-webkit-line-clamp:1}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__owner{display:block;margin-right:0;word-break:break-all}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category{display:flex;align-items:center;font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category{margin-top:4px;white-space:normal}}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category{font-size:var(--font-size-xs)}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__categoryIcon{margin-right:4px}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__categoryIcon{margin-right:0}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__aside{grid-area:aside}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__thumbImg{width:100%;height:auto;margin-bottom:16px;border-radius:4px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__thumbImg{margin-bottom:8px}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__status{grid-area:status;padding:8px 16px 0 0}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__status{padding:16px 0 0}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusList{display:flex;align-items:center}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusListItem{margin-top:0;margin-right:16px;margin-bottom:0;line-height:1}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusListItem--timeleft{margin-right:0;margin-left:auto}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__currentAmount{display:flex;align-items:center;margin-bottom:0;font-size:var(--font-size-sm);line-height:1;color:var(--color-text-primary)}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__currentAmount{font-size:var(--font-size-xs)}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supporters{display:flex;align-items:center;font-size:var(--font-size-sm)}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supporters{font-size:var(--font-size-xs)}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supportersIcon{margin-right:4px}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supportersIcon{margin-right:0}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleft{display:flex;align-items:center;font-size:var(--font-size-xs);color:var(--color-text-secondary)}@media only screen and (max-width:360px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleft{font-size:var(--font-size-xs)}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleftIcon{margin-right:4px}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate{position:relative;margin-top:8px}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate:after{position:absolute;top:2px;left:4px;z-index:1;font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-invert);content:attr(title)}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate{height:16px;margin-right:-16px;margin-bottom:-14px;margin-left:-16px}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]{width:100%;height:16px;overflow:hidden;-webkit-appearance:none;appearance:none;-moz-appearance:none;border:none;border-radius:4px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]{border-radius:0 0 3px 3px}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar{overflow:hidden;-webkit-appearance:none;appearance:none;background-color:var(--color-border-weak);border-radius:4px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar{border-radius:0 0 3px 3px}}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-value{-webkit-appearance:none;appearance:none;background-color:var(--color-border-primary)}.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-moz-progress-bar{-moz-appearance:none;background-color:var(--color-border-primary)}.note-common-styles__textnote-body .fb-post{display:block;width:100%;max-width:350px;margin:0 auto;overflow-x:auto;overflow-y:hidden}.note-common-styles__textnote-body [embedded-service=gist]{overflow-x:auto;-webkit-overflow-scrolling:touch}.note-common-styles__textnote-body [embedded-service=gist]::-webkit-scrollbar{display:none}.note-common-styles__textnote-body [embedded-service=googleform]{overflow-x:auto;-webkit-overflow-scrolling:touch}.note-common-styles__textnote-body [embedded-service=googleform]::-webkit-scrollbar{display:none}.note-common-styles__textnote-body [embedded-service=googlemap]{position:relative;width:100%!important;height:0;padding-bottom:75%;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body [embedded-service=googlemap] iframe{position:absolute;top:0;left:0;width:100%!important;height:100%}.note-common-styles__textnote-body [embedded-service=hr],.note-common-styles__textnote-body [embedded-service=wantedly]{border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.note-common-styles__textnote-body [embedded-service=hr]:hover,.note-common-styles__textnote-body [embedded-service=wantedly]:hover{border:1px solid var(--color-grayAlpha-300);transition:border .2s cubic-bezier(1,0,0,1)}}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget{width:100%;text-align:left}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__link,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__link{display:flex;width:100%;padding:16px;overflow:visible;text-decoration:none}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__info,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__info{display:flex;flex:1;flex-direction:column;justify-content:center}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__url,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__url{position:relative;display:block;width:100%;margin-bottom:8px;font-size:.625rem;font-style:normal;line-height:1;color:var(--color-text-secondary);text-indent:48px}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__url:before,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__url:before{position:absolute;top:-1px;left:0;width:40px;height:14px;padding:2px 4px;font-size:.625rem;font-weight:700;line-height:1;color:var(--color-text-invert);text-align:center;text-indent:0;white-space:nowrap;content:"求人";background-color:var(--color-custom-accent);border-radius:7px}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__title,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__title{display:-webkit-box;width:100%;max-height:3em;padding-right:16px;overflow:hidden;font-size:var(--font-size-lg);font-weight:700;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__title,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__title{font-size:var(--font-size-sm)}}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__requirements,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__requirements{width:100%;padding-top:8px;padding-right:16px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__requirements,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__requirements{padding-top:8px}}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__companyName,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__companyName{display:block;margin-bottom:8px;font-size:.75rem;font-weight:700}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__companyName:last-child,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__companyName:last-child{margin-bottom:0}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__location,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__location{display:-webkit-box;margin-bottom:8px;overflow:hidden;font-size:var(--font-size-xs);-webkit-box-orient:vertical;-webkit-line-clamp:2}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__location:last-child,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__location:last-child{margin-bottom:0}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__occupations,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__occupations{display:block;margin-bottom:4px;font-size:.75rem;color:var(--color-text-secondary)}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__occupations:last-child,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__occupations:last-child{margin-bottom:0}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__employmentSystem,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__employmentSystem{display:block;font-size:.75rem;color:var(--color-text-secondary)}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__aside,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__aside{display:flex;flex-direction:column;justify-content:center;width:190px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__aside,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__aside{width:120px}}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__thumbnailImg,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__thumbnailImg{width:100%;height:100px!important;object-fit:cover;object-position:center center;border:none;border-radius:4px}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__thumbnailImg,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__thumbnailImg{height:64px!important}}.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__button,.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__button{width:100%;margin-top:16px}.note-common-styles__textnote-body [embedded-service=instagram]{width:100%;max-width:500px;margin-right:auto;margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}.note-common-styles__textnote-body [embedded-service=instagram]::-webkit-scrollbar{display:none}.note-common-styles__textnote-body [embedded-service=instagram] iframe[src$="/embed/"]{display:block;width:100%!important;max-width:500px!important;height:590px;padding:8px;margin:0 auto!important;overflow:hidden;border:1px solid var(--color-border-weak);border-radius:4px}.note-common-styles__textnote-body [embedded-service=instagram] .instagram-media,.note-common-styles__textnote-body [embedded-service=instagram] .instagram-media-registered{position:unset!important;width:100%!important;max-width:500px!important;margin:0 auto!important}.note-common-styles__textnote-body [embedded-service=itunes]{overflow-x:auto;-webkit-overflow-scrolling:touch}.note-common-styles__textnote-body [embedded-service=itunes]::-webkit-scrollbar{display:none}.note-common-styles__textnote-body [embedded-service=niconico]{position:relative;width:100%!important;height:0;padding-bottom:56.25%;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body [embedded-service=niconico] iframe{position:absolute;top:0;left:0;width:100%!important;height:100%}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=note-slide]{position:relative;height:auto}.note-common-styles__textnote-body [embedded-service=note-slide]:after{display:block;padding-top:calc(75% + 92px);content:""}}.note-common-styles__textnote-body [embedded-service=note-slide] iframe{height:455px;border:none}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=note-slide] iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}}.note-common-styles__textnote-body [embedded-service=note]{width:100%;max-width:none;margin-right:auto;margin-left:auto}.note-common-styles__textnote-body [embedded-service=note] iframe{display:block!important;width:100%!important;max-width:none!important;margin:0 auto!important}.note-common-styles__textnote-body [embedded-service=oembed]{border-radius:0}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget{margin:0 auto}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__wrap{position:relative;width:100%;height:0;overflow:hidden}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__inner{position:static;left:auto;max-width:none;height:auto;padding-top:0;padding-bottom:0}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__iframe{position:absolute;top:0;left:0;display:block;width:100%;height:100%}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__domain{text-align:right}.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__link{display:inline-block;padding-top:8px;font-size:var(--font-size-xs);color:var(--color-text-secondary);text-decoration:none}.note-common-styles__textnote-body [embedded-service=slideshare]{width:100%}.note-common-styles__textnote-body [embedded-service=slideshare] iframe{overflow:hidden;vertical-align:top;border-radius:4px}.note-common-styles__textnote-body [embedded-service=soundcloud]{width:100%!important;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body [embedded-service=speakerdeck]{width:100%}.note-common-styles__textnote-body [embedded-service=speakerdeck] iframe{overflow:hidden;vertical-align:top;border-radius:4px}.note-common-styles__textnote-body [embedded-service=spotify] div{max-width:none!important}.note-common-styles__textnote-body [embedded-service=tiktok-web]{width:100%;max-width:340px;margin-right:auto;margin-left:auto}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok-web]{position:relative;width:100%;max-width:none}}.note-common-styles__textnote-body [embedded-service=tiktok-web] blockquote{padding:0;margin:0;background-color:initial}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok-web] blockquote{padding:0}}.note-common-styles__textnote-body [embedded-service=tiktok-web] span div{position:static!important;left:auto!important;max-width:none!important;padding-top:0!important;padding-bottom:0!important}.note-common-styles__textnote-body [embedded-service=tiktok-web] iframe{position:relative!important;top:auto!important;left:auto!important;display:block;width:340px!important;margin-right:auto;margin-left:auto}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok-web] iframe{width:100%!important}}.note-common-styles__textnote-body [embedded-service=tiktok]{width:100%;max-width:340px;margin-right:auto;margin-left:auto}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok]{position:relative;width:100%;max-width:none}}.note-common-styles__textnote-body [embedded-service=tiktok] blockquote{padding:0;margin:0;background-color:initial}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok] blockquote{padding:0}}.note-common-styles__textnote-body [embedded-service=tiktok] span div{position:static!important;left:auto!important;max-width:none!important;height:auto!important;padding-top:0!important;padding-bottom:0!important}.note-common-styles__textnote-body [embedded-service=tiktok] iframe{position:relative!important;top:auto!important;left:auto!important;display:block;width:340px!important;margin-right:auto;margin-left:auto}@media only screen and (max-width:480px){.note-common-styles__textnote-body [embedded-service=tiktok] iframe{width:100%!important}}.note-common-styles__textnote-body [embedded-service=twitter]{width:100%;max-width:500px;margin-right:auto;margin-left:auto}.note-common-styles__textnote-body [embedded-service=twitter] .twitter-tweet{margin-top:0!important;margin-right:auto;margin-bottom:0!important;margin-left:auto}.note-common-styles__textnote-body [embedded-service=twitterProfile]{width:100%;max-width:500px;margin-right:auto;margin-left:auto}.note-common-styles__textnote-body [embedded-service=vimeo]{position:relative;width:100%!important;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body [embedded-service=vimeo] iframe{position:absolute;top:0;left:0;width:100%!important;height:100%}.note-common-styles__textnote-body [embedded-service=youtube]{position:relative;border:1px solid var(--color-border-weak)}.note-common-styles__textnote-body [embedded-service=youtube] iframe{width:100%!important}.note-common-styles__textnote-body .widget-cover{width:100%!important;cursor:pointer}.note-common-styles__textnote-body .widget-cover>*{pointer-events:none}.note-common-styles__textnote-body .widget-cover:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:"";border:1px solid transparent;border-radius:4px;opacity:0}@media only screen and (min-width:769px){.note-common-styles__textnote-body .widget-cover:hover:before{opacity:1}}.note-common-styles__textnote-body .widget-cover.is-selected:before{border-color:var(--color-custom-accent);opacity:1}.note-common-styles__textnote-body [embedded-service]{position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;border-radius:4px}.note-common-styles__textnote-body [embedded-service] ::selection{background-color:initial} .o-noteContentText__header[data-v-e7ed8ff0]{width:100%;margin-bottom:16px}@media only screen and (min-width:481px)and (max-width:768px){.o-noteContentText__header[data-v-e7ed8ff0]{width:calc(100% - 80px);margin-right:40px;margin-left:40px}}@media only screen and (max-width:480px){.o-noteContentText__header[data-v-e7ed8ff0]{width:calc(100% - 32px);margin-right:16px;margin-left:16px}}@media print{.o-noteContentText__header[data-v-e7ed8ff0]{margin-bottom:0}}.o-noteContentText--device_windows .o-noteContentText__title[data-v-e7ed8ff0]{font-family:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif}.o-noteContentText--font_sansserif .o-noteContentText__title[data-v-e7ed8ff0]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif}.o-noteContentText__title[data-v-e7ed8ff0]{min-height:1em;margin-top:72px;margin-bottom:18px;font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro",HGSMinchoE,"Yu Mincho",YuMincho,"MS PMincho",serif;font-size:var(--font-size-2xl);font-weight:700;line-height:1.5;color:var(--color-text-primary);letter-spacing:.04em;pointer-events:auto;font-feature-settings:"palt" 1}@media only screen and (min-width:481px)and (max-width:768px){.o-noteContentText__title[data-v-e7ed8ff0]{padding-right:40px;padding-left:40px}}@media only screen and (max-width:480px){.o-noteContentText__title[data-v-e7ed8ff0]{padding-right:16px;padding-left:16px;margin-top:30px;margin-bottom:15px;font-size:var(--font-size-xl)}}.o-noteContentText__title[data-v-e7ed8ff0]::placeholder{color:var(--color-text-placeholder)} .o-noteEyecatch[data-v-6cfcce9a]{position:relative}.o-noteEyecatch__image[data-v-6cfcce9a]{width:100%;height:auto;vertical-align:top;cursor:zoom-in}@media print{.o-noteEyecatch__image[data-v-6cfcce9a]{display:block;width:80%;margin:auto}}.o-noteEyecatch__copyright[data-v-6cfcce9a]{margin-top:8px;font-size:var(--font-size-xs);font-style:italic;line-height:1;color:var(--color-text-secondary);text-align:right}@media only screen and (max-width:480px){.o-noteEyecatch__copyright[data-v-6cfcce9a]{margin-right:8px;margin-left:8px}}.o-noteEyecatch__copyrightName[data-v-6cfcce9a]{display:inline-flex;align-items:center;font-weight:700}.o-noteEyecatch__copyrightNameHelp[data-v-6cfcce9a]{margin-left:4px;color:var(--color-text-clickable-icon)}.o-noteEyecatch__delete[data-v-6cfcce9a]{position:absolute;top:16px;right:16px;z-index:2;width:32px;height:32px;padding:8px;color:var(--color-text-invert);cursor:pointer;background-color:var(--color-grayAlpha-200);border-radius:50%}@media only screen and (min-width:769px){.o-noteEyecatch__delete[data-v-6cfcce9a]:hover{background-color:var(--color-blackAlpha-400);transition:background-color .2s cubic-bezier(1,0,0,1)}}.o-noteEyecatch__block[data-v-6cfcce9a]{padding-left:8px;font-style:normal;color:var(--color-text-secondary);text-decoration:underline}@media only screen and (min-width:769px){.o-noteEyecatch__block[data-v-6cfcce9a]:hover{color:var(--color-text-primary)}}.o-noteEyecatch__help[data-v-6cfcce9a]{line-height:16px;color:var(--color-text-clickable-icon)}@media only screen and (min-width:769px){.o-noteEyecatch__help[data-v-6cfcce9a]:hover{color:var(--color-text-secondary)}} .o-noteContentHeader__titleContainer[data-v-caeb130c]{margin-bottom:20px}.o-noteContentHeader__titleContainer--device_windows .o-noteContentHeader__title[data-v-caeb130c]{font-family:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif}.o-noteContentHeader__titleContainer--font_sansserif .o-noteContentHeader__title[data-v-caeb130c]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif}.o-noteContentHeader__title[data-v-caeb130c]{min-height:1em;margin-top:72px;margin-bottom:18px;font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro",HGSMinchoE,"Yu Mincho",YuMincho,"MS PMincho",serif;font-size:var(--font-size-article-title-desktop);font-weight:700;line-height:1.5;color:var(--color-text-primary);letter-spacing:.04em;pointer-events:auto;font-feature-settings:"palt" 1}@media only screen and (max-width:480px){.o-noteContentHeader__title[data-v-caeb130c]{margin-top:30px;margin-bottom:15px;font-size:var(--font-size-xl)}}@media print{.o-noteContentHeader__title[data-v-caeb130c]{margin-top:48px}}.o-noteContentHeader__title[data-v-caeb130c]::placeholder{color:var(--color-text-placeholder)}.o-noteContentHeader__titleAttachment[data-v-caeb130c]{display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-top:-8px}@media print{.o-noteContentHeader__titleAttachment[data-v-caeb130c]{display:none}}.o-noteContentHeader__creatorInfo[data-v-caeb130c]{position:relative;display:flex;align-items:flex-start;justify-content:space-between;width:100%}.o-noteContentHeader__avatar[data-v-caeb130c]{margin-right:8px}.o-noteContentHeader__info[data-v-caeb130c]{flex:1;font-size:var(--font-size-xs);line-height:1.5}.o-noteContentHeader__followButton[data-v-caeb130c]{margin-left:8px}.o-noteContentHeader__name[data-v-caeb130c]{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.o-noteContentHeader__date[data-v-caeb130c]{color:var(--color-text-secondary)}.o-noteContentHeader__dateSlot[data-v-caeb130c]:after{content:" "}.o-noteContentHeader__action[data-v-caeb130c]{position:relative;font-size:var(--font-size-xs);line-height:1.5;color:var(--color-text-clickable-icon)}@media print{.o-noteContentHeader__action[data-v-caeb130c]{display:none}}.o-noteContentHeader__actionFollow[data-v-caeb130c]{text-decoration:underline}.o-noteContentHeader__actionFollow--following[data-v-caeb130c]{text-decoration:none}.o-noteContentHeader__status[data-v-caeb130c]{display:flex;align-items:center}.o-noteContentHeader__label[data-v-caeb130c],.o-noteContentHeader__price[data-v-caeb130c]{font-size:var(--font-size-sm);font-weight:700;color:var(--color-custom-accent)}.o-noteContentHeader__more[data-v-caeb130c]{margin-left:16px;color:var(--color-text-clickable-icon);cursor:pointer}@media only screen and (min-width:769px){.o-noteContentHeader__more[data-v-caeb130c]{transition:color .2s cubic-bezier(1,0,0,1)}.o-noteContentHeader__more[data-v-caeb130c]:hover{color:var(--color-text-secondary)}}.o-noteContentHeader__share[data-v-caeb130c]{position:relative;display:flex;justify-content:space-between;margin-left:16px}@media print{.o-noteContentHeader__share[data-v-caeb130c]{display:none}}.o-noteContentHeader__item[data-v-caeb130c]{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;line-height:36px;color:var(--color-text-clickable-icon);text-align:center;cursor:pointer}@media only screen and (min-width:769px){.o-noteContentHeader__item[data-v-caeb130c]{transition:all .2s cubic-bezier(1,0,0,1)}.o-noteContentHeader__item[data-v-caeb130c]:hover{color:var(--color-text-secondary)}} .o-noteLikeV3[data-v-5b0bbae8]{position:relative;align-items:center}.o-noteLikeV3[data-v-5b0bbae8],.o-noteLikeV3__iconContainer[data-v-5b0bbae8]{display:inline-flex}.o-noteLikeV3__iconContainer[data-circle-size=medium][data-v-5b0bbae8]{width:40px;height:40px;border:2px solid;border-radius:40px}.o-noteLikeV3__iconContainer[data-circle-size=large][data-v-5b0bbae8],.o-noteLikeV3__iconContainer[data-circle-size=medium][data-v-5b0bbae8]{align-items:center;justify-content:center;color:var(--color-text-like);background-color:var(--color-surface-normal)}.o-noteLikeV3__iconContainer[data-circle-size=large][data-v-5b0bbae8]{width:48px;height:48px;border:2px solid;border-radius:48px}.o-noteLikeV3__iconContainerInner[data-v-5b0bbae8]{position:relative;display:inline-flex}.o-noteLikeV3__iconButton[data-expanded-tap-area=true][data-v-5b0bbae8]{position:relative}.o-noteLikeV3__iconButton[data-expanded-tap-area=true][data-v-5b0bbae8]:before{position:absolute;top:-.5rem;left:-.5rem;display:block;width:2.25rem;height:2.1875rem;content:""}.o-noteLikeV3__icon[data-v-5b0bbae8]{color:var(--color-text-clickable-icon)}.o-noteLikeV3__icon--colorBorder[data-v-5b0bbae8],.o-noteLikeV3__icon--colorBorder[data-v-5b0bbae8]:hover,.o-noteLikeV3__icon.is-active[data-v-5b0bbae8]{color:var(--color-text-like)}.o-noteLikeV3__icon[data-fill=white][data-v-5b0bbae8]{color:var(--color-text-invert)}.o-noteLikeV3__icon[data-fill=textPrimary][data-v-5b0bbae8]{color:var(--color-text-primary)}.o-noteLikeV3__icon[data-fill=textPrimary].is-active[data-v-5b0bbae8]{color:var(--color-text-like)}.o-noteLikeV3__count[data-v-5b0bbae8]{margin-left:8px;line-height:1;cursor:pointer}@media only screen and (min-width:769px){.o-noteLikeV3__count[data-v-5b0bbae8]{transition:color .2s cubic-bezier(1,0,0,1)}.o-noteLikeV3__count[data-v-5b0bbae8]:hover{color:var(--color-text-primary)}}.o-noteLikeV3__count.is-active[data-v-5b0bbae8]{color:var(--color-text-like)}.o-noteLikeV3__count--medium[data-v-5b0bbae8]{font-size:var(--font-size-base)}.o-noteLikeV3__count--mediumSmall[data-v-5b0bbae8]{margin-left:12px;font-size:var(--font-size-base)} @font-face{font-family:"icon";src:url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.a3f303d.eot);src:url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.a3f303d.eot?#iefix) format("eot"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.57fcf14.woff) format("woff"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.13d435e.ttf) format("truetype"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/icon.a54cc76.svg#icon) format("svg");font-display:swap}button.a-icon{cursor:pointer}@media only screen and (min-width:769px){button.a-icon{transition:color .2s cubic-bezier(1,0,0,1)}button.a-icon:hover{color:var(--color-text-secondary)}}.a-icon{position:relative;display:inline-block;width:1em;height:1em;font-family:"icon";font-size:1.5rem;line-height:1;color:inherit;vertical-align:top;touch-action:manipulation;background-color:initial;border:none;border-radius:1em;-webkit-appearance:none;appearance:none}.a-icon:active,.a-icon:hover{outline:none}.a-icon:before{position:absolute;top:0;left:0;font-family:"icon";font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-decoration:none;text-transform:none;vertical-align:middle}.a-icon--size_xsmall{font-size:var(--font-size-xs)}.a-icon--size_inherit{font-size:inherit}.a-icon--size_small{font-size:var(--font-size-base)}.a-icon--size_mediumSmall{font-size:var(--font-size-xl)}.a-icon--size_large{font-size:2rem}.a-icon__like-safe-area{position:absolute;top:50%;left:50%;display:inline-block;border-radius:50%;transform:translate(-50%,-50%)}.a-icon__like-safe-area[data-size=medium]{width:40px;height:40px}.a-icon__like-safe-area[data-size=large]{width:48px;height:48px}.a-icon--border{width:32px;height:32px;padding:7px;border:1px solid var(--color-border-default);border-radius:4px}.a-icon--border:before{top:50%;left:50%;transform:translate(-50%,-50%)}.a-icon--action:before{content:""}.a-icon--add:before{content:""}.a-icon--amazon:before{content:""}.a-icon--animation:before{content:""}.a-icon--announceFill:before{content:""}.a-icon--arrowback:before{content:""}.a-icon--arrowdropdown:before{content:""}.a-icon--arrowforward:before{content:""}.a-icon--arrowright:before{content:""}.a-icon--attachFile:before{content:""}.a-icon--badge:before{content:""}.a-icon--barChart:before{content:""}.a-icon--camera:before{content:""}.a-icon--cameraPlus:before{content:""}.a-icon--check:before{content:""}.a-icon--checkCircle:before{content:""}.a-icon--circle:before{content:""}.a-icon--close:before{content:""}.a-icon--code:before{content:""}.a-icon--comment:before{content:""}.a-icon--commentFill:before{content:""}.a-icon--contest:before{content:""}.a-icon--copy:before{content:""}.a-icon--create:before{content:""}.a-icon--download:before{content:""}.a-icon--drag_handle:before{content:""}.a-icon--editorBold:before{content:""}.a-icon--editorCenter:before{content:""}.a-icon--editorCode:before{content:""}.a-icon--editorEmbed:before{content:""}.a-icon--editorFileUpload:before{content:""}.a-icon--editorImage:before{content:""}.a-icon--editorImageAdd:before{content:""}.a-icon--editorLarge:before{content:""}.a-icon--editorLink:before{content:""}.a-icon--editorMinphoto:before{content:""}.a-icon--editorPc:before{content:""}.a-icon--editorQuotation:before{content:""}.a-icon--editorSmall:before{content:""}.a-icon--editorTitle:before{content:""}.a-icon--editorTrash:before{content:""}.a-icon--expandless:before{content:""}.a-icon--expandmore:before{content:""}.a-icon--eye:before{content:""}.a-icon--facebookFill:before{content:""}.a-icon--fileDownload:before{content:""}.a-icon--firstpage:before{content:""}.a-icon--flagFill:before{content:""}.a-icon--follow:before{content:""}.a-icon--following:before{content:""}.a-icon--gift:before{content:""}.a-icon--hatenaFill:before{content:""}.a-icon--heart:before{content:""}.a-icon--heartFill:before{content:""}.a-icon--help:before{content:""}.a-icon--home:before{content:""}.a-icon--image:before{content:""}.a-icon--info:before{content:""}.a-icon--instagramFill:before{content:""}.a-icon--keyboard:before{content:""}.a-icon--lastpage:before{content:""}.a-icon--lightbulb:before{content:""}.a-icon--lineFill:before{content:""}.a-icon--link:before{content:""}.a-icon--linkFill:before{content:""}.a-icon--lock:before{content:""}.a-icon--magazine:before{content:""}.a-icon--magazineAdd:before{content:""}.a-icon--magazineGrid:before{content:""}.a-icon--magazineList:before{content:""}.a-icon--magazineStream:before{content:""}.a-icon--mail:before{content:""}.a-icon--more:before{content:""}.a-icon--navbefore:before{content:""}.a-icon--navnext:before{content:""}.a-icon--note:before{content:""}.a-icon--noteAdd:before{content:""}.a-icon--notification:before{content:""}.a-icon--pause:before{content:""}.a-icon--person:before{content:""}.a-icon--pin:before{content:""}.a-icon--place:before{content:""}.a-icon--playFill:before{content:""}.a-icon--postNote:before{content:""}.a-icon--public:before{content:""}.a-icon--return:before{content:""}.a-icon--rss:before{content:""}.a-icon--satisfied:before{content:""}.a-icon--search:before{content:""}.a-icon--setting:before{content:""}.a-icon--share:before{content:""}.a-icon--shoppingcart:before{content:""}.a-icon--shoppingcartFill:before{content:""}.a-icon--sort:before{content:""}.a-icon--store:before{content:""}.a-icon--tag:before{content:""}.a-icon--time:before{content:""}.a-icon--topic:before{content:""}.a-icon--twitterFill:before{content:""}.a-icon--undo:before{content:""}.a-icon--view:before{content:""}.a-icon--viewOff:before{content:""}.a-icon--warning:before{content:""}.a-icon--x:before{content:""}.a-icon--yen:before{content:""}.a-icon--yenFill:before{content:""}.a-icon--youtubeFill:before{content:""} .o-winContestBadge__badge[data-v-6f0d67ca]{display:flex;flex-wrap:wrap;align-items:center;margin-right:12px;font-size:var(--font-size-sm);line-height:1;color:var(--color-orange-500)}@media only screen and (min-width:769px){.o-winContestBadge__badge[data-v-6f0d67ca]{cursor:pointer}.o-winContestBadge__badgeIcon[data-v-6f0d67ca]:hover{color:var(--color-orange-600)}} .a-button[data-v-43e40ddc]{display:inline-block;display:inline-flex;min-height:40px;padding:0 16px;margin:0;font-weight:700;line-height:1;color:var(--color-text-secondary);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:top;touch-action:manipulation;cursor:pointer;background:var(--color-surface-normal);border:none;border-radius:4px;-webkit-appearance:none;appearance:none}.a-button[data-v-43e40ddc],.a-button .a-button__inner[data-v-43e40ddc]{align-items:center;justify-content:center}.a-button .a-button__inner[data-v-43e40ddc]{position:relative;display:flex;font-size:var(--font-size-sm)}.a-button[data-type=none][data-v-43e40ddc]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.a-button[data-type=none][data-v-43e40ddc]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=none][data-v-43e40ddc]:hover{color:var(--color-text-primary)}}.a-button[data-type=disabled][data-v-43e40ddc]{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-type=disabled][data-v-43e40ddc]:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button[data-type=basic][data-v-43e40ddc]{color:var(--color-text-primary);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=basic][data-v-43e40ddc]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=basic][data-v-43e40ddc]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=primary][data-v-43e40ddc]{color:var(--color-text-invert);background-color:var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=primary][data-v-43e40ddc]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=primary][data-v-43e40ddc]:hover{background-color:var(--color-custom-accent-reaction)}}.a-button[data-type=secondary][data-v-43e40ddc]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=secondary][data-v-43e40ddc]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=secondary][data-v-43e40ddc]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=offerSecondary][data-v-43e40ddc]{color:var(--color-text-offer);border:1px solid var(--color-border-offer)}.a-button[data-type=danger][data-v-43e40ddc]{color:var(--color-text-invert);background-color:var(--color-surface-danger)}@media only screen and (min-width:769px){.a-button[data-type=danger][data-v-43e40ddc]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=danger][data-v-43e40ddc]:hover{background-color:var(--color-surface-danger-reaction)}}.a-button[data-type=dangerSecondary][data-v-43e40ddc]{color:var(--color-text-danger);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=dangerSecondary][data-v-43e40ddc]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=dangerSecondary][data-v-43e40ddc]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=twitter][data-v-43e40ddc]{color:var(--color-text-invert);background-color:var(--color-social-twitter)}@media only screen and (min-width:769px){.a-button[data-type=twitter][data-v-43e40ddc]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=twitter][data-v-43e40ddc]:hover{background-color:var(--color-social-twitter-reaction)}}.a-button[data-type=facebook][data-v-43e40ddc]{color:var(--color-text-invert);background-color:var(--color-social-facebook)}@media only screen and (min-width:769px){.a-button[data-type=facebook][data-v-43e40ddc]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=facebook][data-v-43e40ddc]:hover{background-color:var(--color-social-facebook-reaction)}}.a-button[data-type=floating][data-v-43e40ddc]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent);border-radius:9999px}@media only screen and (min-width:769px){.a-button[data-type=floating][data-v-43e40ddc]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=floating][data-v-43e40ddc]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=primaryNext][data-v-43e40ddc]{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-type=secondaryNext][data-v-43e40ddc]{color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.a-button[data-size=small][data-v-43e40ddc]{min-height:32px}@media only screen and (max-width:480px){.a-button[data-size=small][data-v-43e40ddc]{padding-right:12px;padding-left:12px}}.a-button[data-size=small] .a-button__inner[data-v-43e40ddc]{font-size:var(--font-size-xs)}.a-button[data-size=large][data-v-43e40ddc]{min-height:48px}.a-button[data-size=large] .a-button__inner[data-v-43e40ddc]{font-size:var(--font-size-base)}.a-button[data-width=fit][data-v-43e40ddc]{width:100%}.a-button[data-width=square][data-v-43e40ddc]{width:32px}.a-button[data-disable-focus=false][data-v-43e40ddc]:active,.a-button[data-disable-focus=false][data-v-43e40ddc]:hover,.a-button[data-disable-focus=true][data-v-43e40ddc]:focus{outline:none}.a-button[data-v-43e40ddc]:disabled{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-v-43e40ddc]:disabled:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button--icon[data-v-43e40ddc]{padding-right:0;padding-left:0}.a-button--icon .a-button__icon[data-v-43e40ddc]{margin-right:0} .a-link[data-v-43e40ddc]{cursor:pointer}.a-link[data-v-43e40ddc]:active,.a-link[data-v-43e40ddc]:hover{outline:none}.a-link.disabled[data-v-43e40ddc]{cursor:default}.a-link.a-link--underline[data-v-43e40ddc]{text-decoration:underline} .m-avatar[data-v-5c1c7fdc]{display:block;overflow:hidden;border-radius:4px}.m-avatar[data-v-5c1c7fdc]:active,.m-avatar[data-v-5c1c7fdc]:hover{outline:none}.m-avatar__image[data-v-5c1c7fdc]{width:100%;max-width:100%;height:auto}.m-avatar--xsmall[data-v-5c1c7fdc]{width:16px;height:16px;border-radius:16px}.m-avatar--smallXsmall[data-v-5c1c7fdc]{width:18px;height:18px;border-radius:18px}.m-avatar--small[data-v-5c1c7fdc]{width:24px;height:24px;border-radius:24px}.m-avatar--medium[data-v-5c1c7fdc]{width:32px;height:32px;border-radius:32px}.m-avatar--large[data-v-5c1c7fdc]{width:56px;height:56px;border-radius:56px}.m-avatar--xlarge[data-v-5c1c7fdc]{width:80px;height:80px;border-radius:80px}.m-avatar--xxlarge[data-v-5c1c7fdc]{width:104px;height:104px;border-radius:104px}.m-avatar--fit[data-v-5c1c7fdc]{width:100%;height:100%;border-radius:100%} .a-image[data-v-50e2377b]{background-color:var(--color-surface-normal)}.a-image.a-image--bg-transparent[data-v-50e2377b]{background-color:initial} .a-button[data-v-76f5188b]{display:inline-block;display:inline-flex;min-height:40px;padding:0 16px;margin:0;font-weight:700;line-height:1;color:var(--color-text-secondary);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:top;touch-action:manipulation;cursor:pointer;background:var(--color-surface-normal);border:none;border-radius:4px;-webkit-appearance:none;appearance:none}.a-button[data-v-76f5188b],.a-button .a-button__inner[data-v-76f5188b]{align-items:center;justify-content:center}.a-button .a-button__inner[data-v-76f5188b]{position:relative;display:flex;font-size:var(--font-size-sm)}.a-button[data-type=none][data-v-76f5188b]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.a-button[data-type=none][data-v-76f5188b]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=none][data-v-76f5188b]:hover{color:var(--color-text-primary)}}.a-button[data-type=disabled][data-v-76f5188b]{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-type=disabled][data-v-76f5188b]:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button[data-type=basic][data-v-76f5188b]{color:var(--color-text-primary);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=basic][data-v-76f5188b]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=basic][data-v-76f5188b]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=primary][data-v-76f5188b]{color:var(--color-text-invert);background-color:var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=primary][data-v-76f5188b]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=primary][data-v-76f5188b]:hover{background-color:var(--color-custom-accent-reaction)}}.a-button[data-type=secondary][data-v-76f5188b]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=secondary][data-v-76f5188b]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=secondary][data-v-76f5188b]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=offerSecondary][data-v-76f5188b]{color:var(--color-text-offer);border:1px solid var(--color-border-offer)}.a-button[data-type=danger][data-v-76f5188b]{color:var(--color-text-invert);background-color:var(--color-surface-danger)}@media only screen and (min-width:769px){.a-button[data-type=danger][data-v-76f5188b]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=danger][data-v-76f5188b]:hover{background-color:var(--color-surface-danger-reaction)}}.a-button[data-type=dangerSecondary][data-v-76f5188b]{color:var(--color-text-danger);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=dangerSecondary][data-v-76f5188b]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=dangerSecondary][data-v-76f5188b]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=twitter][data-v-76f5188b]{color:var(--color-text-invert);background-color:var(--color-social-twitter)}@media only screen and (min-width:769px){.a-button[data-type=twitter][data-v-76f5188b]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=twitter][data-v-76f5188b]:hover{background-color:var(--color-social-twitter-reaction)}}.a-button[data-type=facebook][data-v-76f5188b]{color:var(--color-text-invert);background-color:var(--color-social-facebook)}@media only screen and (min-width:769px){.a-button[data-type=facebook][data-v-76f5188b]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=facebook][data-v-76f5188b]:hover{background-color:var(--color-social-facebook-reaction)}}.a-button[data-type=floating][data-v-76f5188b]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent);border-radius:9999px}@media only screen and (min-width:769px){.a-button[data-type=floating][data-v-76f5188b]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=floating][data-v-76f5188b]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=primaryNext][data-v-76f5188b]{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-type=secondaryNext][data-v-76f5188b]{color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.a-button[data-size=small][data-v-76f5188b]{min-height:32px}@media only screen and (max-width:480px){.a-button[data-size=small][data-v-76f5188b]{padding-right:12px;padding-left:12px}}.a-button[data-size=small] .a-button__inner[data-v-76f5188b]{font-size:var(--font-size-xs)}.a-button[data-size=large][data-v-76f5188b]{min-height:48px}.a-button[data-size=large] .a-button__inner[data-v-76f5188b]{font-size:var(--font-size-base)}.a-button[data-width=fit][data-v-76f5188b]{width:100%}.a-button[data-width=square][data-v-76f5188b]{width:32px}.a-button[data-disable-focus=false][data-v-76f5188b]:active,.a-button[data-disable-focus=false][data-v-76f5188b]:hover,.a-button[data-disable-focus=true][data-v-76f5188b]:focus{outline:none}.a-button[data-v-76f5188b]:disabled{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-v-76f5188b]:disabled:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button--icon[data-v-76f5188b]{padding-right:0;padding-left:0}.a-button--icon .a-button__icon[data-v-76f5188b]{margin-right:0} .m-copyCodeButton[data-v-feb11a60]{position:absolute;top:8px;right:0;pointer-events:none;background-color:initial;opacity:0;transition:opacity .2s var(--easeInOutExpo)}div:active>.m-copyCodeButton[data-v-feb11a60],div:focus>.m-copyCodeButton[data-v-feb11a60],div:hover>.m-copyCodeButton[data-v-feb11a60]{color:var(--color-text-invert)!important;pointer-events:auto;opacity:1} .m-iconButton .m-iconButton__labelWithIcon[data-v-1f4b2e10]{margin-right:4px} .o-supportAppealBox[data-v-1bf32d10]{position:relative;display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:space-between}.o-supportAppealBox__box[data-v-1bf32d10]{padding:1.5rem 1.5rem 1rem}.o-supportAppealBox__box[data-v-1bf32d10]:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;content:"";border:1px solid var(--color-border-strong);border-radius:4px}.o-supportAppealBox__title[data-v-1bf32d10]{position:relative;z-index:3;padding:0 1rem;margin-top:-2.25rem;margin-bottom:.75rem;font-size:var(--font-size-base);color:var(--color-text-secondary);background-color:var(--color-surface-normal)}@media only screen and (max-width:480px){.o-supportAppealBox__title[data-v-1bf32d10]{font-size:var(--font-size-sm)}.o-supportAppealBox__sp[data-v-1bf32d10]{padding:1.5rem 1rem 1rem;margin-top:1.5rem}}.o-supportAppealBox__paypayBorder[data-v-1bf32d10]{display:flex}.o-supportAppealBox__paypayBorder[data-v-1bf32d10]:before{position:relative;top:.225rem;left:-.25rem;display:block;height:12px;content:"";border-left:1px solid var(--color-border-default)} .m-before-purchasing-button[data-v-4e9f5e66]{position:relative;align-self:flex-end} .a-svgIcon{display:inline-block;line-height:1}.a-svgIcon--xsmall{width:1em;height:1em;font-size:.75rem;border-radius:1em}.a-svgIcon--xsmallPlus{width:1em;height:1em;font-size:.875rem;border-radius:1em}.a-svgIcon--small{width:1em;height:1em;font-size:1rem;border-radius:1em}.a-svgIcon--mediumSmall{width:1em;height:1em;font-size:1.25rem;border-radius:1em}.a-svgIcon--medium{font-size:1.5rem}.a-svgIcon--large,.a-svgIcon--medium{width:1em;height:1em;border-radius:1em}.a-svgIcon--large{font-size:2rem} .m-tagList__title[data-v-4084a5f2]{margin-bottom:8px;font-size:var(--font-size-xs);font-weight:700}.m-tagList__body[data-v-4084a5f2]{display:flex;flex-wrap:wrap}.m-tagList__body.m-tagList__carousel[data-v-4084a5f2]{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.m-tagList__body.m-tagList__carousel[data-v-4084a5f2]::-webkit-scrollbar{width:0;height:0}.m-tagList__body.m-tagList__carousel[data-v-4084a5f2]::-webkit-scrollbar-track{background-color:initial}.m-tagList__body.m-tagList__carousel[data-v-4084a5f2]::-webkit-scrollbar-thumb{background-color:initial;border:0 solid transparent;border-radius:0}.m-tagList__item[data-v-4084a5f2]{display:inline-block;max-width:100%;margin-right:8px;margin-bottom:8px}.m-tagList__showAll[data-v-4084a5f2]{font-size:var(--font-size-sm);text-decoration:underline} .a-tag[data-v-193a6d49]{position:relative;display:inline-block;display:inline-flex;align-items:center;max-width:100%;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:var(--color-surface-normal);border:1px solid var(--color-border-default);border-radius:4px}.a-tag.is-winner[data-v-193a6d49]{border:1px solid var(--color-orange-500)}@media only screen and (min-width:769px){.a-tag.is-winner[data-v-193a6d49]:hover{border:1px solid var(--color-orange-600)}}.a-tag.is-winner .a-tag__label[data-v-193a6d49]{color:var(--color-orange-500)}@media only screen and (min-width:769px){.a-tag[data-v-193a6d49]:hover{border:1px solid var(--color-grayAlpha-300);transition:border .2s cubic-bezier(1,0,0,1)}.a-tag:hover .a-tag__close[data-v-193a6d49]{color:var(--color-text-secondary);transition:color .2s cubic-bezier(1,0,0,1)}}.a-tag__badgeIcon[data-v-193a6d49]{margin-right:4px;color:var(--color-orange-500)}.a-tag__label[data-v-193a6d49]{overflow:hidden;font-size:var(--font-size-sm);line-height:1.5;color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap}.a-tag__close[data-v-193a6d49]{margin-left:8px;color:var(--color-text-clickable-icon)}.a-tag__link[data-v-193a6d49]{display:block}.a-tag__size_mini[data-v-193a6d49]{padding:2px 8px}.a-tag__size_mini .a-tag__label[data-v-193a6d49]{font-size:var(--font-size-xs)}.a-tag__size_small[data-v-193a6d49]{padding:4px 10px}.a-tag__size_small .a-tag__label[data-v-193a6d49]{font-size:var(--font-size-sm)} .o-actionControl[data-v-8eb4ccae]{position:relative;display:flex;align-items:center;height:56px}@media only screen and (min-width:481px)and (max-width:768px){.o-actionControl[data-v-8eb4ccae]{margin-right:40px;margin-left:40px}}@media only screen and (max-width:480px){.o-actionControl[data-v-8eb4ccae]{height:24px;margin-right:16px;margin-left:16px}}.o-actionControl__item[data-v-8eb4ccae]{display:flex;align-items:center;margin-right:32px}.o-actionControl__item--add[data-v-8eb4ccae]{position:relative}.o-actionControl__item--social[data-v-8eb4ccae]{margin-right:0;margin-left:auto;font-weight:700}@media only screen and (max-width:480px){.o-actionControl__item--social[data-v-8eb4ccae]{display:none}}.o-actionControl__item--socialMobile[data-v-8eb4ccae]{color:var(--color-text-clickable-icon)}.o-actionControl__shareCoachMark[data-v-8eb4ccae]{position:absolute;right:0;bottom:56px;width:90%;margin:0 5%}.o-actionControl__reply[data-v-8eb4ccae]{color:var(--color-text-clickable-icon);transform:scaleX(-1)} .o-viewComment[data-v-36007f7a]{display:flex;color:var(--color-text-clickable-icon);touch-action:manipulation;cursor:pointer;background-color:initial;border:none;border-radius:1em;-webkit-appearance:none;appearance:none}@media only screen and (min-width:769px){.o-viewComment[data-v-36007f7a]{transition:color .2s cubic-bezier(1,0,0,1)}.o-viewComment[data-v-36007f7a]:hover{color:var(--color-text-secondary)}} .m-recommendNote__actionsIcon[data-v-2d574709]{position:relative;color:var(--color-text-clickable-icon)}@media only screen and (min-width:769px){.m-recommendNote__actionsIcon[data-v-2d574709]{transition:all .2s cubic-bezier(1,0,0,1)}.m-recommendNote__actionsIcon[data-v-2d574709]:hover{color:var(--color-text-secondary)}}.o-otherAction__balloon[data-v-2d574709]{z-index:20} @media only screen and (min-width:481px)and (max-width:768px){.o-creatorProfile__profile[data-v-30cada24]{margin-right:40px;margin-left:40px}}@media only screen and (max-width:480px){.o-creatorProfile__profile[data-v-30cada24]{margin-right:16px;margin-bottom:16px;margin-left:16px}} .m-creatorProfile[data-v-6f313185]{display:flex}.m-creatorProfile__body[data-v-6f313185]{flex:1;margin-left:16px}.m-creatorProfile__header[data-v-6f313185]{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:8px}.m-creatorProfile__name[data-v-6f313185]{display:flex;flex:1;font-size:var(--font-size-base);font-weight:700;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.m-creatorProfile__social[data-v-6f313185]{margin-right:8px}.m-creatorProfile__description[data-v-6f313185]{display:flex;align-items:flex-start}.m-creatorProfile__introduction[data-v-6f313185]{flex:1}.m-creatorProfile__profile[data-v-6f313185]{margin-bottom:8px;font-size:var(--font-size-sm);word-break:break-all}@media only screen and (max-width:480px){.m-creatorProfile__profile[data-v-6f313185]{font-size:var(--font-size-xs)}}.m-creatorProfile__profile span[data-v-6f313185]{display:-webkit-box;overflow:hidden;white-space:pre-line;-webkit-box-orient:vertical;-webkit-line-clamp:6}@media only screen and (max-width:480px){.m-creatorProfile__profile span[data-v-6f313185]{-webkit-line-clamp:2}}.m-creatorProfile__profile span.is-open[data-v-6f313185]{display:block}.m-creatorProfile__profile[data-v-6f313185]:empty{margin-bottom:0}.m-creatorProfile__profile[data-v-6f313185] a{text-decoration:underline}.m-creatorProfile__aside[data-v-6f313185]{display:flex;justify-content:flex-start}.m-creatorProfile__follow[data-v-6f313185]{position:relative;flex:0 0 auto;margin-left:16px}.m-creatorProfile__bodyLink[data-v-6f313185]{display:inline;padding:0;margin:0;color:var(--color-text-secondary);text-decoration:underline;cursor:pointer;border:0;outline:none;-webkit-appearance:none;appearance:none}.m-creatorProfile__bodyLink[data-v-6f313185]:hover{color:var(--color-text-primary)}.m-creatorProfile__bodyLink.is-open[data-v-6f313185]{display:block} .a-button[data-v-5da4ae22]{display:inline-block;display:inline-flex;min-height:40px;padding:0 16px;margin:0;font-weight:700;line-height:1;color:var(--color-text-secondary);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:top;touch-action:manipulation;cursor:pointer;background:var(--color-surface-normal);border:none;border-radius:4px;-webkit-appearance:none;appearance:none}.a-button[data-v-5da4ae22],.a-button .a-button__inner[data-v-5da4ae22]{align-items:center;justify-content:center}.a-button .a-button__inner[data-v-5da4ae22]{position:relative;display:flex;font-size:var(--font-size-sm)}.a-button[data-type=none][data-v-5da4ae22]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.a-button[data-type=none][data-v-5da4ae22]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=none][data-v-5da4ae22]:hover{color:var(--color-text-primary)}}.a-button[data-type=disabled][data-v-5da4ae22]{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-type=disabled][data-v-5da4ae22]:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button[data-type=basic][data-v-5da4ae22]{color:var(--color-text-primary);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=basic][data-v-5da4ae22]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=basic][data-v-5da4ae22]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=primary][data-v-5da4ae22]{color:var(--color-text-invert);background-color:var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=primary][data-v-5da4ae22]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=primary][data-v-5da4ae22]:hover{background-color:var(--color-custom-accent-reaction)}}.a-button[data-type=secondary][data-v-5da4ae22]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent)}@media only screen and (min-width:769px){.a-button[data-type=secondary][data-v-5da4ae22]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=secondary][data-v-5da4ae22]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=offerSecondary][data-v-5da4ae22]{color:var(--color-text-offer);border:1px solid var(--color-border-offer)}.a-button[data-type=danger][data-v-5da4ae22]{color:var(--color-text-invert);background-color:var(--color-surface-danger)}@media only screen and (min-width:769px){.a-button[data-type=danger][data-v-5da4ae22]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=danger][data-v-5da4ae22]:hover{background-color:var(--color-surface-danger-reaction)}}.a-button[data-type=dangerSecondary][data-v-5da4ae22]{color:var(--color-text-danger);border:1px solid var(--color-border-default)}@media only screen and (min-width:769px){.a-button[data-type=dangerSecondary][data-v-5da4ae22]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=dangerSecondary][data-v-5da4ae22]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=twitter][data-v-5da4ae22]{color:var(--color-text-invert);background-color:var(--color-social-twitter)}@media only screen and (min-width:769px){.a-button[data-type=twitter][data-v-5da4ae22]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=twitter][data-v-5da4ae22]:hover{background-color:var(--color-social-twitter-reaction)}}.a-button[data-type=facebook][data-v-5da4ae22]{color:var(--color-text-invert);background-color:var(--color-social-facebook)}@media only screen and (min-width:769px){.a-button[data-type=facebook][data-v-5da4ae22]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=facebook][data-v-5da4ae22]:hover{background-color:var(--color-social-facebook-reaction)}}.a-button[data-type=floating][data-v-5da4ae22]{color:var(--color-custom-accent);border:1px solid var(--color-custom-accent);border-radius:9999px}@media only screen and (min-width:769px){.a-button[data-type=floating][data-v-5da4ae22]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=floating][data-v-5da4ae22]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=primaryNext][data-v-5da4ae22]{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-type=secondaryNext][data-v-5da4ae22]{color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.a-button[data-size=small][data-v-5da4ae22]{min-height:32px}@media only screen and (max-width:480px){.a-button[data-size=small][data-v-5da4ae22]{padding-right:12px;padding-left:12px}}.a-button[data-size=small] .a-button__inner[data-v-5da4ae22]{font-size:var(--font-size-xs)}.a-button[data-size=large][data-v-5da4ae22]{min-height:48px}.a-button[data-size=large] .a-button__inner[data-v-5da4ae22]{font-size:var(--font-size-base)}.a-button[data-width=fit][data-v-5da4ae22]{width:100%}.a-button[data-width=square][data-v-5da4ae22]{width:32px}.a-button[data-disable-focus=false][data-v-5da4ae22]:active,.a-button[data-disable-focus=false][data-v-5da4ae22]:hover,.a-button[data-disable-focus=true][data-v-5da4ae22]:focus{outline:none}.a-button[data-v-5da4ae22]:disabled{color:var(--color-text-secondary);cursor:not-allowed;background-color:var(--color-surface-disabled);border:none;transition:none}@media only screen and (min-width:769px){.a-button[data-v-5da4ae22]:disabled:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button--icon[data-v-5da4ae22]{padding-right:0;padding-left:0}.a-button--icon .a-button__icon[data-v-5da4ae22]{margin-right:0} .a-link[data-v-5da4ae22]{cursor:pointer}.a-link[data-v-5da4ae22]:active,.a-link[data-v-5da4ae22]:hover{outline:none}.a-link.disabled[data-v-5da4ae22]{cursor:default}.a-link.a-link--underline[data-v-5da4ae22]{text-decoration:underline}.a-link[data-type=primary][data-v-5da4ae22]{color:var(--color-custom-accent)} .is-clickable[data-v-0e7a0622]{position:relative;cursor:pointer} .m-creatorSocialLinks[data-v-d605938e]{display:flex;flex-wrap:wrap;gap:12px}.m-creatorSocialLinks__item[data-v-d605938e]{line-height:1;color:var(--color-text-clickable-icon)}@media only screen and (max-width:480px){.m-creatorSocialLinks__item[data-v-d605938e]{margin-right:0}}@media only screen and (min-width:769px){.m-creatorSocialLinks__item[data-v-d605938e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.m-creatorSocialLinks__item[data-v-d605938e]:hover{color:var(--color-text-secondary)}} .a-loadingDots[data-v-67ce1e68]{display:flex;align-items:center;justify-content:center;width:100%}.a-loadingDots__item[data-v-67ce1e68]{color:var(--color-text-primary);background-color:currentColor;border-radius:8px;opacity:.3}@keyframes loadingAnimation-data-v-67ce1e68{0%{opacity:1}to{opacity:.3}}.a-loadingDots__item[data-v-67ce1e68]:first-child{animation:loadingAnimation-data-v-67ce1e68 2s ease-in-out infinite}.a-loadingDots__item[data-v-67ce1e68]:nth-child(2){animation:loadingAnimation-data-v-67ce1e68 2s ease-in-out 666ms infinite}.a-loadingDots__item[data-v-67ce1e68]:nth-child(3){animation:loadingAnimation-data-v-67ce1e68 2s ease-in-out 1.3s infinite}.a-loadingDots__item--color_black[data-v-67ce1e68]{background-color:currentColor}.a-loadingDots__item--color_primary[data-v-67ce1e68]{background-color:var(--color-surface-success)}.a-loadingDots__item--color_white[data-v-67ce1e68]{background-color:var(--color-surface-normal)}.a-loadingDots__item--size_small[data-v-67ce1e68]{width:4px;height:4px;margin-right:2px;margin-left:2px}.a-loadingDots__item--size_medium[data-v-67ce1e68]{width:8px;height:8px;margin-right:4px;margin-left:4px}.a-loadingDots__item--size_large[data-v-67ce1e68]{width:16px;height:16px;margin-right:8px;margin-left:8px} @keyframes hide-profile-body-data-v-123bee02{0%{opacity:1}70%{opacity:0}to{opacity:0;transform:translateY(-10%)}}.o-sideCreatorProfile[data-v-123bee02]{max-width:236px;padding-left:32px;transition-duration:.2s;transition-property:opacity,font-size}.o-sideCreatorProfile--hide[data-v-123bee02]{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0}.o-sideCreatorProfile__toggleButton[data-v-123bee02]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-bottom:12px;color:var(--color-text-clickable-icon)}.o-sideCreatorProfile__creator[data-v-123bee02],.o-sideCreatorProfile__toggleButton[data-v-123bee02]:hover{color:var(--color-text-primary)}.o-sideCreatorProfile__creator[data-v-123bee02]{display:flex;align-items:center;margin-bottom:8px;font-weight:700;gap:8px}.o-sideCreatorProfile__creator--small[data-v-123bee02]{gap:4px;font-size:var(--font-size-xs)}.o-sideCreatorProfile__creator--small .o-sideCreatorProfile__creatorName[data-v-123bee02]{-webkit-line-clamp:1}.o-sideCreatorProfile__body[data-v-123bee02]{padding:16px;margin-left:-16px;background:var(--color-surface-normal)}.o-sideCreatorProfile__body-enter-active[data-v-123bee02]{animation:hide-profile-body-data-v-123bee02 .2s ease-in reverse}.o-sideCreatorProfile__body-leave-active[data-v-123bee02]{animation:hide-profile-body-data-v-123bee02 .2s ease-in}.o-sideCreatorProfile__avatar[data-v-123bee02]{flex-shrink:0;transition-timing-function:ease-in;transition-duration:.2s;transition-property:width,height}.o-sideCreatorProfile__followedLabel[data-v-123bee02]{margin-top:-7px;margin-bottom:7px}.o-sideCreatorProfile__creatorName[data-v-123bee02]{display:-webkit-box;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;transition:font-size .2s ease-in;-webkit-line-clamp:2;-webkit-box-orient:vertical}.o-sideCreatorProfile__profile[data-v-123bee02]{margin-bottom:24px;font-size:var(--font-size-xs);line-height:150%;color:var(--color-text-secondary)}.o-sideCreatorProfile__profile[data-v-123bee02] a{-webkit-text-decoration-line:underline;text-decoration-line:underline}.o-sideCreatorProfile__followButton[data-v-123bee02]{position:relative;z-index:var(--z-index-popupMessage)} .m-shareSheet[data-v-b8476e46]{z-index:100;display:flex;align-items:center;padding:0 0 0 16px;color:var(--color-text-invert);border-radius:4px;box-shadow:var(--elevation-6);transform:translate(calc(-50% + var(--shareSheetOffsetX, 0px)),50%)}.m-shareSheet[data-v-b8476e46],.m-shareSheet[data-v-b8476e46]:after{position:absolute;background-color:var(--color-custom-accent)}.m-shareSheet[data-v-b8476e46]:after{top:-7px;right:calc(50% + var(--shareSheetOffsetX, 0px));z-index:-1;width:8px;height:8px;pointer-events:none;content:"";transform:rotate(45deg) translate(50%)}.m-shareSheet__title[data-v-b8476e46]{margin-right:8px;font-size:var(--font-size-xs);font-weight:700;line-height:1;white-space:nowrap}.m-shareSheet__item[data-v-b8476e46]{padding:8px;background-color:var(--color-custom-accent)}.m-shareSheet__item[data-v-b8476e46]:last-child{border-radius:0 4px 4px 0}@media only screen and (min-width:769px){.m-shareSheet__item[data-v-b8476e46]:hover{background-color:var(--color-custom-accent-reaction)}} .o-footer[data-v-27ddcb3e]{position:relative;padding:40px 16px 32px}@media print{.o-footer[data-v-27ddcb3e]{display:none}}.o-footer__menu[data-v-27ddcb3e]{display:inline-flex;flex-wrap:wrap;justify-content:center;width:100%}.o-footer__item[data-v-27ddcb3e]{margin:0 12px 12px;font-size:var(--font-size-xs)}.o-footer__item--strong[data-v-27ddcb3e]{font-weight:700}.o-footer__link[data-v-27ddcb3e]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.o-footer__link[data-v-27ddcb3e]:hover{color:var(--color-text-primary)}}.o-footer__powerdby[data-v-27ddcb3e]{display:flex;align-items:center;justify-content:center;margin-top:24px}.o-footer__powerdbyTitle[data-v-27ddcb3e]{margin-right:8px;font-size:var(--font-size-xs);color:var(--color-text-secondary)}.o-footer--article[data-v-27ddcb3e]{padding-bottom:96px}@media only screen and (max-width:480px){.o-footer--article[data-v-27ddcb3e]{padding-bottom:88px}}.o-footer__offset[data-v-27ddcb3e]{margin-bottom:var(--footerOffsetY,0)}</style> </head> <body style="" data-n-head="%7B%22style%22:%7B%22ssr%22:%22%22%7D%7D"> <div data-server-rendered="true" id="__nuxt"><div id="__layout"><div><div> <header class="o-navBar is-sticky" data-v-1339646a><div data-v-1339646a> <div class="m-navbarContainer svelte-qah1lm"><div class="m-navbarLogoContainer svelte-1s7rfpy"><h1><a href="https://note.com/" target="_self" aria-label="note" class="m-navbarLogo svelte-wdp6vs m-navbarLogo--note"><svg width="98" height="22" viewBox="0 0 98 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3377 0.0205078H65.3607V5.41256H70.5272V10.128H65.3607V15.7251H60.3377V10.128H55.1711V5.41256H60.3377V0.0205078Z" fill="black"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M27.8419 11.5017C27.8419 6.15065 32.1678 1.8042 37.4778 1.8042C42.7879 1.8042 47.1138 6.15065 47.1138 11.5017C47.1138 16.8527 42.7879 21.1992 37.4778 21.1992C32.1678 21.1992 27.8419 16.8527 27.8419 11.5017ZM32.4343 11.4812C32.4343 14.29 34.6896 16.5657 37.4778 16.5657C40.2661 16.5657 42.5214 14.3105 42.5214 11.4812C42.5214 8.67241 40.2661 6.39667 37.4778 6.39667C34.6896 6.39667 32.4343 8.67241 32.4343 11.4812Z" fill="black"></path><path d="M4.87829 1.90517C7.57364 1.85514 10.3765 1.80312 12.6293 1.86569C17.5908 1.98871 19.4565 4.14143 19.5385 9.49247C19.6 12.5063 19.5385 21.1582 19.5385 21.1582H14.167C14.167 17.9452 14.1743 15.8712 14.1797 14.3661C14.187 12.3278 14.1905 11.332 14.167 9.96402C14.1054 7.87281 13.5109 6.8682 11.8912 6.68368C10.169 6.47866 5.39206 6.64268 5.39206 6.64268V21.1582H0.0205078V1.9682C1.48206 1.9682 3.15828 1.93709 4.87829 1.90517Z" fill="black"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M97.877 11.5017C97.877 6.15065 93.5511 1.8042 88.241 1.8042C82.931 1.8042 78.605 6.15065 78.605 11.5017C78.605 14.6385 80.0402 17.3243 82.2749 19.108C83.8331 20.3381 86.0063 21.1992 88.9176 21.1992C90.3322 21.1992 94.0021 20.8096 96.6469 17.8778L94.4736 14.9665C93.5511 15.7866 91.2343 16.9347 89.3891 16.9347C87.0519 16.9347 85.6373 16.4837 84.6122 15.5201C83.9766 14.946 83.5255 14.0645 83.3205 12.9778H97.7335C97.8155 12.4858 97.877 12.0142 97.877 11.5017ZM83.3615 9.73851C83.8946 7.46278 85.4937 5.78161 88.2205 5.78161C91.0703 5.78161 92.567 7.58579 93.059 9.73851H83.3615Z" fill="black"></path></svg> </a></h1> </div> <div class="o-navbarPrimaryGuest__searchArea svelte-1yivl54" role="presentation"> <div class="o-navbarSearchForm svelte-xctz9i" role="presentation"><button type="button" class="o-navbarSearchForm__iconButton svelte-xctz9i" aria-label="検索"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.71 14H15.5L20.49 19L19 20.49L14 15.5V14.71L13.73 14.43C12.59 15.41 11.11 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C13.09 3 16 5.91 16 9.5C16 11.11 15.41 12.59 14.43 13.73L14.71 14ZM5 9.5C5 11.99 7.01 14 9.5 14C11.99 14 14 11.99 14 9.5C14 7.01 11.99 5 9.5 5C7.01 5 5 7.01 5 9.5Z" fill="currentColor"></path> </svg></button></div> </div> <nav class="m-navbarContainer__nav svelte-qah1lm" aria-label="アカウント"> <div class="o-navbarPrimaryGuest__navItem login svelte-1yivl54"><a target="_self" rel="nofollow" data-size="small" data-width="fit" data-focus-disabled="false" class="a-button svelte-rln4l" data-type="none" href="https://note.com/login?redirectPath="><div class="a-button__inner svelte-rln4l">ログイン</div> <span class="a-button__overlay svelte-rln4l"></span></a></div> <div class="o-navbarPrimaryGuest__navItem svelte-1yivl54"><a target="_self" rel="nofollow" data-size="small" data-width="fit" data-focus-disabled="false" class="a-button svelte-rln4l" data-type="primaryNext" href="https://note.com/signup"><div class="a-button__inner svelte-rln4l">会員登録</div> <span class="a-button__overlay svelte-rln4l"></span></a></div> </nav> </div></div> </header> <div class="o-navbarMessage" data-v-6e9284f6></div> <div data-fetch-key="data-v-7f26520d:0" data-v-7f26520d data-v-7a3ab06c data-v-7a3ab06c data-v-1069daa1><div class="o-cautionBar" data-v-ec3f6504 data-v-7f26520d></div> <main class="p-article" data-v-8a71fdf2 data-v-7f26520d>  <div class="p-article__articleWrapper" data-v-8a71fdf2><article class="p-article__body" data-v-8a71fdf2> <div class="p-article__content pb-4" data-v-8a71fdf2><div data-note-id="3552260" data-note-key="n8924408dd07b" data-v-8a71fdf2><div class="o-noteContentText o-noteContentText--font_sansserif o-noteContentText--device_windows" data-v-e7ed8ff0> <div class="o-noteContentHeader o-noteContentText__header" data-v-caeb130c data-v-e7ed8ff0><div class="o-noteContentHeader__titleContainer o-noteContentHeader__titleContainer--font_sansserif o-noteContentHeader__titleContainer--device_windows" data-v-caeb130c><h1 class="o-noteContentHeader__title" data-v-caeb130c> Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した </h1> <div class="o-noteContentHeader__titleAttachment" data-v-caeb130c><div class="flex" data-v-caeb130c><span class="o-noteLikeV3" data-v-5b0bbae8 data-v-caeb130c><span class="o-noteLikeV3__iconContainer" data-v-5b0bbae8><span class="o-noteLikeV3__iconContainerInner" data-v-5b0bbae8><button aria-pressed="false" aria-label="スキ" class="o-noteLikeV3__iconButton leading-none flex items-center" data-v-5b0bbae8><i aria-hidden="true" data-disable-focus="true" data-tooltip="スキ" data-fill="lightGray" class="o-noteLikeV3__icon a-icon a-icon--heart a-icon--size_mediumSmall" data-v-5b0bbae8></i> </button> </span></span>  <button aria-label="105スキこの記事にスキをつけたユーザーを見る" class="text-text-secondary o-noteLikeV3__count o-noteLikeV3__count--mediumSmall" data-v-5b0bbae8> 105 </button></span> </div> <div class="flex items-center gap-2 justify-center flex-wrap shrink grow-0" data-v-caeb130c>   </div></div></div> <div class="o-noteContentHeader__creatorInfo" data-v-caeb130c><a href="/najeira" aria-hidden="true" class="o-noteContentHeader__avatar a-link" data-v-43e40ddc data-v-caeb130c><div class="m-avatar m-avatar--medium" data-v-5c1c7fdc data-v-caeb130c><img src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%2267%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3CanimateTransform%20attributeName%3D%22gradientTransform%22%20type%3D%22translate%22%20from%3D%22-1%200%22%20to%3D%221%200%22%20begin%3D%220s%22%20dur%3D%221.5s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22rect%22%20fill%3D%22url(%23a)%22%20d%3D%22M-100-100h300v300h-300z%22%2F%3E%3C%2Fsvg%3E" data-src="https://assets.st-note.com/production/uploads/images/5843702/profile_de4f50223970e44ffaa5689ca38ee76f.jpg?width=60" alt="najeira" decoding="async" loading="lazy" width="56" height="56" class="a-image m-avatar__image lazyload" data-v-50e2377b data-v-5c1c7fdc></div></a> <div class="o-noteContentHeader__info" data-v-caeb130c><div class="o-noteContentHeader__name" data-v-caeb130c><a href="/najeira" class="a-link" data-v-43e40ddc data-v-caeb130c> najeira </a></div> <span class="o-noteContentHeader__date" data-v-caeb130c><time datetime="2018-03-02T11:48:43.000+09:00" data-v-caeb130c>2018年3月2日 11:48</time></span> </div>  <div class="o-noteContentHeader__status" data-v-caeb130c> </div></div></div> <div data-name="body" class="note-common-styles__textnote-body" data-v-e7ed8ff0><p name="oc5A4">Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。</p><p name="SAxZ9">The English version is on <a href="https://medium.com/google-developer-experts/using-flutter-in-a-real-life-application-with-100k-downloads-ab64ecd8e03f" target="_blank" rel="noopener noreferrer nofollow">Medium</a>!</p><h2 name="MnM3b">Flutter について</h2><p name="A1FcN"><a href="https://flutter.io/" target="_blank" rel="noopener noreferrer nofollow">Flutter</a> は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。</p><h2 name="hyVs8">特徴</h2><p name="wop9J">- 言語は Dart<br>- フルスタックのUI framework (Material and iOS)<br>    - Reactive (inspired by React)<br>    - Material and iOS<br>    - GPU を利用して UI を描画するところまで全て (<a href="https://skia.org/" target="_blank" rel="noopener noreferrer nofollow">Skia</a>)<br>- オープンソース on <a href="https://github.com/flutter/flutter" target="_blank" rel="noopener noreferrer nofollow">GitHub</a><br>    - developed by Google and community<br>- ネイティブのARMコードにコンパイル<br>- 開発用プラグイン<br>    - IntelliJ, Visual Code Studio, Android Studio もサポート<br>    - IntelliJ で IDEデバッグ<br>- ホットリロード<br>- ベータ版 (2018/02/28現在)</p><p name="Y6pLN">技術的な詳細については、本記事の趣旨ではないので省略します。また別途、書きたいと思います！</p><p name="JxnuH"><b>参考リンク</b></p><p name="iJKFu">- <a href="https://flutter.io/" target="_blank" rel="noopener noreferrer nofollow">公式サイト flutter.io</a><br>- <a href="https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0" target="_blank" rel="noopener noreferrer nofollow">Announcing Flutter beta 1: Build beautiful native apps</a><br>- <a href="http://konifar.hatenablog.com/entry/2018/02/01/015601" target="_blank" rel="noopener noreferrer nofollow">FlutterでDroidKaigi 2018のiOSアプリを作りました</a><br>- <a href="https://speakerdeck.com/najeira/iosliang-dui-ying-falseapurikai-fa-2" target="_blank" rel="noopener noreferrer nofollow">FlutterでAndroid/iOS両対応のアプリ開発 Google Developers Group DevFest 2017 Tokyo</a><br>- <a href="http://jp.techcrunch.com/2018/02/28/2018-02-27-googles-flutter-ui-framework-is-now-in-beta/" target="_blank" rel="noopener noreferrer nofollow">Dart言語によるモバイルアプリ(iOS/Android)開発フレームワークFlutterがベータを開始</a></p><p name="YrlWK">また、Android をお使いの方は <a href="https://play.google.com/store/apps/details?id=io.flutter.demo.gallery&rdid=io.flutter.demo.gallery" target="_blank" rel="noopener noreferrer nofollow">Flutter 公式のサンプルアプリ</a> をインストールして触ってみると、用意されている UI がなんとなくつかめると思います。</p><h2 name="j3AHt">アプリについて</h2><p name="WwJvD">CARTUNEというクルマ好きのためのアプリを作りました ( <a href="https://play.google.com/store/apps/details?id=me.cartune.android" target="_blank" rel="noopener noreferrer nofollow">Android</a> / <a href="https://itunes.apple.com/jp/app/id1221199655?mt=8" target="_blank" rel="noopener noreferrer nofollow">iOS</a> )。以下、いくつかスクリーンショットです。</p><p name="Fwaus"><img src="https://assets.st-note.com/production/uploads/images/5843629/picture_pc_177619fd4ffba1fb4b605a20b0ef08ea.jpg" width="480" height="853" class="" style="width: 288px; height: 511.8px; " loading="lazy"></p><p name="F39yV"><img src="https://assets.st-note.com/production/uploads/images/5843630/picture_pc_3ff1a05a02ec04ada3801ae9a14bfed8.jpg" width="480" height="853" style="width: 288px; height: 511.8px;" class="" loading="lazy"></p><p name="ugjin"><img src="https://assets.st-note.com/production/uploads/images/5843773/picture_pc_4e443cecdf92029c71ecbf8cb6c63823.jpg" width="480" height="853" class="" style="width: 288px; height: 511.8px;" loading="lazy"></p><p name="SHPYA">赤いツールバーなのが Android 版のデザイン。下タブなのは iOS 版のデザイン。ただしスクリーンショットは両方共 Android 実機で撮影しています（フラグで切り替えているだけ）。</p><p name="kgsC7"><b>参考リンク</b></p><p name="qCYSt">- <a href="http://jp.techcrunch.com/2018/01/10/michael-cartune/" target="_blank" rel="noopener noreferrer nofollow">「MixChannel」生みの親の新たな挑戦は“車”のコミュニティ「CARTUNE」、1.1億円の調達も | TechCrunch Japan</a></p><h2 name="q6aF0">検討および採用の経緯</h2><p name="84Qk4">アプリを開発するにあたり、素早い開発のために、Android / iOS に両対応したクロスプラットフォームの開発SDKを使うことにしました。Android / iOS のどちらも開発経験がありますが、やはり少人数で両 OS 向けに別々に開発するのは大変です。</p><p name="KVhZ1">そこで、Flutter / React Native / Xamarin を検討しました。最終的に Flutter を採用しましたが、以下のようにいくつかのポイントがありました。</p><p name="0NJLl"><b>言語(Dart)</b></p><p name="q1Rb2">Flutter は Dart を使ってアプリを書きます。第一印象は Java っぽいと感じました。静的な型付けですし、async / await があって非同期処理が書きやすそうだと思いました。</p><p name="DsZ6n">個人的には JavaScript はちょっと書きたくないな……と思っていたので、Dart は好印象でした。</p><p name="HRMcb">なお Xamarin で使われている C# もいい言語だと思います。</p><p name="kspQJ"><b>パフォーマンス</b></p><p name="NqKSL">パフォーマンスに関しては、どの SDK も問題になることはないかな、という印象です。</p><p name="FRZn6">Flutter は Android / iOS ともネイティブの ARM コードにコンパイルされます。また、公式が提供している Flutter Gallary を触ってみて、パフォーマンスに問題がなさそうだという感触を得ました。</p><p name="49Fb9">React Native は UI はネイティブですが、JavaScript が動作する部分があるのが少し気になりました。ただ、世の中のアプリを触った限りではパフォーマンスは気にならなかったので、多くの場合では問題にはならないとも思いました。</p><p name="EWGOV">Xamarin は iOS はネイティブにコンパイルですが、Android は Mono VM が動作するそうです（ここがネイティブ・コンパイルだったら、もう少し詳しく検討しましたが……）。</p><p name="9XEZN"><b>Reactive</b></p><p name="QKHqi">Flutter は React からインスパイアされていて Reactive フレームワークです。以前から UI の開発がしやすそうだと Reactive Native が気になっていましたし、Flutter も同様に良さそうだと思いました。</p><p name="7klXZ"><b>Built-in Widgets</b></p><p name="Zdl0d">Flutter は多種多様な UI Widgets をフレームワーク自身が持っています。</p><p name="MmAfz">React Native と Xamarin はネイティブの UI を使う方式（ですよね？）。</p><p name="LmNUl">このため Flutter では各 OS 間の差異が UI に関しては無く（意図して Android / iOS で挙動や見た目を変えている箇所はあります）プラットフォームごとの違いに苦悩することが減りそうだという期待がありました。</p><p name="ndcrB"><b>エコシステム</b></p><p name="DLVKV">検討していた頃（2017年の夏）は Flutter のライブラリ等はかなり少なく、必要に応じて自分で実装する必要がある状況でした。ただ、Flutter の Widgets は非常に充実しており、UI の実装においてはそれらを組み合わせればよく、特に困らないだろうと思われました（現時点では、その通りの状況です）。</p><p name="6ZSUr">React Native は利用している開発者も多いですし、ライブラリも多いのはとても魅力的でした。</p><p name="lY29a">Xamarin は、かなり昔に小さなアプリを試しに作った時に NuGet で苦戦した記憶がありますが、詳しくはわかりません。</p><p name="DXnM5"><b>ネイティブ連携</b></p><p name="ZievQ">どうしても Flutter では実現できない機能が出てきた時に、ネイティブ側のコードで解決できるかどうかを調査しました。</p><p name="7ycaY">Flutter ではプラットフォーム固有の機能（カメラや位置情報など）はプラットフォーム側の機能を呼び出す必要があります。その場合はプラットフォーム・ネイティブ（Android なら Java、iOS なら ObjC / Swift）で実装することになります。この場合はプラットフォーム標準の開発と同様ですから、世にあるライブラリも使いたいものを使うことができます。</p><p name="8pBwa">また Flutter 自体がプラットフォーム・ネイティブの世界では全画面表示になっているひとつの View です（この View を通じて GPU で Flutter UI が描画される）。ハイブリッドっぽく、一つの画面に Flutter とプラットフォーム・ネイティブの UI を混在させることが出来ることを、試しに実装して確認しました。この混在させる方法は使わないほうがよく、プロダクトでは使ってはいませんが、出来るかどうかだけは確認しました。</p><p name="2ozrL">いざとなったら、このプラグイン機構でプラットフォーム側の実装をRPC的に呼び出せば、なんとでも実装できるという最終手段があるのは重要なポイントでした。</p><h2 name="V5WyJ">感想</h2><p name="7R4bU"><b>UI building</b></p><p name="j7vpi">Flutter は Dart のコードで Widgets tree を作ることで UI を定義します。これは、とても快適です。コードなので、条件に応じて UI を切り替えるといったことも簡単です。</p><p name="EWqp6">UI は Flutter が完全にコントロールしているので、OS ごとの差異で苦労することもありませんでした。一部の UI は Android / iOS で違うデフォルト値を持っていて（例えばツールバーの中央寄せ(iOS)、左寄せ(Android)や、画面遷移のトランジションなど）、それぞれのプラットフォーム標準の見た目や動作に近くなるようになっていますが、プロパティを明示すれば統一することができます。</p><p name="yPzVG">Flutter が提供している Widget も豊富で、それらの組み合わせで UI が作れるので、サードパーティの UI ライブラリ的なものは必要ありませんでした。</p><p name="WEICT"><b>ホットリロード</b></p><p name="uBYhV">公式で謳われている「高速なホットリロード」は、本当に誇張なしに1秒以下でリロードできます。</p><p name="ufFar">（<a href="https://flutter.io/images/intellij/hot-reload.gif" target="_blank" rel="noopener noreferrer nofollow">アニGIFを埋め込めなかったのでこちらから別で開いて御覧ください</a>）<br></p><p name="eCbKc">これは小さなサンプルだけでなく、ある程度の規模の実際のプロダクトであっても、1秒以下でリロードされます。レイアウト部分だけでなく、ロジック部分もリロードできます。しかも、状態を保ったまま。場合によってはフルリロードが必要になり、状態はクリアされますが、そのフルリロードでも2秒程度しかかかりません。</p><p name="x2MrF">レイアウトやスタイルを実機で見ながら、少し調整してリロード……というのが手軽なので、デザイン調整もしやすいですし、少しずつ小さな部分から UI を作っていくことができます。最初の頃は Widgets tree から完成が想像しにくかったので、リロードを繰り返しながら作りました。</p><p name="dNMZ9"><b>開発効率</b></p><p name="2MNeE">アプリ次第で大きく変わるところではありますが、50 - 80% くらいは共通で（つまり Dartで）書けると思います。</p><p name="CcPqa">CARTUNE では、画像編集の機能をプラットフォーム側で実装しています（画像選択が Android が Intent、iOS が Photos なのと、OpenCVでナンバープレート検出している）。他には Twitter などの SDK 連携もプラグイン機構でプラットフォーム側で実装しています。それ以外の部分は Dart で Android / iOS ともに共有しています。CARTUNE だと画像編集の実装が大きいのもあり、共有できているDart 部分は <b>70% </b>ほどです。</p><p name="tBwbx">UI もロジックもシングルコードベースというのは大きな利点だと思います。</p><p name="OD29O">これは個々人のスキルセットに依存するのであまり参考にはならないのですが……両 OS を別々で開発するコストが 100 （Android 35、iOS 65）とすると、Flutter であれば 30 - 50 くらいのコストで開発できるのではないかという印象です（あくまで私の開発経験に基づく、個人的な感想です）。</p><p name="mm9xa"><b>課題</b></p><p name="PRsUO">まだ発展途上なので、不具合はあります。GitHub に登録されている Issues も、記事執筆時点で 2,000 以上あります。</p><p name="seiti">もちろん、開発はアクティブなので、どんどん不具合は修正されたり機能が充実したりしているので、今後はより良くなっていくことは期待できます。自分自身も、いくつかバグに遭遇して、Pull Request を送ったりもしました。</p><p name="um8E6">とはいえっても、まだベータ版ですし、一定以上の規模であれば、何らかのバグに遭遇したりすると思います。安定性という点では、まだプラットフォーム・ネイティブでの開発には及ばないと思います（他のクロスプラットフォーム SDK との比較では、どうなのか分かりません）。</p><p name="rkzWC">情報の少なさも課題です。公式サイトやドキュメントは充実していますし、公式サンプルアプリも良い実装例です。そうはいっても、まだまだ足りない部分はあります。</p><p name="CdOuE">私の場合は、困ったときは Flutter 内部のコードを読みながら、アプリを開発していました。Flutter の UI framework 部分は Dart で書かれていて、アプリ開発と同じ言語ということもあり読みやすく、Widget の使い方がわからなかったり、挙動で疑問があるときは、Flutter 内部を読んでいます。</p><p name="ev3Qf">あとは、<a href="https://stackoverflow.com/questions/tagged/flutter" target="_blank" rel="noopener noreferrer nofollow">StackOverflow</a> では Googler から回答がもらえたりしますし、私もときどき質問を見ています。<a href="https://groups.google.com/forum/#!forum/flutter-dev" target="_blank" rel="noopener noreferrer nofollow">Google Groups</a> や <a href="https://gitter.im/flutter/flutter" target="_blank" rel="noopener noreferrer nofollow">Gitter</a> もありますが、そちらはあまり見ていません（流れていってしまう系の情報はあまり追わないので）。</p><p name="aluEj"><b>向き不向き</b></p><p name="irxUM">UI 構築が大きい割り合いを占めるアプリは、Flutter の恩恵を大きく受けられます。デバイス寄りの機能が大きな割り合いを占めるもの（例えばカメラなど）は、恩恵が小さくなります。</p><p name="NIwaS">既存のアプリにハイブリッド的に組み込むのは、向いていません。</p><p name="Qb9xw">Flutter ではプラットフォーム・ネイティブの画面へ遷移することはできます。しかし基本的には Flutter の画面をメインとしつつ、寿命の短いフロー（カメラ起動して写真を撮って戻るとか、WebViewでお知らせ画面を表示するとか）でワンポイントでプラットフォーム・ネイティブの画面や機能を使うのがよいパターンだと思います。</p><p name="5z6Ds">また、ゲーム向けではありません（そもそもゲームエンジンではない）。</p><p name="u8vzg">以下のような場合では、Flutter と相性がよさそうです。</p><p name="hXpCR"><b>アプリのプロトタイプ</b><br>- UI をデザインして、細かい挙動や見た目を調整するイテレーションがやりやすい（ホットリロード）<br>- Widgets tree の概念が HTML DOM とも似ているので、デザイナーが参加しやすそう</p><p name="MEIk1"><b>新規アプリの開発</b><br>- 最初から Flutter で書ける（既存のアプリに部分的に組み込むのはあわない）<br>- Flutter のバグを踏んだ時に、回避するワークアラウンドを採用できる（仕様を変えやすい）<br>    - 以前は動画サポートが無かったので（いまはあります）、CARTUNE ではプラットフォーム・ネイティブの画面へ遷移して動画を再生<br>    - テキスト入力欄の改行入力の動作が怪しいので、同様にプラットフォーム・ネイティブの画面へ遷移してテキスト入力</p><p name="BYWYi"><b>UI building が中心的なアプリ</b><br>- ニュース系アプリやTwitterアプリのようなもの<br></p><h2 name="0NZ32">まとめ</h2><p name="2T3iY">Flutter を利用して Android / iOS の両方に対応したアプリを素早く開発することができました。開発効率は高くて満足しています。安定性が課題ですが、開発もアクティブなので改善に期待！（もちろん私も contribute していきます）</p></div>   <div style="display:none;" data-v-e7ed8ff0><button data-type="primary" data-size="small" data-width="fit" data-disable-focus="false" type="button" data-file-widget="fileDownloadButton" undefined="" class="a-button" data-v-76f5188b><div class="a-button__inner" data-v-76f5188b><i aria-hidden="true" class="a-icon a-icon--fileDownload a-icon--size_small"></i> ダウンロード </div></button></div>  <button data-type="none" data-size="small" data-disable-focus="false" type="button" data-v-1f4b2e10="" aria-label="コードをコピー" class="a-button m-copyCodeButton m-iconButton" style="display:none;" data-v-1f4b2e10 data-v-76f5188b><div class="a-button__inner" data-v-76f5188b><span data-v-1f4b2e10><span class="visually-hidden" data-v-1f4b2e10> copy </span> <i aria-hidden="true" class="a-icon a-icon--copy a-icon--size_small" data-v-1f4b2e10></i></span> </div></button> </div></div> </div>  <div class="o-supportAppealBox o-supportAppealBox__sp o-supportAppealBox__box tipBox p-article__supportAppeal print:hidden mx-4 sm:mx-10 md:mx-0" data-v-1bf32d10 data-v-8a71fdf2><h2 class="o-supportAppealBox__title" data-v-1bf32d10> いいなと思ったら応援しよう！ </h2>  <div class="inline-block w-full font-bold" data-v-1bf32d10><div class="m-before-purchasing-button" data-v-4e9f5e66 data-v-1bf32d10><button data-type="secondaryNext" data-size="medium" data-width="fit" data-disable-focus="false" type="button" data-v-1f4b2e10="" class="a-button m-iconButton" data-v-1f4b2e10 data-v-76f5188b><div class="a-button__inner" data-v-76f5188b><span class="m-iconButton__labelWithIcon" data-v-1f4b2e10> <i class="a-svgIcon a-svgIcon--medium" data-v-1f4b2e10></i></span> <span data-v-1f4b2e10>チップで応援する</span></div></button></div></div></div>   <div class="p-article__hashtags" data-v-8a71fdf2><div class="o-hashtags" data-v-51579e24 data-v-8a71fdf2><div class="m-tagList" data-v-4084a5f2 data-v-51579e24> <ul id="tagListBody" class="m-tagList__body" data-v-4084a5f2><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/Flutter" rel="noopener noreferrer" class="hashtag a-link a-tag__link" data-v-43e40ddc data-v-193a6d49 data-v-4084a5f2><div class="a-tag a-tag__size_small" data-v-193a6d49>  <div class="a-tag__label" data-v-193a6d49> #Flutter </div>  </div></a></li></ul> </div></div></div>  <div class="p-article__action" data-v-8a71fdf2><div class="o-actionControl" data-v-8eb4ccae data-v-8a71fdf2><div class="o-actionControl__item" data-v-8eb4ccae><span likable-type="note" enable-no-login-onboarding="true" class="o-noteLikeV3" data-v-5b0bbae8 data-v-8eb4ccae><span data-circle-size="medium" class="o-noteLikeV3__iconContainer" data-v-5b0bbae8><span class="o-noteLikeV3__iconContainerInner" data-v-5b0bbae8><button aria-pressed="false" aria-label="スキ" class="o-noteLikeV3__iconButton leading-none flex items-center" data-v-5b0bbae8><i aria-hidden="true" data-disable-focus="true" data-circle-size="medium" data-tooltip="スキ" data-fill="lightGray" class="o-noteLikeV3__icon a-icon a-icon--heart a-icon--size_mediumSmall o-noteLikeV3__icon--colorBorder" data-v-5b0bbae8><span data-size="medium" class="a-icon__like-safe-area"></span></i> </button> </span></span>  <button aria-label="105スキこの記事にスキをつけたユーザーを見る" class="text-text-secondary o-noteLikeV3__count o-noteLikeV3__count--mediumSmall" data-v-5b0bbae8> 105 </button></span></div>  <div class="o-actionControl__item relative" data-v-8eb4ccae>  <button id="shareButton" type="button" data-tooltip="シェア" aria-haspopup="true" aria-expanded="false" aria-controls="shareMenuDesktop" via="share-menu-desktop" class="h-6" data-v-8eb4ccae><i aria-label="" class="o-actionControl__reply a-svgIcon a-svgIcon--medium" data-v-8eb4ccae></i></button> </div> <div class="o-actionControl__item o-actionControl__item" data-v-8eb4ccae><button type="button" class="o-viewComment" data-v-8eb4ccae data-v-36007f7a><i aria-label="コメントをみる" data-tooltip="コメントをみる" class="a-svgIcon a-svgIcon--medium" data-v-8eb4ccae></i></button></div>   <div class="o-actionControl__item" data-v-8eb4ccae><div class="m-recommendNote__actionsIcon" data-v-2d574709 data-v-8eb4ccae><button type="button" aria-label="その他" data-tooltip="その他" class="a-icon a-icon--more a-icon--size_medium" data-v-2d574709></button> </div></div></div></div>   <div class="p-article__creator" data-v-8a71fdf2><div class="o-creatorProfile" data-v-30cada24 data-v-8a71fdf2><aside aria-label="プロフィール" class="m-creatorProfile o-creatorProfile__profile" data-v-6f313185 data-v-30cada24><div class="m-creatorProfile__avatar" data-v-6f313185><a href="/najeira" aria-hidden="true" data-v-6f313185="" class="a-link fn" data-v-6f313185><div class="m-avatar m-avatar--xlarge" data-v-5c1c7fdc data-v-6f313185><img src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%2267%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23f7f9f9%22%2F%3E%3CanimateTransform%20attributeName%3D%22gradientTransform%22%20type%3D%22translate%22%20from%3D%22-1%200%22%20to%3D%221%200%22%20begin%3D%220s%22%20dur%3D%221.5s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22rect%22%20fill%3D%22url(%23a)%22%20d%3D%22M-100-100h300v300h-300z%22%2F%3E%3C%2Fsvg%3E" data-src="https://assets.st-note.com/production/uploads/images/5843702/profile_de4f50223970e44ffaa5689ca38ee76f.jpg?width=80&height=80&dpr=2&crop=1:1,smart" alt="najeira" decoding="async" loading="lazy" width="56" height="56" class="a-image m-avatar__image lazyload" data-v-50e2377b data-v-5c1c7fdc></div></a></div> <div class="m-creatorProfile__body" data-v-6f313185><div class="m-creatorProfile__header" data-v-6f313185><div class="m-creatorProfile__name flex flex-col md:flex-row md:gap-x-1 md:items-center" data-v-6f313185><a href="/najeira" data-v-6f313185="" class="a-link fn" data-v-6f313185> najeira </a> </div> <div class="m-creatorProfile__follow" data-v-6f313185><span class="m-follow" data-v-0e7a0622 data-v-6f313185> <span class="is-clickable" data-v-0e7a0622><span data-v-0e7a0622 data-v-6f313185><button data-type="primary" data-size="small" data-disable-focus="false" type="button" data-v-6f313185="" class="a-button" data-v-0e7a0622 data-v-76f5188b><div class="a-button__inner" data-v-76f5188b> フォロー </div></button></span></span></span></div></div> <div class="m-creatorProfile__description" data-v-6f313185><div class="m-creatorProfile__introduction" data-v-6f313185><div class="m-creatorProfile__profile" data-v-6f313185><span data-v-6f313185>Software developer。Google Cloud(特にApp Engine)とFlutterのGoogle Developers Expert。好きな言語はGo。他Flutter/Dart, Android, iOS, Python。</span> </div> <div class="m-creatorProfile__aside" data-v-6f313185><div class="m-creatorProfile__social" data-v-6f313185><ul class="m-creatorSocialLinks" data-v-d605938e data-v-6f313185><li class="m-creatorSocialLinks__item" data-v-d605938e><a href="https://twitter.com/najeira" target="_blank" rel="noopener noreferrer" aria-label="X（Twitter）アカウント" data-tooltip="X（Twitter）アカウント" data-v-d605938e="" class="a-link fn" data-v-d605938e data-v-5da4ae22><i aria-hidden="true" class="a-icon a-icon--x a-icon--size_medium" data-v-d605938e></i></a></li><li class="m-creatorSocialLinks__item" data-v-d605938e><a href="/najeira/rss" target="_blank" rel="nofollow noopener noreferrer" aria-label="RSSのURL" data-tooltip="RSSのURL" data-v-d605938e="" class="a-link fn" data-v-d605938e data-v-5da4ae22><i aria-hidden="true" class="a-icon a-icon--rss a-icon--size_medium" data-v-d605938e></i></a></li> </ul></div></div></div></div></div></aside></div></div></article></div> <div data-v-8a71fdf2><div class="p-article__extraItemContainer" data-v-8a71fdf2><div class="a-loadingDots my-8" data-v-67ce1e68 data-v-8a71fdf2><div class="a-loadingDots__item a-loadingDots__item--color_black a-loadingDots__item--size_medium" data-v-67ce1e68></div><div class="a-loadingDots__item a-loadingDots__item--color_black a-loadingDots__item--size_medium" data-v-67ce1e68></div><div class="a-loadingDots__item a-loadingDots__item--color_black a-loadingDots__item--size_medium" data-v-67ce1e68></div></div> </div> </div>  <div class="p-article__sideCreatorInfo" style="top:44px;" data-v-8a71fdf2></div></main> </div> <footer class="o-footer o-footer__offset o-footer--article" data-v-27ddcb3e><ul class="o-footer__menu" data-v-27ddcb3e><li class="o-footer__item" data-v-27ddcb3e><a href="https://premium.lp-note.com" target="_self" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e data-v-5da4ae22> noteプレミアム </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="https://pro.lp-note.com/?utm_source=notecom&utm_medium=footer" target="_blank" rel="noopener" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e data-v-5da4ae22> note pro </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="https://help-note.com/hc/ja" target="_self" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e data-v-5da4ae22> よくある質問・noteの使い方 </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="https://note.jp/n/nd65ead4182a6" target="_blank" rel="noopener noreferrer" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e data-v-5da4ae22> プライバシー </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/najeira/message" rel="nofollow" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> クリエイターへのお問い合わせ </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="https://help-note.com/hc/ja/requests/new?ticket_form_id=360000081181" target="_blank" rel="nofollow noopener noreferrer" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e data-v-5da4ae22> フィードバック </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/terms" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> ご利用規約 </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/terms/paid_point" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> 通常ポイント利用特約 </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/terms/seller_creators" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> 加盟店規約 </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/terms/payment_service_act" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> 資⾦決済法に基づく表⽰ </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/najeira/terms/specified" rel="nofollow" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> 特商法表記 </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/terms/investment_disclaimer" data-v-27ddcb3e="" class="a-link o-footer__link fn" data-v-27ddcb3e> 投資情報の免責事項 </a></li></ul> </footer></div>    </div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ){aG.id="admin";aG.value="管理者";aH.id="member";aH.value="メンバー";return {layout:"default",data:[{},{completed:f}],fetch:{"data-v-7f26520d:0":{completed:f,devicePixelRatio:h}},error:a,state:{protocol:"https",currentHost:E,currentDomain:E,prefetchData:{infoTrendMessages:[],userPopup:a,uuid:"3073b225-8f2e-48bd-8882-37e6322f05c9",tid:"69bad29c781bd69f7d3a45466fb85cad",isDeprecatedDevice:b},childStyles:[],categoryTimeline:{categoryId:d,notes:[],pages:{firstPage:a,lastPage:a,nextPage:a},loading:b,deleteLoading:b,error:a},circleIndex:{trends:{totalCount:l,isLastPage:b,circles:[],page:g},latest:{totalCount:l,isLastPage:b,circles:[],page:g},follows:{totalCount:l,isLastPage:b,circles:[],page:g},pickups:{totalCount:l,isLastPage:b,circles:[],page:g},category:{totalCount:l,isLastPage:b,circles:[],page:g}},contentsUpdate:{contentsUpdates:[]},coupon:{appliedCoupon:a,errored:a},creator:{urlname:j},datasetSettings:{datasetGroupKey:a,dataset:{key:"YcCJmfkKZhbYmNreDzyb7OrfEBj12kr0",name:c,sort:"desc",isCustom:b},datasetContainers:[],datasetContents:[],categoryOption:{kinds:[],categories:[]}},feature:{currentUserFeatures:{},guestUserFeatures:{graphqlViewer:"ON",pointCampaign202412CurrentUsers:k,pointCampaign202412GuestUsers:F,categoryTravelAaShadow202501:k,membershipJoinPage:k,membershipJoinPageEnabled:G,topicsAiSectionAbTest202502:k,notePostingButtonAb:k,supportWordingEnabled:G}},feedbackReport:{sentLogs:{Note:new Map([]),User:new Map([])},requesting:b},flashMessage:{isVisible:b,text:c,type:"success",url:e},follow:{},footer:{showFooter:f,isCreatorPage:b},hashtagTimeline:{notes:[],pages:{firstPage:a,lastPage:a,nextPage:a},hashtagCount:d,relatedHashtags:[],relatedContests:[],hashtagId:a,loading:b,deleteLoading:b,currentHashtag:a,currentFilter:a,currentIsPaidOnly:b,error:a,layoutInfraSectionKeys:[]},homeTimeline:{notes:[],horizonSections:[],pages:{firstPage:a,lastPage:a,nextPage:a,nextSinceCreatedAt:a},deleteLoading:b,firstPageLoaded:b,error:a,interestedThemes:[],interestedThemeGroupName:F},homeTimelineFollowing:{notes:[],nextSinceCreatedAt:a,isLast:b,firstPageLoaded:b},libraryTimeline:{notes:[],pages:{firstPage:a,lastPage:a,nextPage:a,currentPage:a},deleteLoading:b,error:a,cancelRequest:{liked:a,purchased:a,viewed:a}},like:{dispatches:[],isNoteLiker:b,visibleLikeOnBoarding:b,visibleCount:d},magazineCreate:{magazine:{name:c,description:c,message:c,status:s,price:d,isFreeSubscribe:b,frequency:g,layoutType:"list",categories:[a,a,a]},coverImage:a,coverImageCanvaId:a,magazineType:"free",priceSubscribable:500,priceSingle:100,touched:{priceSubscribable:b,priceSingle:b,freeSubscription:b}},magazineHavingNote:{magazines:[],lastPage:b},magazineIndex:{recommendedMagazine:{free:a,paid:a,subscription:a,official:a,pro:a,magazineOfTheDay:a},followeeMagazines:[]},magazineList:{note:a,noteIdAddedToMagazine:a,locationAddedToMagazine:c,myMagazineData:{limitedNoteIncludedMagazineKey:a,limitedNoteIncludedMagazineKeys:[],magazines:[]}},magazineManage:{magazines:[],page:{lastPage:b,nextPage:a},currentSort:a,error:a},membershipList:{membershipPermissions:[]},metadata:{customDomain:a,data:{title:H,description:t,ogSiteName:I,ogUrl:m,ogTitle:H,ogDescription:t,ogImage:u,ogType:"article",twitterSite:"@note_PR",twitterCard:"summary",twitterAppUrlIphone:"note:\u002F\u002Fnote\u002Fn8924408dd07b",twitterAppUrlGoogleplay:"note.mu:\u002F\u002Fnote\u002Fn8924408dd07b",rssUrl:a,structuredData:[{"@context":J,"@type":"BlogPosting",mainEntityOfPage:m,headline:v,keywords:"Flutter",datePublished:K,dateModified:"2021-09-11T11:11:17.000+09:00",author:{"@type":"Person",name:j,url:L},publisher:{"@type":"Organization",name:I,logo:{"@type":M,url:"https:\u002F\u002Fassets.st-note.com\u002Fpoc-image\u002Fmanual\u002Fproduction\u002Flogo_202212.png",width:"216",height:"55"}},image:{"@type":M,url:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843629\u002F177619fd4ffba1fb4b605a20b0ef08ea.jpg",width:p,height:q},description:t},{"@context":J,"@type":"BreadcrumbList",itemListElement:[{"@type":w,position:g,item:{"@id":n,name:x}},{"@type":w,position:h,item:{"@id":L,name:j}},{"@type":w,position:y,item:{"@id":m,name:v}}]}],customDomain:a,proUserId:a,isNoindex:b,nonCdProUserConfig:a,customThemeColorCode:c,topicConfig:a,thumbnail:u,canonical:m},error:a,proUserId:a},mkTopic:{urlMap:{}},modal:{mountedModals:[],isOpen:b,deleteConfirmModal:{object:a,type:c,name:c,submitCallback:a,itemCount:a},magazineHavingModal:{note:a},magazineListModal:{note:a,location:c,headerTitle:c},magazineSuspendModalContainer:{magazine:a},magazineSuspendedAt:new Date(1743346800000),magazineDescriptionModal:{magazine:a},magazineUnsubscribeModal:{magazine:a},magazineUnsubscribeConfirmModal:{magazine:a},magazineEditCompletedModal:{magazine:a},magazineEditModalContainer:{editor:a,role:c,isBack:b},moveAccountModal:{note:a},creatorQrCodeModal:{user:a,isLink:b},pickUrlnameModal:{via:c,closeCallback:a},basicMessageModal:{actionType:c,submitCallback:a,closeCallback:a,disableBackdrop:b},violationModal:{user:a,note:a,comment:a,boardPost:a,magazine:a,circle:a,context:c},sectionFeedbackModal:{user:a,hashtagId:d,submitCallback:e},loginOrSignupModal:{type:c,targetName:e,content:e,subscribeMagazineConversion:e,membershipConversion:e},likerModal:{likableType:c,likableId:a,likeCount:a,likableKey:a,anonymousLikeCount:a},boardLikerModal:{postKey:a},magazineEditorModal:{magazine:a},userPopupModal:{title:c,message:c,subMessage:c,mainText:c,subText:c,count:a,image:c,type:c,note:a,magazine:a,circle:a,boardPost:a,linkPath:c},purchaseModalContainer:{actionType:c,withSupport:b,supportPrice:d,supportPriceKind:c,supportMessage:c,nextPageDisableFollow:b,withFollow:f,paymentMethod:c,creatorMessage:c,creatorImage:a,messageDisplayOptions:a,guestAuthorizationNumber:a,premiumPlan:a,via:a},embedModal:{embedNoteUrl:c,embedNoteScript:c},imageCropModal:{imageFile:a,submitCallback:a,cropImageType:c,submitButtonLabel:e},noteEditTalkNoteModal:{note:a},noteEditImageNoteModal:{note:a},noteEditSoundNoteModal:{note:a},noteEditMovieNoteModal:{note:a},finishPostNoteModal:{closeCallback:a},notifyUpdateModal:{closeCallback:a},dateSelectModal:{startDate:c,endDate:c},magazineArrangeModal:{magazineKey:c},amazonGiftCodeModal:{amazonGiftTransferKey:c},anyMessageModal:{message:c,closeCallback:a},previewLinkModal:{previewLink:c,hasError:b},creatorWidgetModal:{canEdit:b,isEdit:b,submitCallback:a,urlname:c,widget:{}},badgeModal:{winContests:[]},customMenuModal:{menu:a,menus:[],submitCallback:a},customLinkModal:{customLink:a,customLinks:[],submitCallback:a},draftNoteEditConfirmModal:{note:a,noteDraft:a},sendNoteMailModal:{note:a},receiptModal:{datespan:c,paymentKey:c},refundModal:{title:c,paymentKey:c},transferRequestModal:{unpaidSalesTotal:d,unpaidSalesTotalActually:d},thanksMessageModal:{messages:[],price:d,purchaseContentId:a,user:{},submitCallback:a},siteSettingsBadgeModal:{badge:a,initCallback:a},subscribeMembershipPlan:{plan:a},subscribeMembershipPlanComplete:{plan:a,thanksMessage:c,closeCallback:a},unsubscribeMembershipPlan:{plan:a,owner:a,unsubscribeCallback:a},membershipMemberDetail:{member:a},membershipMemberKick:{member:a},membershipMemberCancelKick:{member:a},membershipMemberRevive:{member:a},circleCommentDelete:{boardKey:c,postKey:c,deleteCallback:a},suspendMembershipPlan:{plan:a},circleMembers:{lastPosition:c,totalCount:d,visibleCount:d,invisibleCount:d,isFollowing:b,members:[],followCallback:e},membershipPlanSelect:{plans:[]},membershipInvitation:{plans:[],isFree:b,isUrlGenerate:b},membershipInvitationUrl:{url:c},contentsUpdates:{contents:[]},confirm:{title:c,message:c,disableBackdrop:b,closeText:e,submitText:e,submitButtonType:e,closeCallback:e,submitCallback:e},commentAcknowledgement:{submitCallback:e},stockPhotoBlockConfirm:{submitCallback:e},urlnameConfirmModal:{currentUrlname:c,newUrlname:c},objectionClaim:{contentType:c,contentId:a,contentKey:c},premiumSuspendModalContainer:{premium:a},premiumSubscribeModal:{premiumPlan:a},shareBoosterModal:{note:a,context:c,shareCallback:e,referrerQueryParams:e},reservedNoteModal:{publishAt:a,closeCallback:e},creatorGalleryImageModal:{image:a},googleSignupModal:{authEmailRedirectPath:e},twitterSignupModal:{authEmailRedirectPath:e},appleSignupModal:{authEmailRedirectPath:e},magazineCouponDelete:{magazineKey:c,couponCode:c},userImageSelectorModal:{saveOnServer:b,handleSaveLocal:e},displayedFromURL:{isOpen:b,once:b},wrapUpPublishingModal:{okCallback:e},magazineShareModal:{magazine:a},membershipListModal:{note:a},confirmMembershipPlanModal:{submitCallback:e},membershipMagazinesAddModal:{membership:a,submitCallback:e,isPreventInit:b},membershipShareModal:{membership:a,startOfFreeTrialPeriod:a,closeCallback:e},membershipPlanApplyModal:{closeCallback:e},alertModalForJointlyManagedMagazine:{callback:e,closeCallback:e},commonAddNoteModal:{note:a,location:c},deactivateMfaModal:{closeCallback:a},firstNoteShareModal:{note:a},completeSuspendedMembershipPlanModal:{plan:a},surveyModalForSuspendMembershipPlan:{plan:a},planSimulationModal:{callback:e,uuid:c},flexibleContentModal:{content:a,editableFields:[],submitCallback:a}},navbar:{showNavbar:f,navbarHeight:d,navbarMessageHeight:d,isCreatorProfileVisibleOrAbove:b},noteEdit:{note:{},magazines:[],magazineDisplays:[],settings:{hashtags:[],enableComment:f,enableSendNotifications:f,suggestedHashtags:[],openedContests:[],magazineIds:[],magChecks:{},reserved:b,reserve:{yearMonth:a,day:a,time:a},externalDistribution:{enabled:f,code:a},userFeatures:[],ogp:b,metaDatum:{},limited:b,publishAt:a,isFreeInPaidMagazine:b,isFreeInMembership:b,authorIds:[],enableIndex:b},postSettings:{},reservation:{},availableReservationPeriod:{},errors:{priceSetting:{},priorSaleSetting:{},contestHashtags:{invalid:b},themeHashtags:{invalid:b},contestLightHashtags:{invalid:b},normalHashtags:{invalid:b,message:c}},user:a,memberships:[],excludeFromCreatorTop:b},noteIndex:{notes:[],isLastPage:b,page:g},noteList:{notes:[],page:{pageCount:g,pageIndex:g,totalCount:d,isLastPage:b},magazines:[],noteArchivesSelects:[],deleteLoading:b,editCompleted:b,dateRange:{startDate:c,endDate:c},queryObj:{},isOwnerList:b,cancelRequest:[]},owners:{owners:[],settings:{}},purchase:{note:a,magazine:a,circlePlan:a,successed:a,errored:a,conversionKind:a,conversionContentKey:a,guest:{paymentMethod:"creditCard",mail:c,card:{no:a,cvc:a,name:a,expiryMonth:a,expiryYear:a},hasConfirmed:b,amazonCheckoutSessionID:c,amazonpayPayload:c,amazonpaySignature:c,amazonpayPublicKeyId:c,amazonpayDisabled:b},creator:a,circlePlanThanksMessage:a,beforePurchasingPlace:c,circlePlans:[],discountCampaignKey:e,pointUsageEnabled:b,pointBalance:a,pointsToUse:d,rewardPoints:d,campaignStatus:{inCampaignPeriod:b,promotionalText:c}},quickLook:{isActive:b,type:"creator",data:a,targetRect:a,currentUid:a,timer:a},recommendationEvents:{recommendedUsers:[],topicFollowedNotes:a},recommendTimeline:{error:a,editorPickups:[],editorPickupPage:d,editorPickupIsLast:b},session:{ccd:"f1f93084ff6dedd26a7afcd4c446a886519e9e49d1586055a5b525585b2b83d2",lsCCD:a,gaUid:c,cookies:[],new:f,ccdAck:b,lsDisabled:b},tracking:{pvUuid:c,prevPvUuid:c},url:{currentBaseUrl:n,currentHeadUrl:n,currentNoteBaseUrl:n,currentNoteHeadUrl:n},user:{current:e,currentGuest:a,creditcard:{no:a,cvc:a,expiryMonth:a,expiryYear:a,name:a},tdsChallengeUrl:e,errored:a,userImageSelector:{selectedOwnImageUrl:e,selectedOwnImageKey:e},guestExperiments:{},canPurchaseNoteWithPoint:b},userFollow:{},webPush:{messaging:a,permission:a},webview:{noteDevice:a,noteAccessToken:a,noteGuestAccessToken:a,routeName:"urlname-n-key",noteDeviceId:c,noteDeviceInfo:c},topic:{topic:a,currentPage:a,pages:a,sections:a,tree:a,errored:b,isFollowing:b,routeName:a,layoutInfraSectionKey:a,pageNumber:e,contentsModal:{data:a,contentType:N,componentType:z,allowContentType:o,selectedContentTypeChildren:new Map([]),initContents:[],currentContents:[],isOfficial:b,isFetching:b,hashtagName:c,categoryNotesChildOptions:[],noteKeywordChildOptions:[],isTopicAdminUser:f,customLinks:[]},sectionModal:{data:a,name:a,sort:O,displayCount:g,displayType:P,displayCountOptions:[{id:g,value:g},{id:h,value:h},{id:y,value:y},{id:Q,value:Q},{id:A,value:A},{id:i,value:i},{id:R,value:R},{id:S,value:S},{id:B,value:B},{id:T,value:T},{id:U,value:U},{id:V,value:V},{id:W,value:W},{id:X,value:X},{id:C,value:C},{id:Y,value:Y},{id:Z,value:Z},{id:_,value:_},{id:$,value:$},{id:aa,value:aa},{id:ab,value:ab},{id:D,value:D},{id:ac,value:ac},{id:ad,value:ad},{id:ae,value:ae},{id:af,value:af},{id:ag,value:ag},{id:ah,value:ah},{id:ai,value:ai},{id:aj,value:aj},{id:ak,value:ak},{id:al,value:al},{id:am,value:am},{id:an,value:an},{id:ao,value:ao},{id:ap,value:ap},{id:aq,value:aq},{id:ar,value:ar},{id:as,value:as},{id:at,value:at},{id:au,value:au},{id:av,value:av},{id:aw,value:aw},{id:ax,value:ax},{id:ay,value:ay},{id:az,value:az},{id:aA,value:aA},{id:aB,value:aB},{id:aC,value:aC},{id:aD,value:aD}],displayTypeOptions:[{id:P,value:"3カラム"},{id:"two_column",value:"2カラム"},{id:"one_column",value:"1カラム"},{id:"horizontal",value:"横スクロール"},{id:"carousel",value:"カルーセル"}],componentTypeOptions:[{id:z,value:"中"},{id:"small",value:"小"}],contentType:N,componentType:z,sortOrder:g,postion:"body"},settingsBasic:{statusOptions:[{id:s,value:aE},{id:r,value:aF}]},settingsMemberModal:{topic:c,user:c,role:c,status:c,topicUsers:[],allRole:[{id:"root",value:"オーナー"},aG,aH],roleOptions:[aG,aH],statusOptions:[{id:"active",value:"有効"},{id:"pending",value:"削除"}]},settingsPageModal:{topic:c,page:c,name:c,tabname:c,urlname:c,description:c,sort:c,layout:c,status:c,statusOptions:[{id:s,value:aE},{id:r,value:aF}]},topicList:{mylist:[]}},pages:{users:{users:[],page:{currentPage:a,nextPage:a,isLastPage:b,totalCount:d}},siteSettings:{stats:{},sales:{},transferHistories:[],badges:[],membershipBadges:[]},signup:{tempAuth:{email:c,nickname:c,provider:c,signupWithAuth:b},guestStatus:c,user:a},search:{searchResult:{notes:{contents:[],topSearchContents:[],isLastPage:b,totalCount:d,roundedTotalCount:d},notesForSale:{contents:[],topSearchContents:[],isLastPage:b,totalCount:d,roundedTotalCount:d},magazines:{contents:[],topSearchContents:[],isLastPage:b,totalCount:d,roundedTotalCount:d},users:{contents:[],topSearchContents:[],isLastPage:b,totalCount:d,roundedTotalCount:d},circles:{contents:[],topSearchContents:[],isLastPage:b,totalCount:d,roundedTotalCount:d},cursor:{note:c,magazine:c,user:c,noteForSale:c}},lastSearchQuery:{q:c},isPaidOnly:b},receipt:{receiptData:a,errorMessage:a},membershipTop:{creator:e,circle:e,circlePlans:[],posts:[],pinnedPosts:[],postsConfig:{lastPosition:d,isLastPage:b,sortUpdatedAt:c,orderKey:c},reservedPosts:[],formChange:b,membershipNotes:[],membershipNotesHashtags:[],members:[],memberConfig:{invisibleCount:d,lastPosition:c,visibleCount:d,totalCount:d},followingMembers:[],membershipNotesConfig:{totalCount:d,nextPage:d,currentPage:d,isLastPage:b},membershipMagazines:[],membershipMagazinesConfig:{totalCount:d,nextPage:d,currentPage:d,isLastPage:b},contents:[],isRedirecting:b,kaizenNotice:e,isMySelfAndNoMembership:b,loadingMap:{notes:b,magazines:b,posts:b,hashtags:b},membershipRecordSummary:e},magazineTop:{magazineLayout:{},currentPage:g,magazineSectionLayoutQuery:{},contentLoading:b,error:a,currentMenuId:a,currentRouteName:c},magazineEdit:{currentEditor:{},originalMagazine:{},magazine:{},magazineChanged:b,editors:[],editorsToDistribute:[],pickedList:[],isInvite:b,sales:{},startDate:a,endDate:a,periodType:c,contentKind:c,contents:{followers:{items:[],currentPage:d,isLastPage:b,totalCount:d},purchasers:{items:[],currentPage:d,isLastPage:b,totalCount:d},subscribers:{items:[],currentPage:d,isLastPage:b,totalCount:d}},error:a,recommendedMagazines:a},creatorTop:{creatorLoaded:b,creatorContentLoaded:b,creator:a,nourlnameCreator:a,popularNotes:{items:[],isLastPage:b,totalCount:d,start:d,size:g},popularNotesForSale:{items:[],isLastPage:b,totalCount:d,start:d,size:g},contents:{likes:{items:[],isLastPage:b,totalCount:d},magazine:{items:[],isLastPage:b,totalCount:d},paid_note:{items:[],isLastPage:b,totalCount:d},note:{items:[],isLastPage:b,totalCount:d},rss_store:{items:[]},user_jobs:{items:[]}},circle:{circle:a,plans:a,members:a,note:a,board:a,pinnedPosts:[],kaizenNotice:a,noCircleKaizenNotice:a,formChange:b,error:c,followingMembers:[]},follows:{type:c,items:[],isLastPage:b,totalCount:d,page:d,perPage:d},archives:[],contentQuery:{likes:{kind:"likes",per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},note:{kind:x,per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},paid_note:{kind:x,per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:f},magazine:{kind:"magazine",per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},rss_store:{kind:"rss_store",per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},user_jobs:{kind:"user_jobs",per:i,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b}},pickupContents:{archives:[],categoryNoteCounters:[],creatorWidgets:[],magazines:[],rssStoreItems:[],widgetSettings:[]},menus:[],hasAdditionalMenu:b,hasAdditionalTopicPreview:b,currentMenu:{id:d,kind:c,name:c},archivePageDate:c,recommendUsers:[],customLinks:[],socialLinks:{facebookPageLink:{id:a,url:a},websiteLink:{id:a,url:a},instagramLink:{id:a,url:a},youtubeLink:{id:a,url:a},lineLink:{id:a,url:a}},topic:{urlname:c,name:c,description:c,url:c,status:r,isTopicUser:b,currentPage:{urlname:c,name:c,tabname:c,description:c,sort:g,isTop:b,layout:c,status:r,urlPath:c}},recommneded:{notes:[]},creatorWidgets:[],primarySubscribableMagazine:e,psmPurchasingInfo:e,psmSubscription:e,membershipNotes:[],usersInRelationship:e,membershipRecordSummary:e,const:{}},creatorGallery:{images:[],allOrShared:o,period:o,page:g,isLastPage:b,cancelRequest:{imageFilter:{allOrShared:o,period:o},cancel:a},error:a},contestList:{contests:[],contestGroup:{name:c,description:c,contests:[]},cancelTokenSource:e},categoryList:{categories:[],followingCategories:[],magazineCategories:[]},activate:{isActivated:b,message:c},magazineCoupons:{coupons:{null:[]},error:a,const:{}},noteDetail:{data:{commentCount:d,comments:[],id:3552260,userId:aI,status:O,type:"TextNote",key:"n8924408dd07b",slug:"slug-n8924408dd07b",name:v,body:"\u003Cp name=\"oc5A4\"\u003EFlutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。\u003C\u002Fp\u003E\u003Cp name=\"SAxZ9\"\u003EThe English version is on \u003Ca href=\"https:\u002F\u002Fmedium.com\u002Fgoogle-developer-experts\u002Fusing-flutter-in-a-real-life-application-with-100k-downloads-ab64ecd8e03f\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EMedium\u003C\u002Fa\u003E!\u003C\u002Fp\u003E\u003Ch2 name=\"MnM3b\"\u003EFlutter について\u003C\u002Fh2\u003E\u003Cp name=\"A1FcN\"\u003E\u003Ca href=\"https:\u002F\u002Fflutter.io\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EFlutter\u003C\u002Fa\u003E は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。\u003C\u002Fp\u003E\u003Ch2 name=\"hyVs8\"\u003E特徴\u003C\u002Fh2\u003E\u003Cp name=\"wop9J\"\u003E- 言語は Dart\u003Cbr\u003E- フルスタックのUI framework (Material and iOS)\u003Cbr\u003E    - Reactive (inspired by React)\u003Cbr\u003E    - Material and iOS\u003Cbr\u003E    - GPU を利用して UI を描画するところまで全て (\u003Ca href=\"https:\u002F\u002Fskia.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003ESkia\u003C\u002Fa\u003E)\u003Cbr\u003E- オープンソース on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EGitHub\u003C\u002Fa\u003E\u003Cbr\u003E    - developed by Google and community\u003Cbr\u003E- ネイティブのARMコードにコンパイル\u003Cbr\u003E- 開発用プラグイン\u003Cbr\u003E    - IntelliJ, Visual Code Studio, Android Studio もサポート\u003Cbr\u003E    - IntelliJ で IDEデバッグ\u003Cbr\u003E- ホットリロード\u003Cbr\u003E- ベータ版 (2018\u002F02\u002F28現在)\u003C\u002Fp\u003E\u003Cp name=\"Y6pLN\"\u003E技術的な詳細については、本記事の趣旨ではないので省略します。また別途、書きたいと思います！\u003C\u002Fp\u003E\u003Cp name=\"JxnuH\"\u003E\u003Cb\u003E参考リンク\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"iJKFu\"\u003E- \u003Ca href=\"https:\u002F\u002Fflutter.io\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E公式サイト flutter.io\u003C\u002Fa\u003E\u003Cbr\u003E- \u003Ca href=\"https:\u002F\u002Fmedium.com\u002Fflutter-io\u002Fannouncing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EAnnouncing Flutter beta 1: Build beautiful native apps\u003C\u002Fa\u003E\u003Cbr\u003E- \u003Ca href=\"http:\u002F\u002Fkonifar.hatenablog.com\u002Fentry\u002F2018\u002F02\u002F01\u002F015601\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EFlutterでDroidKaigi 2018のiOSアプリを作りました\u003C\u002Fa\u003E\u003Cbr\u003E- \u003Ca href=\"https:\u002F\u002Fspeakerdeck.com\u002Fnajeira\u002Fiosliang-dui-ying-falseapurikai-fa-2\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EFlutterでAndroid\u002FiOS両対応のアプリ開発 Google Developers Group DevFest 2017 Tokyo\u003C\u002Fa\u003E\u003Cbr\u003E- \u003Ca href=\"http:\u002F\u002Fjp.techcrunch.com\u002F2018\u002F02\u002F28\u002F2018-02-27-googles-flutter-ui-framework-is-now-in-beta\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EDart言語によるモバイルアプリ(iOS\u002FAndroid)開発フレームワークFlutterがベータを開始\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp name=\"YrlWK\"\u003Eまた、Android をお使いの方は \u003Ca href=\"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=io.flutter.demo.gallery&rdid=io.flutter.demo.gallery\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EFlutter 公式のサンプルアプリ\u003C\u002Fa\u003E をインストールして触ってみると、用意されている UI がなんとなくつかめると思います。\u003C\u002Fp\u003E\u003Ch2 name=\"j3AHt\"\u003Eアプリについて\u003C\u002Fh2\u003E\u003Cp name=\"WwJvD\"\u003ECARTUNEというクルマ好きのためのアプリを作りました ( \u003Ca href=\"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=me.cartune.android\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EAndroid\u003C\u002Fa\u003E \u002F \u003Ca href=\"https:\u002F\u002Fitunes.apple.com\u002Fjp\u002Fapp\u002Fid1221199655?mt=8\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EiOS\u003C\u002Fa\u003E )。以下、いくつかスクリーンショットです。\u003C\u002Fp\u003E\u003Cp name=\"Fwaus\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843629\u002Fpicture_pc_177619fd4ffba1fb4b605a20b0ef08ea.jpg\" width=\"480\" height=\"853\" class=\"\" style=\"width: 288px; height: 511.8px; \" loading=\"lazy\"\u003E\u003C\u002Fp\u003E\u003Cp name=\"F39yV\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843630\u002Fpicture_pc_3ff1a05a02ec04ada3801ae9a14bfed8.jpg\" width=\"480\" height=\"853\" style=\"width: 288px; height: 511.8px;\" class=\"\" loading=\"lazy\"\u003E\u003C\u002Fp\u003E\u003Cp name=\"ugjin\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843773\u002Fpicture_pc_4e443cecdf92029c71ecbf8cb6c63823.jpg\" width=\"480\" height=\"853\" class=\"\" style=\"width: 288px; height: 511.8px;\" loading=\"lazy\"\u003E\u003C\u002Fp\u003E\u003Cp name=\"SHPYA\"\u003E赤いツールバーなのが Android 版のデザイン。下タブなのは iOS 版のデザイン。ただしスクリーンショットは両方共 Android 実機で撮影しています（フラグで切り替えているだけ）。\u003C\u002Fp\u003E\u003Cp name=\"kgsC7\"\u003E\u003Cb\u003E参考リンク\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"qCYSt\"\u003E- \u003Ca href=\"http:\u002F\u002Fjp.techcrunch.com\u002F2018\u002F01\u002F10\u002Fmichael-cartune\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E「MixChannel」生みの親の新たな挑戦は“車”のコミュニティ「CARTUNE」、1.1億円の調達も | TechCrunch Japan\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2 name=\"q6aF0\"\u003E検討および採用の経緯\u003C\u002Fh2\u003E\u003Cp name=\"84Qk4\"\u003Eアプリを開発するにあたり、素早い開発のために、Android \u002F iOS に両対応したクロスプラットフォームの開発SDKを使うことにしました。Android \u002F iOS のどちらも開発経験がありますが、やはり少人数で両 OS 向けに別々に開発するのは大変です。\u003C\u002Fp\u003E\u003Cp name=\"KVhZ1\"\u003Eそこで、Flutter \u002F React Native \u002F Xamarin を検討しました。最終的に Flutter を採用しましたが、以下のようにいくつかのポイントがありました。\u003C\u002Fp\u003E\u003Cp name=\"0NJLl\"\u003E\u003Cb\u003E言語(Dart)\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"q1Rb2\"\u003EFlutter は Dart を使ってアプリを書きます。第一印象は Java っぽいと感じました。静的な型付けですし、async \u002F await があって非同期処理が書きやすそうだと思いました。\u003C\u002Fp\u003E\u003Cp name=\"DsZ6n\"\u003E個人的には JavaScript はちょっと書きたくないな……と思っていたので、Dart は好印象でした。\u003C\u002Fp\u003E\u003Cp name=\"HRMcb\"\u003Eなお Xamarin で使われている C# もいい言語だと思います。\u003C\u002Fp\u003E\u003Cp name=\"kspQJ\"\u003E\u003Cb\u003Eパフォーマンス\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"NqKSL\"\u003Eパフォーマンスに関しては、どの SDK も問題になることはないかな、という印象です。\u003C\u002Fp\u003E\u003Cp name=\"FRZn6\"\u003EFlutter は Android \u002F iOS ともネイティブの ARM コードにコンパイルされます。また、公式が提供している Flutter Gallary を触ってみて、パフォーマンスに問題がなさそうだという感触を得ました。\u003C\u002Fp\u003E\u003Cp name=\"49Fb9\"\u003EReact Native は UI はネイティブですが、JavaScript が動作する部分があるのが少し気になりました。ただ、世の中のアプリを触った限りではパフォーマンスは気にならなかったので、多くの場合では問題にはならないとも思いました。\u003C\u002Fp\u003E\u003Cp name=\"EWGOV\"\u003EXamarin は iOS はネイティブにコンパイルですが、Android は Mono VM が動作するそうです（ここがネイティブ・コンパイルだったら、もう少し詳しく検討しましたが……）。\u003C\u002Fp\u003E\u003Cp name=\"9XEZN\"\u003E\u003Cb\u003EReactive\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"QKHqi\"\u003EFlutter は React からインスパイアされていて Reactive フレームワークです。以前から UI の開発がしやすそうだと Reactive Native が気になっていましたし、Flutter も同様に良さそうだと思いました。\u003C\u002Fp\u003E\u003Cp name=\"7klXZ\"\u003E\u003Cb\u003EBuilt-in Widgets\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"Zdl0d\"\u003EFlutter は多種多様な UI Widgets をフレームワーク自身が持っています。\u003C\u002Fp\u003E\u003Cp name=\"MmAfz\"\u003EReact Native と Xamarin はネイティブの UI を使う方式（ですよね？）。\u003C\u002Fp\u003E\u003Cp name=\"LmNUl\"\u003Eこのため Flutter では各 OS 間の差異が UI に関しては無く（意図して Android \u002F iOS で挙動や見た目を変えている箇所はあります）プラットフォームごとの違いに苦悩することが減りそうだという期待がありました。\u003C\u002Fp\u003E\u003Cp name=\"ndcrB\"\u003E\u003Cb\u003Eエコシステム\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"DLVKV\"\u003E検討していた頃（2017年の夏）は Flutter のライブラリ等はかなり少なく、必要に応じて自分で実装する必要がある状況でした。ただ、Flutter の Widgets は非常に充実しており、UI の実装においてはそれらを組み合わせればよく、特に困らないだろうと思われました（現時点では、その通りの状況です）。\u003C\u002Fp\u003E\u003Cp name=\"6ZSUr\"\u003EReact Native は利用している開発者も多いですし、ライブラリも多いのはとても魅力的でした。\u003C\u002Fp\u003E\u003Cp name=\"lY29a\"\u003EXamarin は、かなり昔に小さなアプリを試しに作った時に NuGet で苦戦した記憶がありますが、詳しくはわかりません。\u003C\u002Fp\u003E\u003Cp name=\"DXnM5\"\u003E\u003Cb\u003Eネイティブ連携\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"ZievQ\"\u003Eどうしても Flutter では実現できない機能が出てきた時に、ネイティブ側のコードで解決できるかどうかを調査しました。\u003C\u002Fp\u003E\u003Cp name=\"7ycaY\"\u003EFlutter ではプラットフォーム固有の機能（カメラや位置情報など）はプラットフォーム側の機能を呼び出す必要があります。その場合はプラットフォーム・ネイティブ（Android なら Java、iOS なら ObjC \u002F Swift）で実装することになります。この場合はプラットフォーム標準の開発と同様ですから、世にあるライブラリも使いたいものを使うことができます。\u003C\u002Fp\u003E\u003Cp name=\"8pBwa\"\u003Eまた Flutter 自体がプラットフォーム・ネイティブの世界では全画面表示になっているひとつの View です（この View を通じて GPU で Flutter UI が描画される）。ハイブリッドっぽく、一つの画面に Flutter とプラットフォーム・ネイティブの UI を混在させることが出来ることを、試しに実装して確認しました。この混在させる方法は使わないほうがよく、プロダクトでは使ってはいませんが、出来るかどうかだけは確認しました。\u003C\u002Fp\u003E\u003Cp name=\"2ozrL\"\u003Eいざとなったら、このプラグイン機構でプラットフォーム側の実装をRPC的に呼び出せば、なんとでも実装できるという最終手段があるのは重要なポイントでした。\u003C\u002Fp\u003E\u003Ch2 name=\"V5WyJ\"\u003E感想\u003C\u002Fh2\u003E\u003Cp name=\"7R4bU\"\u003E\u003Cb\u003EUI building\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"j7vpi\"\u003EFlutter は Dart のコードで Widgets tree を作ることで UI を定義します。これは、とても快適です。コードなので、条件に応じて UI を切り替えるといったことも簡単です。\u003C\u002Fp\u003E\u003Cp name=\"EWqp6\"\u003EUI は Flutter が完全にコントロールしているので、OS ごとの差異で苦労することもありませんでした。一部の UI は Android \u002F iOS で違うデフォルト値を持っていて（例えばツールバーの中央寄せ(iOS)、左寄せ(Android)や、画面遷移のトランジションなど）、それぞれのプラットフォーム標準の見た目や動作に近くなるようになっていますが、プロパティを明示すれば統一することができます。\u003C\u002Fp\u003E\u003Cp name=\"yPzVG\"\u003EFlutter が提供している Widget も豊富で、それらの組み合わせで UI が作れるので、サードパーティの UI ライブラリ的なものは必要ありませんでした。\u003C\u002Fp\u003E\u003Cp name=\"WEICT\"\u003E\u003Cb\u003Eホットリロード\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"uBYhV\"\u003E公式で謳われている「高速なホットリロード」は、本当に誇張なしに1秒以下でリロードできます。\u003C\u002Fp\u003E\u003Cp name=\"ufFar\"\u003E（\u003Ca href=\"https:\u002F\u002Fflutter.io\u002Fimages\u002Fintellij\u002Fhot-reload.gif\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EアニGIFを埋め込めなかったのでこちらから別で開いて御覧ください\u003C\u002Fa\u003E）\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp name=\"eCbKc\"\u003Eこれは小さなサンプルだけでなく、ある程度の規模の実際のプロダクトであっても、1秒以下でリロードされます。レイアウト部分だけでなく、ロジック部分もリロードできます。しかも、状態を保ったまま。場合によってはフルリロードが必要になり、状態はクリアされますが、そのフルリロードでも2秒程度しかかかりません。\u003C\u002Fp\u003E\u003Cp name=\"x2MrF\"\u003Eレイアウトやスタイルを実機で見ながら、少し調整してリロード……というのが手軽なので、デザイン調整もしやすいですし、少しずつ小さな部分から UI を作っていくことができます。最初の頃は Widgets tree から完成が想像しにくかったので、リロードを繰り返しながら作りました。\u003C\u002Fp\u003E\u003Cp name=\"dNMZ9\"\u003E\u003Cb\u003E開発効率\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"2MNeE\"\u003Eアプリ次第で大きく変わるところではありますが、50 - 80% くらいは共通で（つまり Dartで）書けると思います。\u003C\u002Fp\u003E\u003Cp name=\"CcPqa\"\u003ECARTUNE では、画像編集の機能をプラットフォーム側で実装しています（画像選択が Android が Intent、iOS が Photos なのと、OpenCVでナンバープレート検出している）。他には Twitter などの SDK 連携もプラグイン機構でプラットフォーム側で実装しています。それ以外の部分は Dart で Android \u002F iOS ともに共有しています。CARTUNE だと画像編集の実装が大きいのもあり、共有できているDart 部分は \u003Cb\u003E70% \u003C\u002Fb\u003Eほどです。\u003C\u002Fp\u003E\u003Cp name=\"tBwbx\"\u003EUI もロジックもシングルコードベースというのは大きな利点だと思います。\u003C\u002Fp\u003E\u003Cp name=\"OD29O\"\u003Eこれは個々人のスキルセットに依存するのであまり参考にはならないのですが……両 OS を別々で開発するコストが 100 （Android 35、iOS 65）とすると、Flutter であれば 30 - 50 くらいのコストで開発できるのではないかという印象です（あくまで私の開発経験に基づく、個人的な感想です）。\u003C\u002Fp\u003E\u003Cp name=\"mm9xa\"\u003E\u003Cb\u003E課題\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"PRsUO\"\u003Eまだ発展途上なので、不具合はあります。GitHub に登録されている Issues も、記事執筆時点で 2,000 以上あります。\u003C\u002Fp\u003E\u003Cp name=\"seiti\"\u003Eもちろん、開発はアクティブなので、どんどん不具合は修正されたり機能が充実したりしているので、今後はより良くなっていくことは期待できます。自分自身も、いくつかバグに遭遇して、Pull Request を送ったりもしました。\u003C\u002Fp\u003E\u003Cp name=\"um8E6\"\u003Eとはいえっても、まだベータ版ですし、一定以上の規模であれば、何らかのバグに遭遇したりすると思います。安定性という点では、まだプラットフォーム・ネイティブでの開発には及ばないと思います（他のクロスプラットフォーム SDK との比較では、どうなのか分かりません）。\u003C\u002Fp\u003E\u003Cp name=\"rkzWC\"\u003E情報の少なさも課題です。公式サイトやドキュメントは充実していますし、公式サンプルアプリも良い実装例です。そうはいっても、まだまだ足りない部分はあります。\u003C\u002Fp\u003E\u003Cp name=\"CdOuE\"\u003E私の場合は、困ったときは Flutter 内部のコードを読みながら、アプリを開発していました。Flutter の UI framework 部分は Dart で書かれていて、アプリ開発と同じ言語ということもあり読みやすく、Widget の使い方がわからなかったり、挙動で疑問があるときは、Flutter 内部を読んでいます。\u003C\u002Fp\u003E\u003Cp name=\"ev3Qf\"\u003Eあとは、\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Fflutter\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EStackOverflow\u003C\u002Fa\u003E では Googler から回答がもらえたりしますし、私もときどき質問を見ています。\u003Ca href=\"https:\u002F\u002Fgroups.google.com\u002Fforum\u002F#!forum\u002Fflutter-dev\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EGoogle Groups\u003C\u002Fa\u003E や \u003Ca href=\"https:\u002F\u002Fgitter.im\u002Fflutter\u002Fflutter\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EGitter\u003C\u002Fa\u003E もありますが、そちらはあまり見ていません（流れていってしまう系の情報はあまり追わないので）。\u003C\u002Fp\u003E\u003Cp name=\"aluEj\"\u003E\u003Cb\u003E向き不向き\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp name=\"irxUM\"\u003EUI 構築が大きい割り合いを占めるアプリは、Flutter の恩恵を大きく受けられます。デバイス寄りの機能が大きな割り合いを占めるもの（例えばカメラなど）は、恩恵が小さくなります。\u003C\u002Fp\u003E\u003Cp name=\"NIwaS\"\u003E既存のアプリにハイブリッド的に組み込むのは、向いていません。\u003C\u002Fp\u003E\u003Cp name=\"Qb9xw\"\u003EFlutter ではプラットフォーム・ネイティブの画面へ遷移することはできます。しかし基本的には Flutter の画面をメインとしつつ、寿命の短いフロー（カメラ起動して写真を撮って戻るとか、WebViewでお知らせ画面を表示するとか）でワンポイントでプラットフォーム・ネイティブの画面や機能を使うのがよいパターンだと思います。\u003C\u002Fp\u003E\u003Cp name=\"5z6Ds\"\u003Eまた、ゲーム向けではありません（そもそもゲームエンジンではない）。\u003C\u002Fp\u003E\u003Cp name=\"u8vzg\"\u003E以下のような場合では、Flutter と相性がよさそうです。\u003C\u002Fp\u003E\u003Cp name=\"hXpCR\"\u003E\u003Cb\u003Eアプリのプロトタイプ\u003C\u002Fb\u003E\u003Cbr\u003E- UI をデザインして、細かい挙動や見た目を調整するイテレーションがやりやすい（ホットリロード）\u003Cbr\u003E- Widgets tree の概念が HTML DOM とも似ているので、デザイナーが参加しやすそう\u003C\u002Fp\u003E\u003Cp name=\"MEIk1\"\u003E\u003Cb\u003E新規アプリの開発\u003C\u002Fb\u003E\u003Cbr\u003E- 最初から Flutter で書ける（既存のアプリに部分的に組み込むのはあわない）\u003Cbr\u003E- Flutter のバグを踏んだ時に、回避するワークアラウンドを採用できる（仕様を変えやすい）\u003Cbr\u003E    - 以前は動画サポートが無かったので（いまはあります）、CARTUNE ではプラットフォーム・ネイティブの画面へ遷移して動画を再生\u003Cbr\u003E    - テキスト入力欄の改行入力の動作が怪しいので、同様にプラットフォーム・ネイティブの画面へ遷移してテキスト入力\u003C\u002Fp\u003E\u003Cp name=\"BYWYi\"\u003E\u003Cb\u003EUI building が中心的なアプリ\u003C\u002Fb\u003E\u003Cbr\u003E- ニュース系アプリやTwitterアプリのようなもの\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2 name=\"0NZ32\"\u003Eまとめ\u003C\u002Fh2\u003E\u003Cp name=\"2T3iY\"\u003EFlutter を利用して Android \u002F iOS の両方に対応したアプリを素早く開発することができました。開発効率は高くて満足しています。安定性が課題ですが、開発もアクティブなので改善に期待！（もちろん私も contribute していきます）\u003C\u002Fp\u003E",separator:a,description:c,index:[],externalUrl:a,disableComment:b,editableScopes:["web","ios","android"],nonEditableReason:a,capabilities:{amazonpayCampaign:b,amazonpay:f,guestAmazonpay:f,rubyText:f,formulaText:f,duplication:f},createdAt:"2018-03-02T10:28:47.000+09:00",user:{id:aI,key:"881707011e7ed224f0738d0090490b92",urlname:j,nickname:j,activeFlag:f,noteCount:h,emailConfirmedFlag:f,createdAt:"2018-03-02T10:23:59.000+09:00",userProfileImagePath:u,noUrlnameUser:b,storeUrl:c,followingCount:D,followerCount:60,profile:"Software developer。Google Cloud(特にApp Engine)とFlutterのGoogle Developers Expert。好きな言語はGo。他Flutter\u002FDart, Android, iOS, Python。",withdrawal:b,isMe:b,isFollowing:b,isFollowed:b,isAdmin:b,customDomain:a,enableSerif:b,othersRelatedNotesEnabled:f,disableSupport:a,twitterNickname:j,socials:{twitter:{id:688757,nickname:j,name:c,uid:c}},externalLinks:{},proUserId:a,purchaseAppealTextNote:a,purchaseAppealTextMagazine:a,purchaseAppealTextSupport:a,followAppealText:a,followAppealImage:a,likeAppealText:a,likeAppealImage:a,shareAppeal:{text:a,image:a},magazineAddAppeal:{text:a,image:a},blocksYou:b,isBlocked:b,disableGuestPurchase:b,supportBoxAppealText:a,customSupportBox:a},audio:a,belongingMagazineKeys:["mdafce2b0ebe1","m5ee458856cd1","m28f35567109b","ma8279f82b782"],canComment:f,canDelete:b,canMemberEdit:b,canMemberPublish:b,canMemberRead:b,canMemberWrite:b,canMultipleLimitedNote:b,canPublish:b,canRead:f,canSellOnFirstComeNote:b,canUpdate:b,canVote:f,canShowHashtagBanner:f,categories:[],category:a,classifyCategories:[{id:61}],commentViewable:f,customDomain:a,embeddedContents:[],eyecatch:a,eyecatchAlt:a,eyecatchHeight:a,eyecatchWidth:a,format:"3.2",hasCoupon:b,hasDraft:b,hashtagNotes:[{id:8203047,createdAt:"2018-03-07T11:43:13.000+09:00",hashtag:{name:"#Flutter"}}],isAvailable:b,isCircleDescription:b,isDraft:b,isForWork:b,isPurchasedWithinLast24Hours:b,isLiked:b,isLimited:b,isMagazinePurchased:b,isMemberEdit:b,isMemberEditing:b,isMyNote:b,isPinned:b,isProfiled:b,isPublished:f,isPurchased:b,isR18:b,isR18ConfirmationNeeded:b,isRefund:b,isReserved:b,isSupported:b,isTemporaryFrozen:b,isTrial:b,labels:[],likeCount:105,anonymousLikeCount:C,magazinesForBuy:[],magazinesForSubscribe:[],memberEditLockedAt:a,noteShareUrl:"https:\u002F\u002Fnote.com\u002Fintent\u002Fpost?url=https:\u002F\u002Fnote.com\u002Fnajeira\u002Fn\u002Fn8924408dd07b",relatedContests:[],paywall:{isSimplePaidNote:f,isSimplePaidNoteTestA:b,sameMonthCnt:d,context:{isShowLimitedPayNotePaywall:b,isMembershipConnected:b}},pictures:[{caption:a,key:"177619fd4ffba1fb4b605a20b0ef08ea",url:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843629\u002Fpicture_pc_177619fd4ffba1fb4b605a20b0ef08ea.jpg",thumbnailUrl:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843629\u002Fsquare_thumb_177619fd.jpg",alt:"画像1",width:p,height:q,index:d},{caption:a,key:"3ff1a05a02ec04ada3801ae9a14bfed8",url:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843630\u002Fpicture_pc_3ff1a05a02ec04ada3801ae9a14bfed8.jpg",thumbnailUrl:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843630\u002Fsquare_thumb_3ff1a05a.jpg",alt:"画像2",width:p,height:q,index:g},{caption:a,key:"4e443cecdf92029c71ecbf8cb6c63823",url:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843773\u002Fpicture_pc_4e443cecdf92029c71ecbf8cb6c63823.jpg",thumbnailUrl:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843773\u002Fsquare_thumb_4e443cec.jpg",alt:"画像3",width:p,height:q,index:h}],pinnedUserNoteId:a,price:d,priorSale:a,publishAt:K,readingUuid:"7a2f8d6d-6259-4121-a82a-c8e701c90f49",remainedCharNum:d,remainedFigureNum:d,remainedImageNum:d,remainedFileNum:d,reservedPublishAt:a,facebookShareUrl:"https:\u002F\u002Fwww.facebook.com\u002Fshare.php?u=https:\u002F\u002Fnote.com\u002Fnajeira\u002Fn\u002Fn8924408dd07b&t=Android+%2F+iOS+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E9%96%8B%E7%99%BA%E3%81%AB%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE+Flutter+%E3%82%92%E5%AE%9F%E6%88%A6%E6%8A%95%E5%85%A5%E3%81%97%E3%81%9F%EF%BD%9Cnajeira%EF%BD%9Cnote%EF%BC%88%E3%83%8E%E3%83%BC%E3%83%88%EF%BC%89",lineShareUrl:"https:\u002F\u002Fline.naver.jp\u002FR\u002Fmsg\u002Ftext\u002F?Android+%2F+iOS+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E9%96%8B%E7%99%BA%E3%81%AB%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE+Flutter+%E3%82%92%E5%AE%9F%E6%88%A6%E6%8A%95%E5%85%A5%E3%81%97%E3%81%9F%EF%BD%9Cnajeira%EF%BD%9Cnote%EF%BC%88%E3%83%8E%E3%83%BC%E3%83%88%EF%BC%89%0Ahttps:\u002F\u002Fnote.com\u002Fnajeira\u002Fn\u002Fn8924408dd07b",twitterShareUrl:"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?url=https:\u002F\u002Fnote.com\u002Fnajeira\u002Fn\u002Fn8924408dd07b&text=Android+%2F+iOS+%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E9%96%8B%E7%99%BA%E3%81%AB%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE+Flutter+%E3%82%92%E5%AE%9F%E6%88%A6%E6%8A%95%E5%85%A5%E3%81%97%E3%81%9F%EF%BD%9Cnajeira+%40najeira+%23note&related=najeira,note_PR",noteUrl:m,twitterRelatedAccounts:"najeira,note_PR",tweetText:"Android \u002F iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira @najeira #note",circlePlans:[],isPublicMembershipConnected:b,isBoardDisabled:b,discountCampaigns:[],leadForm:a,noteShareTotalCount:B,noteShareProviderDetails:{line:{count:h,isShared:b},note:{count:h,isShared:b},twitter:{count:A,isShared:b}},recommendPriceExpName:k,recommendPrice:a,isPublishedPreviewNote:b,isRatable:b,contentRatingVia:c,contentRaters:[],myRatingExists:b,raterCount:d,isRecentlyPurchased:b,isRecentlyTip:b,excludeFromCreatorTop:b,isRelatedWithInvestment:b,relatedStocks:[]},error:a,likeData:{note:{likes:[],users:[],likeCount:d,userLikes:b},comment:{likes:[],users:[],likeCount:d,userLikes:b},board_post:{likes:[],users:[],likeCount:d,userLikes:b}},embedScriptSrcs:[],noLoginLikes:[],noteUrl:c,notices:{wordWarnings:[]},isShowingNavbar:f,currentCommentPage:d,buyingConsideration:{isLoaded:b,commentCount:d,comments:[]},isPointCampaignActive:b,selectedCampaignKindByRandom:"paypay",const:{},getters:{GET_PURCHASE_CONTENTS:{}}},settings:{membership:{circle:a,circlePlans:a,categories:a,members:a,invitees:a,membership:a,memberships:a,plan:a,membershipSetting:a,withdrawn:a,magazines:{magazines:[]}}}}},serverRendered:f,routePath:"\u002Fnajeira\u002Fn\u002Fn8924408dd07b",config:{currentEnv:"production",prehubEnv:e,sourceEnv:e,_app:{basePath:aJ,assetsPath:aJ,cdnURL:"https:\u002F\u002Fd291vdycu0ht11.cloudfront.net\u002Fnuxt\u002Fproduction\u002F"}}}}(null,false,"",0,void 0,true,1,2,6,"najeira","others","0","https:\u002F\u002Fnote.com\u002Fnajeira\u002Fn\u002Fn8924408dd07b","https:\u002F\u002Fnote.com","all",480,853,"private","public","Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on Medium! Flutter について Flutter は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。特徴 - 言語は Dart - フルスタックのUI framework (Material and iOS)     - Reactive (inspired by React)   &nbs","https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F5843702\u002Fprofile_de4f50223970e44ffaa5689ca38ee76f.jpg?fit=bounds&format=jpeg&quality=85&width=330","Android \u002F iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した","ListItem","note",3,"medium",5,9,15,22,"note.com","control","true","Android \u002F iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira","note（ノート）","http:\u002F\u002Fschema.org","2018-03-02T11:48:43.000+09:00","https:\u002F\u002Fnote.com\u002Fnajeira","ImageObject","notes","published","three_column",4,7,8,10,11,12,13,14,16,17,18,19,20,21,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,"公開","非公開",{},{},853487,"\u002F"));</script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/3427ed1.modern.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.5b0457fc6e665f1da8f5.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.82d525281d487594506b.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ab22a230b4d1245b2d19.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.d2e942f6697d9b3f9dbc.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.cab32fcbb629cd9d5a96.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.b62041f1f40f3cce9ace.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.a46bf33067655175b8d3.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.00fe191f7660a9dcf22d.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.6c5b2e17251566d5bc7e.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.5c419eb23cce2e3d7d9c.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.dcf72b6ba41fca7ee59b.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.2ea735466ef1acb4d91f.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ebbb5c6b4b226c0cabed.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.1127f446de4643037805.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.249483100988e26d6de3.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.91a8112116fcbdd0592e.js" defer></script> </body> </html>