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>【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc</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="Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com/al5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 "><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/note_maverick/n/nd07e0f245dae"><meta data-n-head="ssr" data-hid="og:title" property="og:title" content="【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc"><meta data-n-head="ssr" data-hid="og:description" property="og:description" content="Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com/al5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 "><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://assets.st-note.com/production/uploads/images/178824795/rectangle_large_type_2_1c00a216bdfe28e2412ec0ad9df3b351.png?fit=bounds&quality=85&width=1280"><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_large_image"><meta data-n-head="ssr" data-hid="twitter:url" property="twitter:url" content="https://note.com/note_maverick/n/nd07e0f245dae"><meta data-n-head="ssr" data-hid="twitter:title" property="twitter:title" content="【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc"><meta data-n-head="ssr" data-hid="twitter:description" property="twitter:description" content="Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com/al5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 "><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/nd07e0f245dae"><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/nd07e0f245dae"><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/178824795/rectangle_large_type_2_1c00a216bdfe28e2412ec0ad9df3b351.png?fit=bounds&quality=85&width=1280"><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/note_maverick/n/nd07e0f245dae"><link data-n-head="ssr" rel="preload" href="https://assets.st-note.com/production/uploads/images/178824795/rectangle_large_type_2_1c00a216bdfe28e2412ec0ad9df3b351.png?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/note_maverick/n/nd07e0f245dae","headline":"【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）","keywords":"図解,HTML,PowerPoint,プレゼン,svg,Claude,プロンプトエンジニアリング,Claude3_7Sonnet","datePublished":"2025-03-13T12:04:01.000+09:00","dateModified":"2025-03-21T11:57:18.000+09:00","author":{"@type":"Person","name":"Mavericks, Inc","url":"https://note.com/note_maverick"},"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/178824795/1c00a216bdfe28e2412ec0ad9df3b351.png","width":1538,"height":805},"description":"Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com/al5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 \n\n\n"},{"@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/note_maverick","name":"Mavericks, Inc"}},{"@type":"ListItem","position":3,"item":{"@id":"https://note.com/note_maverick/n/nd07e0f245dae","name":"【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）"}}]},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741827739-0Di5JmQ2uyGgBcYdLXZqteAW.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741788865-0UFNmYz9JO1MWs2qb7XjPQBf.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741766510-ohInFeTvuj2KNf6prLaCkqli.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741753610-xmtVYkw6pd9cKuI0WqBe1FS4.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741753671-LxFJldUwoK9q4Parc3BHt8un.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741753702-xcyWP17n83Zg0EIbLQwvNheX.png","creator":{"@type":"Person","name":"Mavericks, Inc"}},{"@context":"https://schema.org/","@type":"ImageObject","contentUrl":"https://assets.st-note.com/img/1741797223-W4gDCE5Uk1RdT6HNjaXSoZru.png","creator":{"@type":"Person","name":"Mavericks, Inc"}}]</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/4ca85ef.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.e8d30c762455496e2d3e.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.15bca7c438f2168d7050.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.c1fbee2afd7e3bfb1d09.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.a964edce1a52172f8764.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.7990016acae03609e665.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.e03e9a940e7d47bccea7.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.db013ba5e5c70c5ed8f8.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.8e2773434e5631503082.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.261a8f322ff3be728109.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.1fe36e19547b0bab6ee5.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.4cd71c89177159835c0e.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.b4145db09563606a56b2.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.632f387d1cd5b2e468df.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ac478ee40c2a47f43ef0.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.425ccfe35e27d4d679d3.js" as="script"><link rel="preload" href="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.55d3a328789004022916.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 320f1684:0 71236d44:0 6f838680:0 0037aa1c:0 2314d9d6:0 521a0fef:0 38c81ff8:0 421b9b6e:0 27867ef6:0 0c97d4f7:0 0f7ec27e:0 03477958:0 0630f22c:0 23675465:0 2bfcffb2:0 6e0744b6:0 7fb08cd2:0 279e8690:0 15093948:0 515bbe18:0 459ac050:0 3ea6a7b9:0 3e43510e:0 009d16af:0 5a2c9f55:0 0775d74e:0 827fd6a0:0 05133ab4:0 0e8fb064: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-\[5px\]{margin-right:5px!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}.size-\[26px\]{width:26px!important;height:26px!important}.size-\[28px\]{width:28px!important;height:28px!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-\[\#EAEFF2\]{--tw-bg-opacity:1!important;background-color:rgb(234 239 242/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-\[10px\]{font-size:10px!important}.text-\[18px\]{font-size:18px!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-\[\#545E63\]{--tw-text-opacity:1!important;color:rgb(84 94 99/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,#08131a)!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:#08131a;--color-custom-accent-reaction:#202a30;--color-surface-primary:#08131a;--color-surface-primary-reaction:#202a30;--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);--color-reactionOverlay-invert:hsla(0,0%,100%,0.03137254901960784)}@media only screen and (prefers-color-scheme:dark){html.android-webview,html.ios-webview{--color-custom-accent:hsla(0,0%,100%,0.9019607843137255);--color-custom-accent-reaction:hsla(0,0%,100%,0.8196078431372549);--color-surface-primary:hsla(0,0%,100%,0.9019607843137255);--color-surface-primary-reaction:hsla(0,0%,100%,0.8196078431372549);--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:hsla(0,0%,100%,0.03137254901960784);--color-reactionOverlay-invert: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)}} .a-image[data-v-50e2377b]{background-color:var(--color-surface-normal)}.a-image.a-image--bg-transparent[data-v-50e2377b]{background-color:initial} .o-noteContentHeader__titleContainer[data-v-05995860]{margin-bottom:20px}.o-noteContentHeader__titleContainer--device_windows .o-noteContentHeader__title[data-v-05995860]{font-family:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif}.o-noteContentHeader__titleContainer--font_sansserif .o-noteContentHeader__title[data-v-05995860]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif}.o-noteContentHeader__title[data-v-05995860]{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-05995860]{margin-top:30px;margin-bottom:15px;font-size:var(--font-size-xl)}}@media print{.o-noteContentHeader__title[data-v-05995860]{margin-top:48px}}.o-noteContentHeader__title[data-v-05995860]::placeholder{color:var(--color-text-placeholder)}.o-noteContentHeader__titleAttachment[data-v-05995860]{display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-top:-8px}@media print{.o-noteContentHeader__titleAttachment[data-v-05995860]{display:none}}.o-noteContentHeader__creatorInfo[data-v-05995860]{position:relative;display:flex;align-items:flex-start;justify-content:space-between;width:100%}.o-noteContentHeader__avatar[data-v-05995860]{margin-right:8px}.o-noteContentHeader__info[data-v-05995860]{flex:1;font-size:var(--font-size-xs);line-height:1.5}.o-noteContentHeader__followButton[data-v-05995860]{margin-left:8px}.o-noteContentHeader__name[data-v-05995860]{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.o-noteContentHeader__date[data-v-05995860]{color:var(--color-text-secondary)}.o-noteContentHeader__dateSlot[data-v-05995860]:after{content:" "}.o-noteContentHeader__action[data-v-05995860]{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-05995860]{display:none}}.o-noteContentHeader__actionFollow[data-v-05995860]{text-decoration:underline}.o-noteContentHeader__actionFollow--following[data-v-05995860]{text-decoration:none}.o-noteContentHeader__status[data-v-05995860]{display:flex;align-items:center}.o-noteContentHeader__label[data-v-05995860],.o-noteContentHeader__price[data-v-05995860]{font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-success)}.o-noteContentHeader__more[data-v-05995860]{margin-left:16px;color:var(--color-text-clickable-icon);cursor:pointer}@media only screen and (min-width:769px){.o-noteContentHeader__more[data-v-05995860]{transition:color .2s cubic-bezier(1,0,0,1)}.o-noteContentHeader__more[data-v-05995860]:hover{color:var(--color-text-secondary)}}.o-noteContentHeader__share[data-v-05995860]{position:relative;display:flex;justify-content:space-between;margin-left:16px}@media print{.o-noteContentHeader__share[data-v-05995860]{display:none}}.o-noteContentHeader__item[data-v-05995860]{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-05995860]{transition:all .2s cubic-bezier(1,0,0,1)}.o-noteContentHeader__item[data-v-05995860]: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-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} .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)}} .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-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-4fdab92e]{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-4fdab92e],.a-button .a-button__inner[data-v-4fdab92e]{align-items:center;justify-content:center}.a-button .a-button__inner[data-v-4fdab92e]{position:relative;display:flex;font-size:var(--font-size-sm)}.a-button[data-type=none][data-v-4fdab92e]{color:var(--color-text-secondary)}@media only screen and (min-width:769px){.a-button[data-type=none][data-v-4fdab92e]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=none][data-v-4fdab92e]:hover{color:var(--color-text-primary)}}.a-button[data-type=disabled][data-v-4fdab92e]{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-4fdab92e]:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button[data-type=basic][data-v-4fdab92e]{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-4fdab92e]{transition:border .2s cubic-bezier(1,0,0,1)}.a-button[data-type=basic][data-v-4fdab92e]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=primary][data-v-4fdab92e]{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-4fdab92e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=primary][data-v-4fdab92e]:hover{background-color:var(--color-custom-accent-reaction)}}.a-button[data-type=secondary][data-v-4fdab92e]{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-4fdab92e]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=secondary][data-v-4fdab92e]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=offerSecondary][data-v-4fdab92e]{color:var(--color-text-offer);border:1px solid var(--color-border-offer)}.a-button[data-type=danger][data-v-4fdab92e]{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-4fdab92e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=danger][data-v-4fdab92e]:hover{background-color:var(--color-surface-danger-reaction)}}.a-button[data-type=dangerSecondary][data-v-4fdab92e]{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-4fdab92e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=dangerSecondary][data-v-4fdab92e]:hover{border:1px solid var(--color-grayAlpha-300)}}.a-button[data-type=twitter][data-v-4fdab92e]{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-4fdab92e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=twitter][data-v-4fdab92e]:hover{background-color:var(--color-social-twitter-reaction)}}.a-button[data-type=facebook][data-v-4fdab92e]{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-4fdab92e]{transition:background-color .2s cubic-bezier(1,0,0,1)}.a-button[data-type=facebook][data-v-4fdab92e]:hover{background-color:var(--color-social-facebook-reaction)}}.a-button[data-type=floating][data-v-4fdab92e]{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-4fdab92e]{transition:all .2s cubic-bezier(1,0,0,1)}.a-button[data-type=floating][data-v-4fdab92e]:hover{color:var(--color-custom-accent);border-color:var(--color-custom-accent-reaction)}}.a-button[data-type=primaryNext][data-v-4fdab92e]{color:var(--color-text-invert);background-color:var(--color-surface-primary)}.a-button[data-type=secondaryNext][data-v-4fdab92e]{color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.a-button[data-size=small][data-v-4fdab92e]{min-height:32px}@media only screen and (max-width:480px){.a-button[data-size=small][data-v-4fdab92e]{padding-right:12px;padding-left:12px}}.a-button[data-size=small] .a-button__inner[data-v-4fdab92e]{font-size:var(--font-size-xs)}.a-button[data-size=large][data-v-4fdab92e]{min-height:48px}.a-button[data-size=large] .a-button__inner[data-v-4fdab92e]{font-size:var(--font-size-base)}.a-button[data-width=fit][data-v-4fdab92e]{width:100%}.a-button[data-width=square][data-v-4fdab92e]{width:32px}.a-button[data-disable-focus=false][data-v-4fdab92e]:active,.a-button[data-disable-focus=false][data-v-4fdab92e]:hover,.a-button[data-disable-focus=true][data-v-4fdab92e]:focus{outline:none}.a-button[data-v-4fdab92e]: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-4fdab92e]:disabled:hover{color:var(--color-text-secondary);background-color:var(--color-surface-disabled);border:none}}.a-button--icon[data-v-4fdab92e]{padding-right:0;padding-left:0}.a-button--icon .a-button__icon[data-v-4fdab92e]{margin-right:0} .a-link[data-v-4fdab92e]{cursor:pointer}.a-link[data-v-4fdab92e]:active,.a-link[data-v-4fdab92e]:hover{outline:none}.a-link.disabled[data-v-4fdab92e]{cursor:default}.a-link.a-link--underline[data-v-4fdab92e]{text-decoration:underline}.a-link[data-type=primary][data-v-4fdab92e]{color:var(--color-text-primary)} .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-1e3c93dd]{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-1e3c93dd],.m-shareSheet[data-v-1e3c93dd]:after{position:absolute;background-color:var(--color-surface-primary)}.m-shareSheet[data-v-1e3c93dd]: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-1e3c93dd]{margin-right:8px;font-size:var(--font-size-xs);font-weight:700;line-height:1;white-space:nowrap}.m-shareSheet__item[data-v-1e3c93dd]{padding:8px;background-color:var(--color-surface-primary)}.m-shareSheet__item[data-v-1e3c93dd]:last-child{border-radius:0 4px 4px 0}@media only screen and (min-width:769px){.m-shareSheet__item[data-v-1e3c93dd]:hover{background-color:var(--color-surface-primary-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="106786636" data-note-key="nd07e0f245dae" data-v-8a71fdf2><div class="o-noteContentText o-noteContentText--font_sansserif o-noteContentText--device_windows" data-v-e7ed8ff0><figure class="o-noteEyecatch" data-v-6cfcce9a data-v-e7ed8ff0><img src="https://assets.st-note.com/production/uploads/images/178824795/rectangle_large_type_2_1c00a216bdfe28e2412ec0ad9df3b351.png?width=1200" alt="見出し画像" decoding="async" loading="lazy" width="1538" height="805" class="a-image o-noteEyecatch__image" data-v-50e2377b data-v-6cfcce9a>  </figure> <div class="o-noteContentHeader o-noteContentText__header" data-v-05995860 data-v-e7ed8ff0><div class="o-noteContentHeader__titleContainer o-noteContentHeader__titleContainer--font_sansserif o-noteContentHeader__titleContainer--device_windows" data-v-05995860><h1 class="o-noteContentHeader__title" data-v-05995860> 【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応） </h1> <div class="o-noteContentHeader__titleAttachment" data-v-05995860><div class="flex" data-v-05995860><span class="o-noteLikeV3" data-v-5b0bbae8 data-v-05995860><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="322スキこの記事にスキをつけたユーザーを見る" class="text-text-secondary o-noteLikeV3__count o-noteLikeV3__count--mediumSmall" data-v-5b0bbae8> 322 </button></span> </div> <div class="flex items-center gap-2 justify-center flex-wrap shrink grow-0" data-v-05995860>   </div></div></div> <div class="o-noteContentHeader__creatorInfo" data-v-05995860><a href="/note_maverick" aria-hidden="true" class="o-noteContentHeader__avatar a-link" data-v-43e40ddc data-v-05995860><div class="m-avatar m-avatar--medium" data-v-5c1c7fdc data-v-05995860><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/121272934/profile_dbec843310414487a658a6cf560e4980.png?width=60" alt="Mavericks, Inc" 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-05995860><div class="o-noteContentHeader__name" data-v-05995860><a href="/note_maverick" class="a-link" data-v-43e40ddc data-v-05995860> Mavericks, Inc </a></div> <span class="o-noteContentHeader__date" data-v-05995860><time datetime="2025-03-13T12:04:01.000+09:00" data-v-05995860>2025年3月13日 12:04</time></span> </div>  <div class="o-noteContentHeader__status" data-v-05995860> </div></div></div> <div data-name="body" class="note-common-styles__textnote-body" data-v-e7ed8ff0><p name="2d1db8e1-8d07-43fe-95fb-3592e82e3c32" id="2d1db8e1-8d07-43fe-95fb-3592e82e3c32"><strong>Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成</strong>することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。</p><figure name="6f54523f-1bb6-4db3-b58b-b61689d68ee6" id="6f54523f-1bb6-4db3-b58b-b61689d68ee6" data-src="https://twitter.com/SuguruKun_ai/status/1898549311794995602" data-identifier="null" embedded-service="twitter" embedded-content-key="emb636ce4b91d0a"><div data-name="embedContainer"><div data-embed-service="twitter"><span><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。<br>ㅤ<br>バズった「グラレコプロンプト」を参考に作成した、<br>ㅤ<br>幅広く使える有益デザインプロンプト10選をまとめました👇🧵 <a href="https://t.co/al5n7Udf3c">pic.twitter.com/al5n7Udf3c</a></p>— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) <a href="https://twitter.com/SuguruKun_ai/status/1898549311794995602?ref_src=twsrc%5Etfw">March 9, 2025</a></blockquote> </span></div></div></figure><p name="7d966749-7b4a-4d0d-a545-3b84f305d57d" id="7d966749-7b4a-4d0d-a545-3b84f305d57d">しかし残念なことに、<strong>生成された図解の編集は困難を極めます</strong>。Claudeに指示を出すことである程度は修正できるものの、言うことを中々聞いてくれずトークン切れにあったり、時間がかかりすぎて時短になっていなかったり、自前の素材と組み合わせることはできなかったり…</p><p name="04657534-7639-4f4c-88ef-f6738a0f1e7d" id="04657534-7639-4f4c-88ef-f6738a0f1e7d">このような問題を解決すべく、<strong>Claude 3.7 Sonnetで生成した図解（SVG, HTML）をPowerPointで編集可能にする</strong>ために、試行錯誤を重ねました。その結果、以下のような複雑な図解に対しても再現性高く変換できる術を見つけたので、詳しく解説していきます。</p><figure name="b39a91f8-fae7-4e02-b068-d10a7311a558" id="b39a91f8-fae7-4e02-b068-d10a7311a558"><img src="https://assets.st-note.com/img/1741827739-0Di5JmQ2uyGgBcYdLXZqteAW.png?width=1200" alt="" width="620" height="364" loading="lazy"><figcaption>AIニュースを黒板風にまとめた図解</figcaption></figure><figure name="7ad3b8d4-a18c-440c-838b-a81fe0fca5f6" id="7ad3b8d4-a18c-440c-838b-a81fe0fca5f6"><img src="https://assets.st-note.com/img/1741788865-0UFNmYz9JO1MWs2qb7XjPQBf.png?width=1200" alt="" width="620" height="379" loading="lazy"><figcaption>情報量の多い決算資料</figcaption></figure><table-of-contents name="21cf4f52-9e03-4607-873c-0812841eec47" id="21cf4f52-9e03-4607-873c-0812841eec47"><br></table-of-contents><h2 name="9430541d-18cd-4f3d-bdfd-f6bea2357a0a" id="9430541d-18cd-4f3d-bdfd-f6bea2357a0a">自己紹介</h2><p name="388bbe33-3d15-4835-a108-bffc032e331e" id="388bbe33-3d15-4835-a108-bffc032e331e"><strong>動画生成AI「</strong><a href="https://no-lang.com/" target="_blank" rel="noopener noreferrer nofollow"><strong>NoLang</strong></a><strong>」</strong>の運営・開発をしています！noteにて、<strong>毎週配信でAI情報もお届け</strong>していますので、本記事がためになったという方は是非<a href="https://note.com/note_maverick/m/mcf40f61545f4" target="_blank" rel="noopener noreferrer nofollow">こちら</a>もご覧ください！</p><figure name="c48d8956-9834-44bc-bddc-8847c2f3f03b" id="c48d8956-9834-44bc-bddc-8847c2f3f03b" data-src="https://twitter.com/sayhi2ai_jp/status/1901436561369309485" data-identifier="null" embedded-service="twitter" embedded-content-key="emb309ec7aa6718"><div data-name="embedContainer"><div data-embed-service="twitter"><span><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">【🔥重大発表】🐬NoLang 3.0をリリースしました！<br><br>縦型ショート動画を直接生成・編集可能に。今だけ無料で試せます！<br><br>さらに編集機能が一新され、制作できる動画の幅が大きく広がりました！<br><br>他にも、「どんなPDFも1分要約」「話題の画像生成AI Imagen3」など注目機能が盛り沢山。詳しくは👇 <a href="https://t.co/rZc9dDB7ao">pic.twitter.com/rZc9dDB7ao</a></p>— マーベリック|生成AI@NoLang (@sayhi2ai_jp) <a href="https://twitter.com/sayhi2ai_jp/status/1901436561369309485?ref_src=twsrc%5Etfw">March 17, 2025</a></blockquote> </span></div></div></figure><h2 name="f92fa48e-c3b1-45c4-b175-19e47eab67f9" id="f92fa48e-c3b1-45c4-b175-19e47eab67f9">はじめに：SVGとHTML</h2><p name="fddc7398-6f84-48bd-83ce-e698d1f43545" id="fddc7398-6f84-48bd-83ce-e698d1f43545">Claude 3.7 Sonnetで出力可能な図解は、多くの場合SVGまたはHTMLの形式となります。両者の間には以下のような違いがあります。</p><ul name="02332bb5-c9a7-401f-a2f3-6831db819d24" id="02332bb5-c9a7-401f-a2f3-6831db819d24"><li><p name="cb8e26ff-1a02-4fbe-a5b5-1c018b9b239c" id="cb8e26ff-1a02-4fbe-a5b5-1c018b9b239c"><strong>SVG:</strong> ベクター画像の一種で、イラストや図形の描画に使われる。座標は<strong>「絶対値」かつ「静的」</strong>に定義される</p></li><li><p name="6d31dca0-a2d6-4c61-b148-25923062d889" id="6d31dca0-a2d6-4c61-b148-25923062d889"><strong>HTML:</strong> Webページを表示するために使われる。座標は<strong>「相対値」</strong>で定義され、レスポンシブデザインが適用されると<strong>「動的」にもなる</strong></p></li></ul><p name="8e5472bb-f345-40b1-bc61-c50298b85e44" id="8e5472bb-f345-40b1-bc61-c50298b85e44">Claudeで生コードを確認したときに、コードの冒頭が<svg>タグで始まるならSVGであり、そうでない場合は基本的にHTMLとなります。</p><p name="5a387ad5-0f08-4a0f-9deb-07d3b412c57f" id="5a387ad5-0f08-4a0f-9deb-07d3b412c57f">SVGはPowerPointとの相性が良く、ワンクリックでPowerPoint用の図形に変換することができます。しかし愚直にやると<strong>レイアウトが崩れるという落とし穴</strong>があるので、回避方法を説明します（次章）。</p><p name="f23afc48-4682-4e8f-8aa9-1afa5df1e7b9" id="f23afc48-4682-4e8f-8aa9-1afa5df1e7b9">HTMLは本来PowerPointの図形には変換不可能です。しかし、Claude 3.7 Sonnetが非常に優秀であるため、HTMLとSVGの構造差を理解した上で適切にプロンプトを設計することで、<strong>見た目の変更を最小限にしつつ、HTMLをSVGに変換できます</strong>（次々章）。これにより、HTMLもSVGを経由してPowerPoint用の図形に変換できます。</p><figure name="d3b2168c-e97d-4f47-9b0e-f3e33a997a26" id="d3b2168c-e97d-4f47-9b0e-f3e33a997a26"><img src="https://assets.st-note.com/img/1741766510-ohInFeTvuj2KNf6prLaCkqli.png?width=1200" alt="" width="620" height="380" loading="lazy"><figcaption>こちらも、Claude 3.7 Sonnetで作成したSVGをPowerPointで編集して制作</figcaption></figure><h2 name="08ff959e-5a0e-4331-84fa-681284ddaad9" id="08ff959e-5a0e-4331-84fa-681284ddaad9">SVGを「レイアウトを崩さずに」PowerPointで編集可能にする方法</h2><p name="a9228397-2f8c-4d9b-84cf-495f21312855" id="a9228397-2f8c-4d9b-84cf-495f21312855">①まずPowerPointにSVG画像を挿入します。上部のバーから「挿入」→「写真」→「図をファイルから挿入」として、該当画像を読み込みましょう。</p><p name="f264e235-d1f9-44db-ac05-227aafbe761f" id="f264e235-d1f9-44db-ac05-227aafbe761f">② SVG画像を右クリックして「配置とサイズ」を選択します。右からサイドバーが現れるので、左から3つ目のアイコンを選択して、<strong>「高さの倍率」「幅の倍率」をそれぞれ100%に設定</strong>します。</p><figure name="da049e57-7abd-4515-8b93-1c631c6003cd" id="da049e57-7abd-4515-8b93-1c631c6003cd"><img src="https://assets.st-note.com/img/1741753610-xmtVYkw6pd9cKuI0WqBe1FS4.png?width=1200" alt="" width="620" height="321" loading="lazy"><figcaption></figcaption></figure><p name="22c167e4-a697-4718-9a88-0d18bc250c91" id="22c167e4-a697-4718-9a88-0d18bc250c91">③ 最後にSVG画像を選択した状態で、上部のバーから「グラフィックス形式」を選択し「図形に変換」を押下しましょう。</p><figure name="e21e9b91-eb96-4f8a-b123-94f92001c6fc" id="e21e9b91-eb96-4f8a-b123-94f92001c6fc"><img src="https://assets.st-note.com/img/1741753671-LxFJldUwoK9q4Parc3BHt8un.png?width=1200" alt="" width="620" height="423" loading="lazy"><figcaption></figcaption></figure><p name="50845ffb-4183-4ec9-8642-38fddc2e3e59" id="50845ffb-4183-4ec9-8642-38fddc2e3e59">すると以下のように、SVG画像がPowerPointで編集可能なオブジェクトへと変換され、自由に位置・サイズ・フォントなどを調整できるようになります。</p><figure name="26d4e26a-0254-44b2-80f5-06a3a8edc139" id="26d4e26a-0254-44b2-80f5-06a3a8edc139"><img src="https://assets.st-note.com/img/1741753702-xcyWP17n83Zg0EIbLQwvNheX.png?width=1200" alt="" width="620" height="470" loading="lazy"><figcaption>この状況でClaude Sonnetに修正させるのは地味に大変ですが、このようにPowerPoint図形まで変換できれば、あとは直感的に編集できます。</figcaption></figure><p name="0d065892-28fa-4403-9b5c-077a48aec39f" id="0d065892-28fa-4403-9b5c-077a48aec39f">ここで、工程②を飛ばしていきなり変換しようとすると、変換後に文字サイズが変わるなどしてレイアウト崩れを起こしてしまいます。必ず画像の縮尺が100%になっていることを確認してください。</p><figure name="74884949-ffe0-41a0-a90c-dc9a56cf9538" id="74884949-ffe0-41a0-a90c-dc9a56cf9538"><blockquote><p name="0389a5dc-8ea4-49af-9c9d-04bee63fe473" id="0389a5dc-8ea4-49af-9c9d-04bee63fe473"><strong>⚠️補足：</strong>もしこのやり方でうまくいかなかった場合は、SVGファイルをPowerPoint変換に対応させる必要があります。詳しくは次章(3)内の「プロンプトに関する解説」をご覧ください。</p></blockquote><figcaption></figcaption></figure><h2 name="b13c11c9-6df7-45e5-b580-a43ee16fb4aa" id="b13c11c9-6df7-45e5-b580-a43ee16fb4aa">HTMLを強引にSVGに変換するための3つのプロンプト</h2><p name="0a7752ce-03a2-4fe1-9da0-ecd9f9386cb2" id="0a7752ce-03a2-4fe1-9da0-ecd9f9386cb2"><strong>Claude 3.7 Sonnetの「Extended」モードに対して複数のプロンプトを適用</strong>することで、座標が「動的」かつ「相対値」で定義されるHTMLを、座標が「静的」かつ「絶対値」で定義されるSVGに変換していきます。</p><figure name="87be837e-0a1e-42e7-b208-710808c542cf" id="87be837e-0a1e-42e7-b208-710808c542cf"><blockquote><p name="6ad470e8-dabc-4e9e-87a6-72e1c98bec27" id="6ad470e8-dabc-4e9e-87a6-72e1c98bec27"><strong>🧳準備：</strong>Claudeの有料プランに課金して、Claude 3.7 Sonnetの「Extended」モードが使用可能な状態にしておく必要があります。「Normal」モードでも実行自体は可能ですが、成功確率が大きく下がってしまうため非推奨です。また、プロンプトのペーストを頻繁に使用するので、<a href="https://github.com/Clipy/Clipy" target="_blank" rel="noopener noreferrer nofollow">Clipy</a>のスニペット機能などを活用することをお勧めします。<br><br><strong>💡 手順だけ知りたいという方向け：</strong>Claude 3.7 Sonnetの「Extended」モードで、(1), (2), (3)のプロンプトを、チャットを変えつつ順々に適用していくだけでokです。</p></blockquote><figcaption></figcaption></figure><h3 name="963912e1-4653-4534-908b-a3dbc544ec7a" id="963912e1-4653-4534-908b-a3dbc544ec7a">(1) レスポンシブを無効化する</h3><p name="d5a27ecf-d724-4241-9734-253e2b28d4e9" id="d5a27ecf-d724-4241-9734-253e2b28d4e9">Claude 3.7 Sonnetが出力するHTMLは通常、画面サイズによって表示が変わるレスポンシブデザインになっています。このままだと<strong>各要素の座標が定まらないのはもちろん、一行に配置される要素数が変わってしまうこともあるため、無効化</strong>します。Artifactsでレンダリングされるように指示することで、もしミスがあった場合は修正をしてもらうことができます。</p><p name="3cf68f97-1e8f-45a4-8d46-b7d99db0fcfd" id="3cf68f97-1e8f-45a4-8d46-b7d99db0fcfd">図解を添付して、以下のプロンプトを実行してみましょう。</p><pre name="bd676380-ba5f-408c-8e18-3796854df577" id="bd676380-ba5f-408c-8e18-3796854df577" data-name="preCode"><code class="hljs" data-name="code">レスポンシブを完全に無効化して座標固定して。ただしArtifactsでしっかりレンダリングされるように</code></pre><p name="b071f32f-4418-4185-8245-e5a3f5d9384e" id="b071f32f-4418-4185-8245-e5a3f5d9384e">なおレスポンシブデザインかどうかは、実際に画面幅を変えた時に、Artifactsの表示画面が変化するかどうかで確かめられます。</p><h3 name="4726a8b8-a691-4634-990c-7e1ef9b02d06" id="4726a8b8-a691-4634-990c-7e1ef9b02d06">(2) SVGに変換しやすいコードに変換する</h3><p name="11db5c9c-92c6-4c30-98a4-31493c76458f" id="11db5c9c-92c6-4c30-98a4-31493c76458f">レスポンシブ以外にも、SVGへの変換を困難にする様々な要因があります。例えばTailwindと呼ばれるCSSフレームワークが使用されている場合、サイズ情報がピクセル値ではなくクラス名で指定されるため、明示的にピクセル値が記述されるように変換すべきです。</p><p name="dba52ea5-fe62-4365-9e7f-26306d1f3eef" id="dba52ea5-fe62-4365-9e7f-26306d1f3eef">別チャットを開いた上で、先ほどの出力結果を添付して以下のプロンプトを実行しましょう。<strong>表示結果を維持したまま、「よりSVGに変換しやすいコード」へと変換</strong>してくれます。</p><pre name="50e2966e-dda2-4366-8741-17bca73c672c" id="50e2966e-dda2-4366-8741-17bca73c672c" data-name="preCode"><code class="hljs swift" data-name="code">このコードでレンダリングされるwebページ全体を<span class="hljs-type">SVG</span>に変換したいです。その前段階として以下の条件を守って、レンダリング結果は同じだが<span class="hljs-type">SVG</span>に変換しやすいコードに変換して<span class="hljs-type">Artifacts</span>に出力してみて。(<span class="hljs-type">SVG</span>への変換はまだ行わないでください）・<span class="hljs-type">Tailwind</span>が使用されている場合は、以下の表を参考にサイズを明示的に記載する形に変換して <supplementary> <textSize> text-xs:12px, text-sm:14px, text-base:16px, text-lg:18px, text-xl:20px, text-2xl:24px, text-3xl:30px, text-4xl:36px, text-5xl:48px, text-6xl:60px, text-7xl:72px, text-8xl:96px, text-9xl:128px </textSize> <maxWidth> <span class="hljs-built_in">max</span>-w-xs:320px, <span class="hljs-built_in">max</span>-w-sm:384px, <span class="hljs-built_in">max</span>-w-md:448px, <span class="hljs-built_in">max</span>-w-lg:512px, <span class="hljs-built_in">max</span>-w-xl:576px, <span class="hljs-built_in">max</span>-w-2xl:672px, <span class="hljs-built_in">max</span>-w-3xl:768px, <span class="hljs-built_in">max</span>-w-4xl:896px, <span class="hljs-built_in">max</span>-w-5xl:1024px, <span class="hljs-built_in">max</span>-w-6xl:1152px, <span class="hljs-built_in">max</span>-w-7xl:1280px, <span class="hljs-built_in">max</span>-w-full:<span class="hljs-number">100</span>% </maxWidth> <widthHeight> w-<span class="hljs-number">1</span>:4px, w-<span class="hljs-number">2</span>:8px, w-<span class="hljs-number">4</span>:16px, w-<span class="hljs-number">8</span>:32px, w-<span class="hljs-number">16</span>:64px, w-<span class="hljs-number">32</span>:128px, w-<span class="hljs-number">64</span>:256px, w-full:<span class="hljs-number">100</span>% h-<span class="hljs-number">1</span>:4px, h-<span class="hljs-number">2</span>:8px, h-<span class="hljs-number">4</span>:16px, h-<span class="hljs-number">8</span>:32px, h-<span class="hljs-number">16</span>:64px, h-<span class="hljs-number">32</span>:128px, h-<span class="hljs-number">64</span>:256px, h-full:<span class="hljs-number">100</span>% </widthHeight> <paddingMarginGap> p-<span class="hljs-number">1</span>:4px, p-<span class="hljs-number">2</span>:8px, p-<span class="hljs-number">3</span>: 12px, p-<span class="hljs-number">4</span>:16px, p-<span class="hljs-number">8</span>:32px, p-<span class="hljs-number">16</span>:64px m-<span class="hljs-number">1</span>:4px, m-<span class="hljs-number">2</span>:8px, m-<span class="hljs-number">4</span>:16px, m-<span class="hljs-number">8</span>:32px, m-<span class="hljs-number">16</span>:64px gap-<span class="hljs-number">1</span>:4px, gap-<span class="hljs-number">2</span>:8px, gap-<span class="hljs-number">4</span>:16px, gap-<span class="hljs-number">8</span>:32px, gap-<span class="hljs-number">16</span>:64px </paddingMarginGap> <round> rounded-sm:2px, rounded:4px, rounded-md:6px, rounded-lg:8px, rounded-xl:12px, rounded-2xl:16px, rounded-3xl:24px, rounded-full:9999px </round> <border> border:1px, border-<span class="hljs-number">2</span>:2px, border-<span class="hljs-number">4</span>:4px, border-<span class="hljs-number">8</span>:8px </border> </supplementary></code></pre><p name="36c832e2-2c92-4ce1-8181-9e6cd6c65288" id="36c832e2-2c92-4ce1-8181-9e6cd6c65288">結果はArtifactsで表示されないことがありますが、気にせず次のステップに進んでokです。</p><h3 name="187dd415-9e4a-458e-a78d-806ad754c7ce" id="187dd415-9e4a-458e-a78d-806ad754c7ce">(3) 「座標の計算に注意」してSVGに変換</h3><p name="07394c68-25de-46c0-8e48-500967651f24" id="07394c68-25de-46c0-8e48-500967651f24">いよいよSVGに変換していきます。以下のプロンプトを実行しましょう。途中で一回当たりのトークン制限に引っかかって停止してしまうことがありますが、気にせず「continue」と打って生成を続けて構いません。</p><pre name="3757c0ea-f188-42a9-9e38-39745ad7f069" id="3757c0ea-f188-42a9-9e38-39745ad7f069" data-name="preCode"><code class="hljs swift" data-name="code">以下の条件を守って、このコードを<span class="hljs-type">SVG</span>に変換して。・foreignObjectは使ってはいけません・アイコンを描画する際は、svgタグでviewBoxを作ると良いです・座標指定にgタグを積極的に用いるが、dy属性は用いないでください・テキスト表示にあたっては、以下<<span class="hljs-type">Example</span>>のように各行ごとにtextタグで囲み、さらに強調がある場合は、tspanを使って区別して・gタグのy座標決めるときは、以下<<span class="hljs-type">Example</span>>のように計算するコメントアウトを必ず入れて。 <<span class="hljs-type">Example</span>> ``` …  <g transform=<span class="hljs-string">"translate(0, 200)”> <text x="</span><span class="hljs-number">44</span><span class="hljs-string">" y="</span><span class="hljs-number">14</span><span class="hljs-string">" font-family="</span><span class="hljs-type">Arial</span><span class="hljs-string">" font-size="</span><span class="hljs-number">16</span><span class="hljs-string">"> <tspan>NoLangは</tspan> <tspan fill="</span>#db2777<span class="hljs-string">" font-weight="</span><span class="hljs-number">600</span><span class="hljs-string">">国内発の動画生成AI</tspan> <tspan>です。</tspan> </text> <text x="</span><span class="hljs-number">44</span><span class="hljs-string">" y="</span><span class="hljs-number">38</span><span class="hljs-string">" font-family="</span><span class="hljs-type">Arial</span><span class="hljs-string">" font-size="</span><span class="hljs-number">16</span><span class="hljs-string">"> あらゆる資料を動画へと変換します。 </text> <rect x="</span><span class="hljs-number">0</span><span class="hljs-string">" y="</span><span class="hljs-number">0</span><span class="hljs-string">" width=“160” height="</span><span class="hljs-number">58</span>” fill=<span class="hljs-string">"#A0D1FF"</span>/> </g>  <g transform=<span class="hljs-string">"translate(0, 266)”> … ``` </Example></span></code></pre><figure name="b39d41af-6019-49e7-8330-021b73a0febd" id="b39d41af-6019-49e7-8330-021b73a0febd"><blockquote><p name="d865ff1a-ee8e-48bf-8fb5-7d814edd75f5" id="d865ff1a-ee8e-48bf-8fb5-7d814edd75f5"><strong>📗プロンプトに関する解説：<br>・</strong><foreignObject>タグは、SVG内にHTMLなどのXMLベース要素を埋め込むために使われますが、PowerPointでは描画されないため使用を禁じます。<br>・<g>タグによって要素をグループ化することができるので積極的な利用を促します。<br>・座標を相対値で表現できるdy属性を持つタグがあると、PowerPoint図形の変換時にレイアウトが崩れるため、使用を禁じます。<br>・HTMLが「相対座標」であるのに対しSVGは「絶対座標」であるため、SVGへの変換時に相対座標を加算していく必要があります。このとき、要素がいくつも積み上がる垂直方向の計算は難しく間違えがちです。そこで、<strong>コメント内で明示的に計算するよう指示することで、計算ミスが大幅に減り、レイアウト崩れを起こしにくくなります。</strong></p></blockquote><figcaption></figcaption></figure><h2 name="17ad5dad-a275-4f78-be73-1a4890258b2a" id="17ad5dad-a275-4f78-be73-1a4890258b2a">コーナーケースへの対処</h2><p name="ea153f59-997f-4c53-b7e2-0386df568fd8" id="ea153f59-997f-4c53-b7e2-0386df568fd8">上記の3ステップによる変換は、全てのケースをカバーできているわけではありません。ここではいくつかのコーナーケースに対する対処法を紹介します。</p><h3 name="941f59b3-c64e-4453-888b-19756b554c00" id="941f59b3-c64e-4453-888b-19756b554c00">(1') スクロール不要になるまで高さ・幅を拡張する</h3><p name="e2c313a8-3e8e-4446-b711-bb1bc294cb88" id="e2c313a8-3e8e-4446-b711-bb1bc294cb88">(1) にてレスポンシブの無効化が終了した時点で、webブラウザで文字サイズをどれだけ小さくしても生成されたHTMLがスクロール可能だった場合、SVG変換後に見切れてしまいます。そこでスクロール不要になるまで表示枠の大きさを拡張します。</p><pre name="ae754c00-2281-45fb-ae2f-90c0a6444005" id="ae754c00-2281-45fb-ae2f-90c0a6444005" data-name="preCode"><code class="hljs cpp" data-name="code">スクロール不要になるようにしたいです。レスポンシブ無効を維持したままま、overflow: <span class="hljs-keyword">auto</span>があれば取り除いた上で、枠の高さだけx倍, 幅をy倍に増やしてみて。ただし上端や左端が見切れないように。他は何も変えないで</code></pre><p name="8c7caef4-6d52-401d-b17c-b232781028d9" id="8c7caef4-6d52-401d-b17c-b232781028d9">最後に編集するのであれば厳密な計算は必要ありません。余裕を持って大きめの値に設定しておきましょう。</p><h3 name="3ae603a2-8f99-4651-b3f2-33e88504a28d" id="3ae603a2-8f99-4651-b3f2-33e88504a28d">(3') テキストの改行を調整する</h3><p name="82c815d1-7285-4f5e-91d7-3a6999886b1c" id="82c815d1-7285-4f5e-91d7-3a6999886b1c">HTMLではテキストの入る箱の大きさを決めれば自動で改行されるのに対し、SVGでは改行を1つ1つ明示的に記述する必要があるため、<strong>変換後のSVGに必要なはずの改行が含まれていないケースが多々あります</strong>。</p><p name="20843ff7-30d9-45e4-ad2e-f24069967860" id="20843ff7-30d9-45e4-ad2e-f24069967860">その場合は(3)でSVGを出力した後に、以下のプロンプトを用いてSVGを修正してもらいましょう。</p><pre name="ddc0184e-90bd-4128-961b-fd3b9a3bfd55" id="ddc0184e-90bd-4128-961b-fd3b9a3bfd55" data-name="preCode"><code class="hljs" data-name="code">・各要素の幅を考慮して、テキストを適切に改行し、合わせて他の要素も修正して・(再掲) gタグのy座標を決めるときは、計算用のコメントアウトを必ず入れて・変更箇所は少ないので、差分修正でokです</code></pre><h3 name="db3d9319-c4ca-4347-8fc3-e7f83f1f2fcb" id="db3d9319-c4ca-4347-8fc3-e7f83f1f2fcb">(3'') 枠の大きさを調整する</h3><p name="906cb2fc-7406-4109-bfdb-fbbaf9e551e1" id="906cb2fc-7406-4109-bfdb-fbbaf9e551e1">(3) では<g>タグのy座標を明示的に計算させましたが、<strong>枠の役割を果たす<rect>タグにおいても、高さの計算に失敗するケースが多い</strong>です。</p><p name="ff3d25e7-770b-4413-b3c3-c39d33f93538" id="ff3d25e7-770b-4413-b3c3-c39d33f93538">その場合は、(3)でSVGを出力した後に、以下のプロンプトを用いてSVGを修正してもらいましょう。ただし、最後にPowerPointで編集可能なので、完璧を目指す必要はありません。</p><pre name="81508032-7936-4ea9-aa5d-a8404c4f5537" id="81508032-7936-4ea9-aa5d-a8404c4f5537" data-name="preCode"><code class="hljs swift" data-name="code">・gタグ内のrectタグの高さを決める時も、以下<<span class="hljs-type">Example</span>>のように計算するコメントアウトを入れて欲しいです。そして計算結果が元の値と異なったら、高さも修正して・高さが変わったら、依存関係がある要素の位置も修正して <<span class="hljs-type">Example</span>> ``` …  <g transform=<span class="hljs-string">"translate(0, 200)”> <text x="</span><span class="hljs-number">44</span><span class="hljs-string">" y="</span><span class="hljs-number">14</span><span class="hljs-string">" font-family="</span><span class="hljs-type">Arial</span><span class="hljs-string">" font-size="</span><span class="hljs-number">16</span><span class="hljs-string">"> <tspan>NoLangは</tspan> <tspan fill="</span>#db2777<span class="hljs-string">" font-weight="</span><span class="hljs-number">600</span><span class="hljs-string">">国内発の動画生成AI</tspan> <tspan>です。</tspan> </text> <text x="</span><span class="hljs-number">44</span><span class="hljs-string">" y="</span><span class="hljs-number">38</span><span class="hljs-string">" font-family="</span><span class="hljs-type">Arial</span><span class="hljs-string">" font-size="</span><span class="hljs-number">16</span><span class="hljs-string">"> あらゆる資料を動画へと変換します。 </text>  <rect x="</span><span class="hljs-number">0</span><span class="hljs-string">" y="</span><span class="hljs-number">0</span><span class="hljs-string">" width=“160” height="</span><span class="hljs-number">58</span>” fill=<span class="hljs-string">"#A0D1FF"</span>/> </g>  <g transform=<span class="hljs-string">"translate(0, 266)”> … ``` </Example> 変更箇所は少ないので、差分修正でokです</span></code></pre><h2 name="77dbc6b2-5feb-4671-ba03-618477668ebc" id="77dbc6b2-5feb-4671-ba03-618477668ebc">限界</h2><p name="f6aa9bfe-db03-4ee0-87a2-c518c9b29386" id="f6aa9bfe-db03-4ee0-87a2-c518c9b29386">Claude ArtifactsとPowerPointのみの利用では、原理的に変換を達成できないケースも存在します：</p><p name="a901d989-aa6a-474b-bc2c-a1d255c0432b" id="a901d989-aa6a-474b-bc2c-a1d255c0432b"><strong>① マーカーの反映は難しい</strong></p><p name="4336fd63-c5ad-4cd5-a6c1-3716ae05c222" id="4336fd63-c5ad-4cd5-a6c1-3716ae05c222">マーカーをSVGで表現しようとするためには、マーカーの太さ、始点と終点のx座標、y座標を明示的に指定する必要があります。文字の幅は一定とは限らないため、特にx座標の厳密な事前計算は困難です。</p><p name="852b386a-6c0d-4487-ad5a-700dd4cac9a3" id="852b386a-6c0d-4487-ad5a-700dd4cac9a3"><strong>② 一部エフェクトが消えてしまう</strong></p><p name="91153dbc-7d13-4aa9-aa5a-606d1614c92a" id="91153dbc-7d13-4aa9-aa5a-606d1614c92a">図形の影など、一部のエフェクトはSVGからPowerPoint図形への変換時に消えてしまうことがあります。ただし、PowerPoint側で後から簡単にエフェクトを追加できるので、問題にならないケースも多いでしょう。</p><p name="3b8b4297-b743-4bf7-8264-e99724541890" id="3b8b4297-b743-4bf7-8264-e99724541890"><strong>③ グラフの再現</strong></p><p name="27c8a0b5-d79e-40e1-a6a2-9b6998b68223" id="27c8a0b5-d79e-40e1-a6a2-9b6998b68223">冒頭でお見せした決算資料の変換結果をよくよく見ると、グラフの再現に失敗しています。</p><p name="5ed5fdbd-c624-4e59-8e4d-c40916cac825" id="5ed5fdbd-c624-4e59-8e4d-c40916cac825">ただしそのような場合でも、<strong>グラフ1つに絞って変換すればうまくいくことが多い</strong>です。SVG変換直前のコードから、Claudeを使って該当グラフのコードを抽出してから、(3)のプロンプトを適用すればokです。</p><figure name="29a162e1-859c-4aa6-bc2b-a49e594cb269" id="29a162e1-859c-4aa6-bc2b-a49e594cb269"><img src="https://assets.st-note.com/img/1741797223-W4gDCE5Uk1RdT6HNjaXSoZru.png?width=1200" alt="" width="620" height="462" loading="lazy"><figcaption></figcaption></figure><h2 name="4537a2fe-cc81-4c57-9262-e48c780957d3" id="4537a2fe-cc81-4c57-9262-e48c780957d3">一部ケースで使える別アプローチ</h2><h3 name="301ffa52-03ab-4a4a-becb-0da620b53dc9" id="301ffa52-03ab-4a4a-becb-0da620b53dc9">「draw.io」形式でエクスポートし編集</h3><p name="d45a5f5d-1564-4056-afdf-7124d37c629b" id="d45a5f5d-1564-4056-afdf-7124d37c629b">フローチャート、ER図といったダイアグラムの図解を作成したい際には、SVGでもHTMLでもなくdraw.io対応のXMLを出力させましょう。専用のサイトを使ってPowerPointよりさらに直感的に編集できます。</p><figure name="f6649a0e-60ca-4c24-84ad-c12c90dd2b3d" id="f6649a0e-60ca-4c24-84ad-c12c90dd2b3d" data-src="https://twitter.com/ai_agent_dev/status/1895679644302786748" data-identifier="null" embedded-service="twitter" embedded-content-key="emb517129b27585"><div data-name="embedContainer"><div data-embed-service="twitter"><span><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">3.7 sonnet → drawioが今のところベストな図の作成方法。特にdrawioにすることで修正ができることが従来との違い。パワポ作成やブログなどの際に図を多用できる。これはわかりやすくビジネスマン全員が使える組み合わせ。 <a href="https://t.co/GzZRYhgt1V">https://t.co/GzZRYhgt1V</a> <a href="https://t.co/xmWryTqnk6">pic.twitter.com/xmWryTqnk6</a></p>— 遠藤巧巳 - AIエージェント受託開発 (@ai_agent_dev) <a href="https://twitter.com/ai_agent_dev/status/1895679644302786748?ref_src=twsrc%5Etfw">March 1, 2025</a></blockquote> </span></div></div></figure><h3 name="d52e7a30-ceea-433a-8ae5-d2ecf619ceac" id="d52e7a30-ceea-433a-8ae5-d2ecf619ceac">「satori」を使用してHTMLをSVGに変換</h3><p name="f1b56236-2d55-4a30-b337-aae28316603e" id="f1b56236-2d55-4a30-b337-aae28316603e">今回は、Claude 3.7 Sonnetの力を借りて言わば<strong>強引にHTMLをSVGに変換しましたが、より確実な方法はないのでしょうか</strong>？<br><br>実は、Claude Artifacts最大の競合ツール「v0」の開発元であるVercel社が、HTML, CSSをSVGに変換するパッケージ「<a href="https://github.com/vercel/satori" target="_blank" rel="noopener noreferrer nofollow">satori</a>」を開発しています。</p><p name="2b3bceac-e674-4de4-8a87-8830c2156d48" id="2b3bceac-e674-4de4-8a87-8830c2156d48">しかし、<a href="https://github.com/vercel/satori" target="_blank" rel="noopener noreferrer nofollow">公式README</a>にも書かれている通り、扱えるフォーマットに制限があり、Claudeの出力をそのまま使用することはもちろん、別途変換をかませるなど工夫を凝らしても、多くのケースで失敗するでしょう。</p><h2 name="fc671ac3-ddd6-4bf3-a7f9-f0752eb697b8" id="fc671ac3-ddd6-4bf3-a7f9-f0752eb697b8">運営元の紹介</h2><p name="8a7cef4d-1abf-40dd-9ab5-965506efe5eb" id="8a7cef4d-1abf-40dd-9ab5-965506efe5eb"><strong>株式会社</strong><a href="https://www.mvrks.co.jp/" target="_blank" rel="noopener noreferrer nofollow"><strong>Mavericks</strong></a><strong>は、プロダクトアウト型のAIスタートアップ</strong>です。動画生成AI「<a href="https://no-lang.com/" target="_blank" rel="noopener noreferrer nofollow">NoLang</a>」や超解像化技術「<a href="https://bit.ly/kakudai-v1" target="_blank" rel="noopener noreferrer nofollow">カクダイ</a>」など、先端的な自社プロダクトを多数保有しています。</p><p name="c36f745b-123b-4124-bc80-b11064ce5573" id="c36f745b-123b-4124-bc80-b11064ce5573">特に<a href="https://no-lang.com/" target="_blank" rel="noopener noreferrer nofollow"><strong>NoLang</strong></a><strong>は、テキストやPDF資料から誰でも簡単に高品質な動画を制作できる動画生成AIサービス</strong>であり、登録者数は10万人を突破しています。<strong>来週に大幅なアップデートを実施</strong>していますので、乞うご期待ください！</p><figure name="78baf15f-8442-4d9b-b49a-95f0a3cfc7ef" id="78baf15f-8442-4d9b-b49a-95f0a3cfc7ef" data-src="https://twitter.com/sayhi2ai_jp/status/1866656285351088433" data-identifier="null" embedded-service="twitter" embedded-content-key="embefee5d46a9f3"><div data-name="embedContainer"><div data-embed-service="twitter"><span><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">【🔥重大発表】🐬NoLang 2.5をリリースしました！！<br><br>超実用的。PDFをナレーション付き解説動画に変換する「PDFプレゼン」機能が登場！<br><br>さらにLive2Dに対応し、立体的かつ生き生きと動くキャラクターを動画に載せられるようになりました！<br><br>まだまだアップデートがあります！無料で試したい方は👇 <a href="https://t.co/gwhxSCBXBo">pic.twitter.com/gwhxSCBXBo</a></p>— マーベリック|生成AI@NoLang (@sayhi2ai_jp) <a href="https://twitter.com/sayhi2ai_jp/status/1866656285351088433?ref_src=twsrc%5Etfw">December 11, 2024</a></blockquote> </span></div></div></figure><p name="39a3f194-7e25-4963-a38b-1641d159b738" id="39a3f194-7e25-4963-a38b-1641d159b738">また、国内外の注目企業の動向分析から最新AIの紹介まで、幅広いAIニュースをまとめて毎週無料で配信しています。過去のバックナンバーは、以下よりご覧いただけます。</p><figure name="9db63e17-bdc2-4004-b165-0791435a674c" id="9db63e17-bdc2-4004-b165-0791435a674c" data-src="https://mvrks.news/" data-identifier="null" embedded-service="external-article" embedded-content-key="emb6e246d260484"><div data-name="embedContainer"><div data-embed-service="external-article"><span><div class="external-article-widget"> <a href="https://mvrks.news/" rel="noopener noreferrer nofollow" target="_blank"> <strong class="external-article-widget-title"> Mavericks AI ニュース </strong> <em class="external-article-widget-description"> 【毎週配信・無料・5分で読める🗓】国内外の注目企業の動向分析から最新AIの紹介まで、幅広いAIニュースを分かりやすく解説👉 </em> <em class="external-article-widget-url"> mvrks.news </em> </a><a class="external-article-widget-image" href="https://mvrks.news/" rel="noopener noreferrer nofollow" style="background-image: url('https://assets.st-note.com/production/uploads/ext/a4bb54ec0f48bed7b28b93191958c8528314744882851e1ab1635a3e3e10.png?x-type=ogp');" target="_blank"></a> </div> </span></div></div></figure><p name="4c10651c-c72e-4994-8161-a35dae5a8587" id="4c10651c-c72e-4994-8161-a35dae5a8587"><br></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="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/%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3" 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> #プレゼン </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/%E5%9B%B3%E8%A7%A3" 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> #図解 </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/HTML" 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> #HTML </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/Claude" 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> #Claude </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0" 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> #プロンプトエンジニアリング </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/PowerPoint" 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> #PowerPoint </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/svg" 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> #svg </div>  </div></a></li><li tabindex="-1" class="m-tagList__item" style="display:;" data-v-4084a5f2><a href="/hashtag/Claude3_7Sonnet" 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> #Claude3_7Sonnet </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="322スキこの記事にスキをつけたユーザーを見る" class="text-text-secondary o-noteLikeV3__count o-noteLikeV3__count--mediumSmall" data-v-5b0bbae8> 322 </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="/note_maverick" 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/121272934/profile_dbec843310414487a658a6cf560e4980.png?width=80&height=80&dpr=2&crop=1:1,smart" alt="Mavericks, Inc" 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="/note_maverick" data-v-6f313185="" class="a-link fn" data-v-6f313185> Mavericks, Inc </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>東京大学・大学院卒のメンバー５人で創業されたチームです。解説動画生成AI「NoLang ( <a href=https://no-lang.com target="_blank" rel="noopener noreferrer nofollow" rel="nofollow noopener">https://no-lang.com</a> )」をはじめとした次世代の生成AIプロダクトを開発しています。Xでも情報発信中です。<a href=https://twitter.com/sayhi2ai_jp target="_blank" rel="noopener noreferrer nofollow" rel="nofollow noopener">https://twitter.com/sayhi2ai_jp</a></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/sayhi2ai_jp" 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-4fdab92e><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="/note_maverick/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-4fdab92e><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-4fdab92e> 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-4fdab92e> 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-4fdab92e> よくある質問・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-4fdab92e> プライバシー </a></li><li class="o-footer__item" data-v-27ddcb3e><a href="/note_maverick/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-4fdab92e> フィードバック </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="/note_maverick/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,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn){aV.id="admin";aV.value="管理者";aW.id="member";aW.value="メンバー";return {layout:"default",data:[{},{completed:f}],fetch:{"data-v-7f26520d:0":{completed:f,devicePixelRatio:q}},error:a,state:{protocol:"https",currentHost:V,currentDomain:V,prefetchData:{infoTrendMessages:[],userPopup:a,uuid:"93f256d1-338e-43ef-98ee-92d11d82fe3a",tid:"09f87f52f5e60de6dc5b97a7937068f2",isDeprecatedDevice:b},childStyles:[],categoryTimeline:{categoryId:d,notes:[],pages:{firstPage:a,lastPage:a,nextPage:a},loading:b,deleteLoading:b,error:a},circleIndex:{trends:{totalCount:r,isLastPage:b,circles:[],page:g},latest:{totalCount:r,isLastPage:b,circles:[],page:g},follows:{totalCount:r,isLastPage:b,circles:[],page:g},pickups:{totalCount:r,isLastPage:b,circles:[],page:g},category:{totalCount:r,isLastPage:b,circles:[],page:g}},contentsUpdate:{contentsUpdates:[]},coupon:{appliedCoupon:a,errored:a},creator:{urlname:W},datasetSettings:{datasetGroupKey:a,dataset:{key:"ue6wLGJ9qsQgmYEPv0z871y6wmBRM5qn",name:c,sort:"desc",isCustom:b},datasetContainers:[],datasetContents:[],categoryOption:{kinds:[],categories:[]}},feature:{currentUserFeatures:{},guestUserFeatures:{graphqlViewer:"ON",pointCampaign202412CurrentUsers:s,pointCampaign202412GuestUsers:X,categoryTravelAaShadow202501:s,topicsAiSectionAbTest202502:s,paypaySubscription:"OFF",notePostingButtonAb:s,supportWordingEnabled:"true"}},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:X},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:B,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:Y,description:C,ogSiteName:Z,ogUrl:t,ogTitle:Y,ogDescription:C,ogImage:D,ogType:"article",twitterSite:"@note_PR",twitterCard:"summary_large_image",twitterAppUrlIphone:"note:\u002F\u002Fnote\u002Fnd07e0f245dae",twitterAppUrlGoogleplay:"note.mu:\u002F\u002Fnote\u002Fnd07e0f245dae",rssUrl:a,structuredData:[{"@context":_,"@type":"BlogPosting",mainEntityOfPage:t,headline:E,keywords:"図解,HTML,PowerPoint,プレゼン,svg,Claude,プロンプトエンジニアリング,Claude3_7Sonnet",datePublished:$,dateModified:j,author:{"@type":m,name:i,url:aa},publisher:{"@type":"Organization",name:Z,logo:{"@type":k,url:"https:\u002F\u002Fassets.st-note.com\u002Fpoc-image\u002Fmanual\u002Fproduction\u002Flogo_202212.png",width:"216",height:"55"}},image:{"@type":k,url:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F178824795\u002F1c00a216bdfe28e2412ec0ad9df3b351.png",width:ab,height:ac},description:C},{"@context":_,"@type":"BreadcrumbList",itemListElement:[{"@type":F,position:g,item:{"@id":u,name:G}},{"@type":F,position:q,item:{"@id":aa,name:i}},{"@type":F,position:x,item:{"@id":t,name:E}}]},{"@context":p,"@type":k,contentUrl:H,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:I,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:J,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:K,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:L,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:M,creator:{"@type":m,name:i}},{"@context":p,"@type":k,contentUrl:N,creator:{"@type":m,name:i}}],customDomain:a,proUserId:a,isNoindex:b,nonCdProUserConfig:a,customThemeColorCode:c,topicConfig:a,thumbnail:D,canonical:t},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(1745938800000),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:"c44b864fd784511e5dc0d2bd2e3a7aada8ba32405bb8c610aca829b596456460",lsCCD:a,gaUid:c,cookies:[],new:f,ccdAck:b,lsDisabled:b},tracking:{pvUuid:c,prevPvUuid:c},url:{currentBaseUrl:u,currentHeadUrl:u,currentNoteBaseUrl:u,currentNoteHeadUrl:u},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:ad,componentType:O,allowContentType:v,selectedContentTypeChildren:new Map([]),initContents:[],currentContents:[],isOfficial:b,isFetching:b,hashtagName:c,categoryNotesChildOptions:[],noteKeywordChildOptions:[],isTopicAdminUser:f,customLinks:[]},sectionModal:{data:a,name:a,sort:ae,displayCount:g,displayType:af,displayCountOptions:[{id:g,value:g},{id:q,value:q},{id:x,value:x},{id:y,value:y},{id:P,value:P},{id:l,value:l},{id:ag,value:ag},{id:Q,value:Q},{id:ah,value:ah},{id:ai,value:ai},{id:aj,value:aj},{id:ak,value:ak},{id:al,value:al},{id:R,value:R},{id:am,value:am},{id:an,value:an},{id:ao,value:ao},{id:ap,value:ap},{id:S,value:S},{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:T,value:T},{id:ax,value:ax},{id:ay,value:ay},{id:az,value:az},{id:U,value:U},{id:aA,value:aA},{id:aB,value:aB},{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}],displayTypeOptions:[{id:af,value:"3カラム"},{id:"two_column",value:"2カラム"},{id:"one_column",value:"1カラム"},{id:"horizontal",value:"横スクロール"},{id:"carousel",value:"カルーセル"}],componentTypeOptions:[{id:O,value:"中"},{id:"small",value:"小"}],contentType:ad,componentType:O,sortOrder:g,postion:"body"},settingsBasic:{statusOptions:[{id:B,value:aT},{id:z,value:aU}]},settingsMemberModal:{topic:c,user:c,role:c,status:c,topicUsers:[],allRole:[{id:"root",value:"オーナー"},aV,aW],roleOptions:[aV,aW],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:B,value:aT},{id:z,value:aU}]},topicList:{mylist:[]}},pages:{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:l,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},note:{kind:G,per:l,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},paid_note:{kind:G,per:l,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:f},magazine:{kind:"magazine",per:l,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},rss_store:{kind:"rss_store",per:l,page:g,publishOn:a,disabledPinned:b,menuId:a,withNotes:b,paidOnly:b},user_jobs:{kind:"user_jobs",per:l,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:z,isTopicUser:b,currentPage:{urlname:c,name:c,tabname:c,description:c,sort:g,isTop:b,layout:c,status:z,urlPath:c}},recommneded:{notes:[]},creatorWidgets:[],primarySubscribableMagazine:e,psmPurchasingInfo:e,psmSubscription:e,membershipNotes:[],usersInRelationship:e,membershipRecordSummary:e,const:{}},creatorGallery:{images:[],allOrShared:v,period:v,page:g,isLastPage:b,cancelRequest:{imageFilter:{allOrShared:v,period:v},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:106786636,userId:aX,status:ae,type:"TextNote",key:"nd07e0f245dae",slug:"slug-nd07e0f245dae",name:E,body:"\u003Cp name=\"2d1db8e1-8d07-43fe-95fb-3592e82e3c32\" id=\"2d1db8e1-8d07-43fe-95fb-3592e82e3c32\"\u003E\u003Cstrong\u003EClaude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成\u003C\u002Fstrong\u003Eすることができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。\u003C\u002Fp\u003E\u003Cfigure name=\"6f54523f-1bb6-4db3-b58b-b61689d68ee6\" id=\"6f54523f-1bb6-4db3-b58b-b61689d68ee6\" data-src=\"https:\u002F\u002Ftwitter.com\u002FSuguruKun_ai\u002Fstatus\u002F1898549311794995602\" data-identifier=\"null\" embedded-service=\"twitter\" embedded-content-key=\"emb636ce4b91d0a\"\u003E\u003Cdiv data-name=\"embedContainer\"\u003E\u003Cdiv data-embed-service=\"twitter\"\u003E\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003EClaude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。\u003Cbr\u003Eㅤ\u003Cbr\u003Eバズった「グラレコプロンプト」を参考に作成した、\u003Cbr\u003Eㅤ\u003Cbr\u003E幅広く使える有益デザインプロンプト10選をまとめました👇🧵 \u003Ca href=\"https:\u002F\u002Ft.co\u002Fal5n7Udf3c\"\u003Epic.twitter.com\u002Fal5n7Udf3c\u003C\u002Fa\u003E\u003C\u002Fp\u003E— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FSuguruKun_ai\u002Fstatus\u002F1898549311794995602?ref_src=twsrc%5Etfw\"\u003EMarch 9, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\n\n\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"7d966749-7b4a-4d0d-a545-3b84f305d57d\" id=\"7d966749-7b4a-4d0d-a545-3b84f305d57d\"\u003Eしかし残念なことに、\u003Cstrong\u003E生成された図解の編集は困難を極めます\u003C\u002Fstrong\u003E。Claudeに指示を出すことである程度は修正できるものの、言うことを中々聞いてくれずトークン切れにあったり、時間がかかりすぎて時短になっていなかったり、自前の素材と組み合わせることはできなかったり…\u003C\u002Fp\u003E\u003Cp name=\"04657534-7639-4f4c-88ef-f6738a0f1e7d\" id=\"04657534-7639-4f4c-88ef-f6738a0f1e7d\"\u003Eこのような問題を解決すべく、\u003Cstrong\u003EClaude 3.7 Sonnetで生成した図解（SVG, HTML）をPowerPointで編集可能にする\u003C\u002Fstrong\u003Eために、試行錯誤を重ねました。その結果、以下のような複雑な図解に対しても再現性高く変換できる術を見つけたので、詳しく解説していきます。\u003C\u002Fp\u003E\u003Cfigure name=\"b39a91f8-fae7-4e02-b068-d10a7311a558\" id=\"b39a91f8-fae7-4e02-b068-d10a7311a558\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741827739-0Di5JmQ2uyGgBcYdLXZqteAW.png?width=1200\" alt=\"\" width=\"620\" height=\"364\" loading=\"lazy\"\u003E\u003Cfigcaption\u003EAIニュースを黒板風にまとめた図解\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Cfigure name=\"7ad3b8d4-a18c-440c-838b-a81fe0fca5f6\" id=\"7ad3b8d4-a18c-440c-838b-a81fe0fca5f6\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741788865-0UFNmYz9JO1MWs2qb7XjPQBf.png?width=1200\" alt=\"\" width=\"620\" height=\"379\" loading=\"lazy\"\u003E\u003Cfigcaption\u003E情報量の多い決算資料\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ctable-of-contents name=\"21cf4f52-9e03-4607-873c-0812841eec47\" id=\"21cf4f52-9e03-4607-873c-0812841eec47\"\u003E\u003Cbr\u003E\u003C\u002Ftable-of-contents\u003E\u003Ch2 name=\"9430541d-18cd-4f3d-bdfd-f6bea2357a0a\" id=\"9430541d-18cd-4f3d-bdfd-f6bea2357a0a\"\u003E自己紹介\u003C\u002Fh2\u003E\u003Cp name=\"388bbe33-3d15-4835-a108-bffc032e331e\" id=\"388bbe33-3d15-4835-a108-bffc032e331e\"\u003E\u003Cstrong\u003E動画生成AI「\u003C\u002Fstrong\u003E\u003Ca href=\"https:\u002F\u002Fno-lang.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E\u003Cstrong\u003ENoLang\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong\u003E」\u003C\u002Fstrong\u003Eの運営・開発をしています！noteにて、\u003Cstrong\u003E毎週配信でAI情報もお届け\u003C\u002Fstrong\u003Eしていますので、本記事がためになったという方は是非\u003Ca href=\"https:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fm\u002Fmcf40f61545f4\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003Eこちら\u003C\u002Fa\u003Eもご覧ください！\u003C\u002Fp\u003E\u003Cfigure name=\"c48d8956-9834-44bc-bddc-8847c2f3f03b\" id=\"c48d8956-9834-44bc-bddc-8847c2f3f03b\" data-src=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1901436561369309485\" data-identifier=\"null\" embedded-service=\"twitter\" embedded-content-key=\"emb309ec7aa6718\"\u003E\u003Cdiv data-name=\"embedContainer\"\u003E\u003Cdiv data-embed-service=\"twitter\"\u003E\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E【🔥重大発表】🐬NoLang 3.0をリリースしました！\u003Cbr\u003E\u003Cbr\u003E縦型ショート動画を直接生成・編集可能に。今だけ無料で試せます！\u003Cbr\u003E\u003Cbr\u003Eさらに編集機能が一新され、制作できる動画の幅が大きく広がりました！\u003Cbr\u003E\u003Cbr\u003E他にも、「どんなPDFも1分要約」「話題の画像生成AI Imagen3」など注目機能が盛り沢山。詳しくは👇 \u003Ca href=\"https:\u002F\u002Ft.co\u002FrZc9dDB7ao\"\u003Epic.twitter.com\u002FrZc9dDB7ao\u003C\u002Fa\u003E\u003C\u002Fp\u003E— マーベリック|生成AI@NoLang (@sayhi2ai_jp) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1901436561369309485?ref_src=twsrc%5Etfw\"\u003EMarch 17, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\n\n\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\u003Ch2 name=\"f92fa48e-c3b1-45c4-b175-19e47eab67f9\" id=\"f92fa48e-c3b1-45c4-b175-19e47eab67f9\"\u003Eはじめに：SVGとHTML\u003C\u002Fh2\u003E\u003Cp name=\"fddc7398-6f84-48bd-83ce-e698d1f43545\" id=\"fddc7398-6f84-48bd-83ce-e698d1f43545\"\u003EClaude 3.7 Sonnetで出力可能な図解は、多くの場合SVGまたはHTMLの形式となります。両者の間には以下のような違いがあります。\u003C\u002Fp\u003E\u003Cul name=\"02332bb5-c9a7-401f-a2f3-6831db819d24\" id=\"02332bb5-c9a7-401f-a2f3-6831db819d24\"\u003E\u003Cli\u003E\u003Cp name=\"cb8e26ff-1a02-4fbe-a5b5-1c018b9b239c\" id=\"cb8e26ff-1a02-4fbe-a5b5-1c018b9b239c\"\u003E\u003Cstrong\u003ESVG:\u003C\u002Fstrong\u003E ベクター画像の一種で、イラストや図形の描画に使われる。座標は\u003Cstrong\u003E「絶対値」かつ「静的」\u003C\u002Fstrong\u003Eに定義される\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp name=\"6d31dca0-a2d6-4c61-b148-25923062d889\" id=\"6d31dca0-a2d6-4c61-b148-25923062d889\"\u003E\u003Cstrong\u003EHTML:\u003C\u002Fstrong\u003E Webページを表示するために使われる。座標は\u003Cstrong\u003E「相対値」\u003C\u002Fstrong\u003Eで定義され、レスポンシブデザインが適用されると\u003Cstrong\u003E「動的」にもなる\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp name=\"8e5472bb-f345-40b1-bc61-c50298b85e44\" id=\"8e5472bb-f345-40b1-bc61-c50298b85e44\"\u003EClaudeで生コードを確認したときに、コードの冒頭が<svg>タグで始まるならSVGであり、そうでない場合は基本的にHTMLとなります。\u003C\u002Fp\u003E\u003Cp name=\"5a387ad5-0f08-4a0f-9deb-07d3b412c57f\" id=\"5a387ad5-0f08-4a0f-9deb-07d3b412c57f\"\u003ESVGはPowerPointとの相性が良く、ワンクリックでPowerPoint用の図形に変換することができます。しかし愚直にやると\u003Cstrong\u003Eレイアウトが崩れるという落とし穴\u003C\u002Fstrong\u003Eがあるので、回避方法を説明します（次章）。\u003C\u002Fp\u003E\u003Cp name=\"f23afc48-4682-4e8f-8aa9-1afa5df1e7b9\" id=\"f23afc48-4682-4e8f-8aa9-1afa5df1e7b9\"\u003EHTMLは本来PowerPointの図形には変換不可能です。しかし、Claude 3.7 Sonnetが非常に優秀であるため、HTMLとSVGの構造差を理解した上で適切にプロンプトを設計することで、\u003Cstrong\u003E見た目の変更を最小限にしつつ、HTMLをSVGに変換できます\u003C\u002Fstrong\u003E（次々章）。これにより、HTMLもSVGを経由してPowerPoint用の図形に変換できます。\u003C\u002Fp\u003E\u003Cfigure name=\"d3b2168c-e97d-4f47-9b0e-f3e33a997a26\" id=\"d3b2168c-e97d-4f47-9b0e-f3e33a997a26\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741766510-ohInFeTvuj2KNf6prLaCkqli.png?width=1200\" alt=\"\" width=\"620\" height=\"380\" loading=\"lazy\"\u003E\u003Cfigcaption\u003Eこちらも、Claude 3.7 Sonnetで作成したSVGをPowerPointで編集して制作\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ch2 name=\"08ff959e-5a0e-4331-84fa-681284ddaad9\" id=\"08ff959e-5a0e-4331-84fa-681284ddaad9\"\u003ESVGを「レイアウトを崩さずに」PowerPointで編集可能にする方法\u003C\u002Fh2\u003E\u003Cp name=\"a9228397-2f8c-4d9b-84cf-495f21312855\" id=\"a9228397-2f8c-4d9b-84cf-495f21312855\"\u003E①まずPowerPointにSVG画像を挿入します。上部のバーから「挿入」→「写真」→「図をファイルから挿入」として、該当画像を読み込みましょう。\u003C\u002Fp\u003E\u003Cp name=\"f264e235-d1f9-44db-ac05-227aafbe761f\" id=\"f264e235-d1f9-44db-ac05-227aafbe761f\"\u003E② SVG画像を右クリックして「配置とサイズ」を選択します。右からサイドバーが現れるので、左から3つ目のアイコンを選択して、\u003Cstrong\u003E「高さの倍率」「幅の倍率」をそれぞれ100%に設定\u003C\u002Fstrong\u003Eします。\u003C\u002Fp\u003E\u003Cfigure name=\"da049e57-7abd-4515-8b93-1c631c6003cd\" id=\"da049e57-7abd-4515-8b93-1c631c6003cd\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753610-xmtVYkw6pd9cKuI0WqBe1FS4.png?width=1200\" alt=\"\" width=\"620\" height=\"321\" loading=\"lazy\"\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"22c167e4-a697-4718-9a88-0d18bc250c91\" id=\"22c167e4-a697-4718-9a88-0d18bc250c91\"\u003E③ 最後にSVG画像を選択した状態で、上部のバーから「グラフィックス形式」を選択し「図形に変換」を押下しましょう。\u003C\u002Fp\u003E\u003Cfigure name=\"e21e9b91-eb96-4f8a-b123-94f92001c6fc\" id=\"e21e9b91-eb96-4f8a-b123-94f92001c6fc\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753671-LxFJldUwoK9q4Parc3BHt8un.png?width=1200\" alt=\"\" width=\"620\" height=\"423\" loading=\"lazy\"\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"50845ffb-4183-4ec9-8642-38fddc2e3e59\" id=\"50845ffb-4183-4ec9-8642-38fddc2e3e59\"\u003Eすると以下のように、SVG画像がPowerPointで編集可能なオブジェクトへと変換され、自由に位置・サイズ・フォントなどを調整できるようになります。\u003C\u002Fp\u003E\u003Cfigure name=\"26d4e26a-0254-44b2-80f5-06a3a8edc139\" id=\"26d4e26a-0254-44b2-80f5-06a3a8edc139\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753702-xcyWP17n83Zg0EIbLQwvNheX.png?width=1200\" alt=\"\" width=\"620\" height=\"470\" loading=\"lazy\"\u003E\u003Cfigcaption\u003Eこの状況でClaude Sonnetに修正させるのは地味に大変ですが、このようにPowerPoint図形まで変換できれば、あとは直感的に編集できます。\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"0d065892-28fa-4403-9b5c-077a48aec39f\" id=\"0d065892-28fa-4403-9b5c-077a48aec39f\"\u003Eここで、工程②を飛ばしていきなり変換しようとすると、変換後に文字サイズが変わるなどしてレイアウト崩れを起こしてしまいます。必ず画像の縮尺が100%になっていることを確認してください。\u003C\u002Fp\u003E\u003Cfigure name=\"74884949-ffe0-41a0-a90c-dc9a56cf9538\" id=\"74884949-ffe0-41a0-a90c-dc9a56cf9538\"\u003E\u003Cblockquote\u003E\u003Cp name=\"0389a5dc-8ea4-49af-9c9d-04bee63fe473\" id=\"0389a5dc-8ea4-49af-9c9d-04bee63fe473\"\u003E\u003Cstrong\u003E⚠️補足：\u003C\u002Fstrong\u003Eもしこのやり方でうまくいかなかった場合は、SVGファイルをPowerPoint変換に対応させる必要があります。詳しくは次章(3)内の「プロンプトに関する解説」をご覧ください。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ch2 name=\"b13c11c9-6df7-45e5-b580-a43ee16fb4aa\" id=\"b13c11c9-6df7-45e5-b580-a43ee16fb4aa\"\u003EHTMLを強引にSVGに変換するための3つのプロンプト\u003C\u002Fh2\u003E\u003Cp name=\"0a7752ce-03a2-4fe1-9da0-ecd9f9386cb2\" id=\"0a7752ce-03a2-4fe1-9da0-ecd9f9386cb2\"\u003E\u003Cstrong\u003EClaude 3.7 Sonnetの「Extended」モードに対して複数のプロンプトを適用\u003C\u002Fstrong\u003Eすることで、座標が「動的」かつ「相対値」で定義されるHTMLを、座標が「静的」かつ「絶対値」で定義されるSVGに変換していきます。\u003C\u002Fp\u003E\u003Cfigure name=\"87be837e-0a1e-42e7-b208-710808c542cf\" id=\"87be837e-0a1e-42e7-b208-710808c542cf\"\u003E\u003Cblockquote\u003E\u003Cp name=\"6ad470e8-dabc-4e9e-87a6-72e1c98bec27\" id=\"6ad470e8-dabc-4e9e-87a6-72e1c98bec27\"\u003E\u003Cstrong\u003E🧳準備：\u003C\u002Fstrong\u003EClaudeの有料プランに課金して、Claude 3.7 Sonnetの「Extended」モードが使用可能な状態にしておく必要があります。「Normal」モードでも実行自体は可能ですが、成功確率が大きく下がってしまうため非推奨です。また、プロンプトのペーストを頻繁に使用するので、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FClipy\u002FClipy\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003EClipy\u003C\u002Fa\u003Eのスニペット機能などを活用することをお勧めします。\u003Cbr\u003E\u003Cbr\u003E\u003Cstrong\u003E💡 手順だけ知りたいという方向け：\u003C\u002Fstrong\u003EClaude 3.7 Sonnetの「Extended」モードで、(1), (2), (3)のプロンプトを、チャットを変えつつ順々に適用していくだけでokです。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ch3 name=\"963912e1-4653-4534-908b-a3dbc544ec7a\" id=\"963912e1-4653-4534-908b-a3dbc544ec7a\"\u003E(1) レスポンシブを無効化する\u003C\u002Fh3\u003E\u003Cp name=\"d5a27ecf-d724-4241-9734-253e2b28d4e9\" id=\"d5a27ecf-d724-4241-9734-253e2b28d4e9\"\u003EClaude 3.7 Sonnetが出力するHTMLは通常、画面サイズによって表示が変わるレスポンシブデザインになっています。このままだと\u003Cstrong\u003E各要素の座標が定まらないのはもちろん、一行に配置される要素数が変わってしまうこともあるため、無効化\u003C\u002Fstrong\u003Eします。Artifactsでレンダリングされるように指示することで、もしミスがあった場合は修正をしてもらうことができます。\u003C\u002Fp\u003E\u003Cp name=\"3cf68f97-1e8f-45a4-8d46-b7d99db0fcfd\" id=\"3cf68f97-1e8f-45a4-8d46-b7d99db0fcfd\"\u003E図解を添付して、以下のプロンプトを実行してみましょう。\u003C\u002Fp\u003E\u003Cpre name=\"bd676380-ba5f-408c-8e18-3796854df577\" id=\"bd676380-ba5f-408c-8e18-3796854df577\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs\" data-name=\"code\"\u003Eレスポンシブを完全に無効化して座標固定して。ただしArtifactsでしっかりレンダリングされるように\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp name=\"b071f32f-4418-4185-8245-e5a3f5d9384e\" id=\"b071f32f-4418-4185-8245-e5a3f5d9384e\"\u003Eなおレスポンシブデザインかどうかは、実際に画面幅を変えた時に、Artifactsの表示画面が変化するかどうかで確かめられます。\u003C\u002Fp\u003E\u003Ch3 name=\"4726a8b8-a691-4634-990c-7e1ef9b02d06\" id=\"4726a8b8-a691-4634-990c-7e1ef9b02d06\"\u003E(2) SVGに変換しやすいコードに変換する\u003C\u002Fh3\u003E\u003Cp name=\"11db5c9c-92c6-4c30-98a4-31493c76458f\" id=\"11db5c9c-92c6-4c30-98a4-31493c76458f\"\u003Eレスポンシブ以外にも、SVGへの変換を困難にする様々な要因があります。例えばTailwindと呼ばれるCSSフレームワークが使用されている場合、サイズ情報がピクセル値ではなくクラス名で指定されるため、明示的にピクセル値が記述されるように変換すべきです。\u003C\u002Fp\u003E\u003Cp name=\"dba52ea5-fe62-4365-9e7f-26306d1f3eef\" id=\"dba52ea5-fe62-4365-9e7f-26306d1f3eef\"\u003E別チャットを開いた上で、先ほどの出力結果を添付して以下のプロンプトを実行しましょう。\u003Cstrong\u003E表示結果を維持したまま、「よりSVGに変換しやすいコード」へと変換\u003C\u002Fstrong\u003Eしてくれます。\u003C\u002Fp\u003E\u003Cpre name=\"50e2966e-dda2-4366-8741-17bca73c672c\" id=\"50e2966e-dda2-4366-8741-17bca73c672c\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs swift\" data-name=\"code\"\u003Eこのコードでレンダリングされるwebページ全体を\u003Cspan class=\"hljs-type\"\u003ESVG\u003C\u002Fspan\u003Eに変換したいです。その前段階として以下の条件を守って、レンダリング結果は同じだが\u003Cspan class=\"hljs-type\"\u003ESVG\u003C\u002Fspan\u003Eに変換しやすいコードに変換して\u003Cspan class=\"hljs-type\"\u003EArtifacts\u003C\u002Fspan\u003Eに出力してみて。(\u003Cspan class=\"hljs-type\"\u003ESVG\u003C\u002Fspan\u003Eへの変換はまだ行わないでください）\n\n・\u003Cspan class=\"hljs-type\"\u003ETailwind\u003C\u002Fspan\u003Eが使用されている場合は、以下の表を参考にサイズを明示的に記載する形に変換して\n<supplementary>\n<textSize> text-xs:12px, text-sm:14px, text-base:16px, text-lg:18px, text-xl:20px, text-2xl:24px, text-3xl:30px, text-4xl:36px, text-5xl:48px, text-6xl:60px, text-7xl:72px, text-8xl:96px, text-9xl:128px <\u002FtextSize> <maxWidth> \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-xs:320px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-sm:384px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-md:448px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-lg:512px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-xl:576px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-2xl:672px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-3xl:768px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-4xl:896px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-5xl:1024px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-6xl:1152px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-7xl:1280px, \u003Cspan class=\"hljs-built_in\"\u003Emax\u003C\u002Fspan\u003E-w-full:\u003Cspan class=\"hljs-number\"\u003E100\u003C\u002Fspan\u003E% <\u002FmaxWidth> <widthHeight> w-\u003Cspan class=\"hljs-number\"\u003E1\u003C\u002Fspan\u003E:4px, w-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:8px, w-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:16px, w-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:32px, w-\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E:64px, w-\u003Cspan class=\"hljs-number\"\u003E32\u003C\u002Fspan\u003E:128px, w-\u003Cspan class=\"hljs-number\"\u003E64\u003C\u002Fspan\u003E:256px, w-full:\u003Cspan class=\"hljs-number\"\u003E100\u003C\u002Fspan\u003E% h-\u003Cspan class=\"hljs-number\"\u003E1\u003C\u002Fspan\u003E:4px, h-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:8px, h-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:16px, h-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:32px, h-\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E:64px, h-\u003Cspan class=\"hljs-number\"\u003E32\u003C\u002Fspan\u003E:128px, h-\u003Cspan class=\"hljs-number\"\u003E64\u003C\u002Fspan\u003E:256px, h-full:\u003Cspan class=\"hljs-number\"\u003E100\u003C\u002Fspan\u003E% <\u002FwidthHeight> <paddingMarginGap> p-\u003Cspan class=\"hljs-number\"\u003E1\u003C\u002Fspan\u003E:4px, p-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:8px, p-\u003Cspan class=\"hljs-number\"\u003E3\u003C\u002Fspan\u003E: 12px, p-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:16px, p-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:32px, p-\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E:64px m-\u003Cspan class=\"hljs-number\"\u003E1\u003C\u002Fspan\u003E:4px, m-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:8px, m-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:16px, m-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:32px, m-\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E:64px gap-\u003Cspan class=\"hljs-number\"\u003E1\u003C\u002Fspan\u003E:4px, gap-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:8px, gap-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:16px, gap-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:32px, gap-\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E:64px <\u002FpaddingMarginGap> <round> rounded-sm:2px, rounded:4px, rounded-md:6px, rounded-lg:8px, rounded-xl:12px, rounded-2xl:16px, rounded-3xl:24px, rounded-full:9999px <\u002Fround> <border> border:1px, border-\u003Cspan class=\"hljs-number\"\u003E2\u003C\u002Fspan\u003E:2px, border-\u003Cspan class=\"hljs-number\"\u003E4\u003C\u002Fspan\u003E:4px, border-\u003Cspan class=\"hljs-number\"\u003E8\u003C\u002Fspan\u003E:8px <\u002Fborder>\n<\u002Fsupplementary>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp name=\"36c832e2-2c92-4ce1-8181-9e6cd6c65288\" id=\"36c832e2-2c92-4ce1-8181-9e6cd6c65288\"\u003E結果はArtifactsで表示されないことがありますが、気にせず次のステップに進んでokです。\u003C\u002Fp\u003E\u003Ch3 name=\"187dd415-9e4a-458e-a78d-806ad754c7ce\" id=\"187dd415-9e4a-458e-a78d-806ad754c7ce\"\u003E(3) 「座標の計算に注意」してSVGに変換\u003C\u002Fh3\u003E\u003Cp name=\"07394c68-25de-46c0-8e48-500967651f24\" id=\"07394c68-25de-46c0-8e48-500967651f24\"\u003EいよいよSVGに変換していきます。以下のプロンプトを実行しましょう。途中で一回当たりのトークン制限に引っかかって停止してしまうことがありますが、気にせず「continue」と打って生成を続けて構いません。\u003C\u002Fp\u003E\u003Cpre name=\"3757c0ea-f188-42a9-9e38-39745ad7f069\" id=\"3757c0ea-f188-42a9-9e38-39745ad7f069\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs swift\" data-name=\"code\"\u003E以下の条件を守って、このコードを\u003Cspan class=\"hljs-type\"\u003ESVG\u003C\u002Fspan\u003Eに変換して。\n\n・foreignObjectは使ってはいけません\n・アイコンを描画する際は、svgタグでviewBoxを作ると良いです\n・座標指定にgタグを積極的に用いるが、dy属性は用いないでください\n・テキスト表示にあたっては、以下<\u003Cspan class=\"hljs-type\"\u003EExample\u003C\u002Fspan\u003E>のように各行ごとにtextタグで囲み、さらに強調がある場合は、tspanを使って区別して\n・gタグのy座標決めるときは、以下<\u003Cspan class=\"hljs-type\"\u003EExample\u003C\u002Fspan\u003E>のように計算するコメントアウトを必ず入れて。\n\n<\u003Cspan class=\"hljs-type\"\u003EExample\u003C\u002Fspan\u003E>\n```\n…\n\n<g transform=\u003Cspan class=\"hljs-string\"\u003E\"translate(0, 200)”>\n<text x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E44\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E14\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-family=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-type\"\u003EArial\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-size=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">\n<tspan>NoLangは<\u002Ftspan>\n<tspan fill=\"\u003C\u002Fspan\u003E#db2777\u003Cspan class=\"hljs-string\"\u003E\" font-weight=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">国内発の動画生成AI<\u002Ftspan>\n<tspan>です。<\u002Ftspan>\n<\u002Ftext>\n<text x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E44\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E38\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-family=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-type\"\u003EArial\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-size=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">\nあらゆる資料を動画へと変換します。\n<\u002Ftext>\n<rect x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" width=“160” height=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E58\u003C\u002Fspan\u003E” fill=\u003Cspan class=\"hljs-string\"\u003E\"#A0D1FF\"\u003C\u002Fspan\u003E\u002F>\u2028<\u002Fg>\u2028\n<g transform=\u003Cspan class=\"hljs-string\"\u003E\"translate(0, 266)”>\n…\n```\n<\u002FExample>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cfigure name=\"b39d41af-6019-49e7-8330-021b73a0febd\" id=\"b39d41af-6019-49e7-8330-021b73a0febd\"\u003E\u003Cblockquote\u003E\u003Cp name=\"d865ff1a-ee8e-48bf-8fb5-7d814edd75f5\" id=\"d865ff1a-ee8e-48bf-8fb5-7d814edd75f5\"\u003E\u003Cstrong\u003E📗プロンプトに関する解説：\u003Cbr\u003E・\u003C\u002Fstrong\u003E<foreignObject>タグは、SVG内にHTMLなどのXMLベース要素を埋め込むために使われますが、PowerPointでは描画されないため使用を禁じます。\u003Cbr\u003E・<g>タグによって要素をグループ化することができるので積極的な利用を促します。\u003Cbr\u003E・座標を相対値で表現できるdy属性を持つタグがあると、PowerPoint図形の変換時にレイアウトが崩れるため、使用を禁じます。\u003Cbr\u003E・HTMLが「相対座標」であるのに対しSVGは「絶対座標」であるため、SVGへの変換時に相対座標を加算していく必要があります。このとき、要素がいくつも積み上がる垂直方向の計算は難しく間違えがちです。そこで、\u003Cstrong\u003Eコメント内で明示的に計算するよう指示することで、計算ミスが大幅に減り、レイアウト崩れを起こしにくくなります。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ch2 name=\"17ad5dad-a275-4f78-be73-1a4890258b2a\" id=\"17ad5dad-a275-4f78-be73-1a4890258b2a\"\u003Eコーナーケースへの対処\u003C\u002Fh2\u003E\u003Cp name=\"ea153f59-997f-4c53-b7e2-0386df568fd8\" id=\"ea153f59-997f-4c53-b7e2-0386df568fd8\"\u003E上記の3ステップによる変換は、全てのケースをカバーできているわけではありません。ここではいくつかのコーナーケースに対する対処法を紹介します。\u003C\u002Fp\u003E\u003Ch3 name=\"941f59b3-c64e-4453-888b-19756b554c00\" id=\"941f59b3-c64e-4453-888b-19756b554c00\"\u003E(1') スクロール不要になるまで高さ・幅を拡張する\u003C\u002Fh3\u003E\u003Cp name=\"e2c313a8-3e8e-4446-b711-bb1bc294cb88\" id=\"e2c313a8-3e8e-4446-b711-bb1bc294cb88\"\u003E(1) にてレスポンシブの無効化が終了した時点で、webブラウザで文字サイズをどれだけ小さくしても生成されたHTMLがスクロール可能だった場合、SVG変換後に見切れてしまいます。そこでスクロール不要になるまで表示枠の大きさを拡張します。\u003C\u002Fp\u003E\u003Cpre name=\"ae754c00-2281-45fb-ae2f-90c0a6444005\" id=\"ae754c00-2281-45fb-ae2f-90c0a6444005\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs cpp\" data-name=\"code\"\u003Eスクロール不要になるようにしたいです。レスポンシブ無効を維持したままま、overflow: \u003Cspan class=\"hljs-keyword\"\u003Eauto\u003C\u002Fspan\u003Eがあれば取り除いた上で、枠の高さだけx倍, 幅をy倍に増やしてみて。ただし上端や左端が見切れないように。他は何も変えないで\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp name=\"8c7caef4-6d52-401d-b17c-b232781028d9\" id=\"8c7caef4-6d52-401d-b17c-b232781028d9\"\u003E最後に編集するのであれば厳密な計算は必要ありません。余裕を持って大きめの値に設定しておきましょう。\u003C\u002Fp\u003E\u003Ch3 name=\"3ae603a2-8f99-4651-b3f2-33e88504a28d\" id=\"3ae603a2-8f99-4651-b3f2-33e88504a28d\"\u003E(3') テキストの改行を調整する\u003C\u002Fh3\u003E\u003Cp name=\"82c815d1-7285-4f5e-91d7-3a6999886b1c\" id=\"82c815d1-7285-4f5e-91d7-3a6999886b1c\"\u003EHTMLではテキストの入る箱の大きさを決めれば自動で改行されるのに対し、SVGでは改行を1つ1つ明示的に記述する必要があるため、\u003Cstrong\u003E変換後のSVGに必要なはずの改行が含まれていないケースが多々あります\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Cp name=\"20843ff7-30d9-45e4-ad2e-f24069967860\" id=\"20843ff7-30d9-45e4-ad2e-f24069967860\"\u003Eその場合は(3)でSVGを出力した後に、以下のプロンプトを用いてSVGを修正してもらいましょう。\u003C\u002Fp\u003E\u003Cpre name=\"ddc0184e-90bd-4128-961b-fd3b9a3bfd55\" id=\"ddc0184e-90bd-4128-961b-fd3b9a3bfd55\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs\" data-name=\"code\"\u003E・各要素の幅を考慮して、テキストを適切に改行し、合わせて他の要素も修正して\n・(再掲) gタグのy座標を決めるときは、計算用のコメントアウトを必ず入れて\n・変更箇所は少ないので、差分修正でokです\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Ch3 name=\"db3d9319-c4ca-4347-8fc3-e7f83f1f2fcb\" id=\"db3d9319-c4ca-4347-8fc3-e7f83f1f2fcb\"\u003E(3'') 枠の大きさを調整する\u003C\u002Fh3\u003E\u003Cp name=\"906cb2fc-7406-4109-bfdb-fbbaf9e551e1\" id=\"906cb2fc-7406-4109-bfdb-fbbaf9e551e1\"\u003E(3) では<g>タグのy座標を明示的に計算させましたが、\u003Cstrong\u003E枠の役割を果たす<rect>タグにおいても、高さの計算に失敗するケースが多い\u003C\u002Fstrong\u003Eです。\u003C\u002Fp\u003E\u003Cp name=\"ff3d25e7-770b-4413-b3c3-c39d33f93538\" id=\"ff3d25e7-770b-4413-b3c3-c39d33f93538\"\u003Eその場合は、(3)でSVGを出力した後に、以下のプロンプトを用いてSVGを修正してもらいましょう。ただし、最後にPowerPointで編集可能なので、完璧を目指す必要はありません。\u003C\u002Fp\u003E\u003Cpre name=\"81508032-7936-4ea9-aa5d-a8404c4f5537\" id=\"81508032-7936-4ea9-aa5d-a8404c4f5537\" data-name=\"preCode\"\u003E\u003Ccode class=\"hljs swift\" data-name=\"code\"\u003E・gタグ内のrectタグの高さを決める時も、以下<\u003Cspan class=\"hljs-type\"\u003EExample\u003C\u002Fspan\u003E>のように計算するコメントアウトを入れて欲しいです。そして計算結果が元の値と異なったら、高さも修正して\n・高さが変わったら、依存関係がある要素の位置も修正して\n\n<\u003Cspan class=\"hljs-type\"\u003EExample\u003C\u002Fspan\u003E>\n```\n…\n\n<g transform=\u003Cspan class=\"hljs-string\"\u003E\"translate(0, 200)”>\n<text x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E44\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E14\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-family=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-type\"\u003EArial\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-size=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">\n<tspan>NoLangは<\u002Ftspan>\n<tspan fill=\"\u003C\u002Fspan\u003E#db2777\u003Cspan class=\"hljs-string\"\u003E\" font-weight=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">国内発の動画生成AI<\u002Ftspan>\n<tspan>です。<\u002Ftspan>\n<\u002Ftext>\n<text x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E44\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E38\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-family=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-type\"\u003EArial\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" font-size=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E16\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\">\nあらゆる資料を動画へと変換します。\n<\u002Ftext>\n\n<rect x=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" y=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-string\"\u003E\" width=“160” height=\"\u003C\u002Fspan\u003E\u003Cspan class=\"hljs-number\"\u003E58\u003C\u002Fspan\u003E” fill=\u003Cspan class=\"hljs-string\"\u003E\"#A0D1FF\"\u003C\u002Fspan\u003E\u002F>\u2028<\u002Fg>\u2028\n<g transform=\u003Cspan class=\"hljs-string\"\u003E\"translate(0, 266)”>\n…\n```\n<\u002FExample>\n\n変更箇所は少ないので、差分修正でokです\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Ch2 name=\"77dbc6b2-5feb-4671-ba03-618477668ebc\" id=\"77dbc6b2-5feb-4671-ba03-618477668ebc\"\u003E限界\u003C\u002Fh2\u003E\u003Cp name=\"f6aa9bfe-db03-4ee0-87a2-c518c9b29386\" id=\"f6aa9bfe-db03-4ee0-87a2-c518c9b29386\"\u003EClaude ArtifactsとPowerPointのみの利用では、原理的に変換を達成できないケースも存在します：\u003C\u002Fp\u003E\u003Cp name=\"a901d989-aa6a-474b-bc2c-a1d255c0432b\" id=\"a901d989-aa6a-474b-bc2c-a1d255c0432b\"\u003E\u003Cstrong\u003E① マーカーの反映は難しい\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp name=\"4336fd63-c5ad-4cd5-a6c1-3716ae05c222\" id=\"4336fd63-c5ad-4cd5-a6c1-3716ae05c222\"\u003EマーカーをSVGで表現しようとするためには、マーカーの太さ、始点と終点のx座標、y座標を明示的に指定する必要があります。文字の幅は一定とは限らないため、特にx座標の厳密な事前計算は困難です。\u003C\u002Fp\u003E\u003Cp name=\"852b386a-6c0d-4487-ad5a-700dd4cac9a3\" id=\"852b386a-6c0d-4487-ad5a-700dd4cac9a3\"\u003E\u003Cstrong\u003E② 一部エフェクトが消えてしまう\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp name=\"91153dbc-7d13-4aa9-aa5a-606d1614c92a\" id=\"91153dbc-7d13-4aa9-aa5a-606d1614c92a\"\u003E図形の影など、一部のエフェクトはSVGからPowerPoint図形への変換時に消えてしまうことがあります。ただし、PowerPoint側で後から簡単にエフェクトを追加できるので、問題にならないケースも多いでしょう。\u003C\u002Fp\u003E\u003Cp name=\"3b8b4297-b743-4bf7-8264-e99724541890\" id=\"3b8b4297-b743-4bf7-8264-e99724541890\"\u003E\u003Cstrong\u003E③ グラフの再現\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp name=\"27c8a0b5-d79e-40e1-a6a2-9b6998b68223\" id=\"27c8a0b5-d79e-40e1-a6a2-9b6998b68223\"\u003E冒頭でお見せした決算資料の変換結果をよくよく見ると、グラフの再現に失敗しています。\u003C\u002Fp\u003E\u003Cp name=\"5ed5fdbd-c624-4e59-8e4d-c40916cac825\" id=\"5ed5fdbd-c624-4e59-8e4d-c40916cac825\"\u003Eただしそのような場合でも、\u003Cstrong\u003Eグラフ1つに絞って変換すればうまくいくことが多い\u003C\u002Fstrong\u003Eです。SVG変換直前のコードから、Claudeを使って該当グラフのコードを抽出してから、(3)のプロンプトを適用すればokです。\u003C\u002Fp\u003E\u003Cfigure name=\"29a162e1-859c-4aa6-bc2b-a49e594cb269\" id=\"29a162e1-859c-4aa6-bc2b-a49e594cb269\"\u003E\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741797223-W4gDCE5Uk1RdT6HNjaXSoZru.png?width=1200\" alt=\"\" width=\"620\" height=\"462\" loading=\"lazy\"\u003E\u003Cfigcaption\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\u003Ch2 name=\"4537a2fe-cc81-4c57-9262-e48c780957d3\" id=\"4537a2fe-cc81-4c57-9262-e48c780957d3\"\u003E一部ケースで使える別アプローチ\u003C\u002Fh2\u003E\u003Ch3 name=\"301ffa52-03ab-4a4a-becb-0da620b53dc9\" id=\"301ffa52-03ab-4a4a-becb-0da620b53dc9\"\u003E「draw.io」形式でエクスポートし編集\u003C\u002Fh3\u003E\u003Cp name=\"d45a5f5d-1564-4056-afdf-7124d37c629b\" id=\"d45a5f5d-1564-4056-afdf-7124d37c629b\"\u003Eフローチャート、ER図といったダイアグラムの図解を作成したい際には、SVGでもHTMLでもなくdraw.io対応のXMLを出力させましょう。専用のサイトを使ってPowerPointよりさらに直感的に編集できます。\u003C\u002Fp\u003E\u003Cfigure name=\"f6649a0e-60ca-4c24-84ad-c12c90dd2b3d\" id=\"f6649a0e-60ca-4c24-84ad-c12c90dd2b3d\" data-src=\"https:\u002F\u002Ftwitter.com\u002Fai_agent_dev\u002Fstatus\u002F1895679644302786748\" data-identifier=\"null\" embedded-service=\"twitter\" embedded-content-key=\"emb517129b27585\"\u003E\u003Cdiv data-name=\"embedContainer\"\u003E\u003Cdiv data-embed-service=\"twitter\"\u003E\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E3.7 sonnet → drawioが今のところベストな図の作成方法。特にdrawioにすることで修正ができることが従来との違い。パワポ作成やブログなどの際に図を多用できる。これはわかりやすくビジネスマン全員が使える組み合わせ。 \u003Ca href=\"https:\u002F\u002Ft.co\u002FGzZRYhgt1V\"\u003Ehttps:\u002F\u002Ft.co\u002FGzZRYhgt1V\u003C\u002Fa\u003E \u003Ca href=\"https:\u002F\u002Ft.co\u002FxmWryTqnk6\"\u003Epic.twitter.com\u002FxmWryTqnk6\u003C\u002Fa\u003E\u003C\u002Fp\u003E— 遠藤巧巳 - AIエージェント受託開発 (@ai_agent_dev) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fai_agent_dev\u002Fstatus\u002F1895679644302786748?ref_src=twsrc%5Etfw\"\u003EMarch 1, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\n\n\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\u003Ch3 name=\"d52e7a30-ceea-433a-8ae5-d2ecf619ceac\" id=\"d52e7a30-ceea-433a-8ae5-d2ecf619ceac\"\u003E「satori」を使用してHTMLをSVGに変換\u003C\u002Fh3\u003E\u003Cp name=\"f1b56236-2d55-4a30-b337-aae28316603e\" id=\"f1b56236-2d55-4a30-b337-aae28316603e\"\u003E今回は、Claude 3.7 Sonnetの力を借りて言わば\u003Cstrong\u003E強引にHTMLをSVGに変換しましたが、より確実な方法はないのでしょうか\u003C\u002Fstrong\u003E？\u003Cbr\u003E\u003Cbr\u003E実は、Claude Artifacts最大の競合ツール「v0」の開発元であるVercel社が、HTML, CSSをSVGに変換するパッケージ「\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003Esatori\u003C\u002Fa\u003E」を開発しています。\u003C\u002Fp\u003E\u003Cp name=\"2b3bceac-e674-4de4-8a87-8830c2156d48\" id=\"2b3bceac-e674-4de4-8a87-8830c2156d48\"\u003Eしかし、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E公式README\u003C\u002Fa\u003Eにも書かれている通り、扱えるフォーマットに制限があり、Claudeの出力をそのまま使用することはもちろん、別途変換をかませるなど工夫を凝らしても、多くのケースで失敗するでしょう。\u003C\u002Fp\u003E\u003Ch2 name=\"fc671ac3-ddd6-4bf3-a7f9-f0752eb697b8\" id=\"fc671ac3-ddd6-4bf3-a7f9-f0752eb697b8\"\u003E運営元の紹介\u003C\u002Fh2\u003E\u003Cp name=\"8a7cef4d-1abf-40dd-9ab5-965506efe5eb\" id=\"8a7cef4d-1abf-40dd-9ab5-965506efe5eb\"\u003E\u003Cstrong\u003E株式会社\u003C\u002Fstrong\u003E\u003Ca href=\"https:\u002F\u002Fwww.mvrks.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E\u003Cstrong\u003EMavericks\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong\u003Eは、プロダクトアウト型のAIスタートアップ\u003C\u002Fstrong\u003Eです。動画生成AI「\u003Ca href=\"https:\u002F\u002Fno-lang.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003ENoLang\u003C\u002Fa\u003E」や超解像化技術「\u003Ca href=\"https:\u002F\u002Fbit.ly\u002Fkakudai-v1\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003Eカクダイ\u003C\u002Fa\u003E」など、先端的な自社プロダクトを多数保有しています。\u003C\u002Fp\u003E\u003Cp name=\"c36f745b-123b-4124-bc80-b11064ce5573\" id=\"c36f745b-123b-4124-bc80-b11064ce5573\"\u003E特に\u003Ca href=\"https:\u002F\u002Fno-lang.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"\u003E\u003Cstrong\u003ENoLang\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003Cstrong\u003Eは、テキストやPDF資料から誰でも簡単に高品質な動画を制作できる動画生成AIサービス\u003C\u002Fstrong\u003Eであり、登録者数は10万人を突破しています。\u003Cstrong\u003E来週に大幅なアップデートを実施\u003C\u002Fstrong\u003Eしていますので、乞うご期待ください！\u003C\u002Fp\u003E\u003Cfigure name=\"78baf15f-8442-4d9b-b49a-95f0a3cfc7ef\" id=\"78baf15f-8442-4d9b-b49a-95f0a3cfc7ef\" data-src=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1866656285351088433\" data-identifier=\"null\" embedded-service=\"twitter\" embedded-content-key=\"embefee5d46a9f3\"\u003E\u003Cdiv data-name=\"embedContainer\"\u003E\u003Cdiv data-embed-service=\"twitter\"\u003E\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E【🔥重大発表】🐬NoLang 2.5をリリースしました！！\u003Cbr\u003E\u003Cbr\u003E超実用的。PDFをナレーション付き解説動画に変換する「PDFプレゼン」機能が登場！\u003Cbr\u003E\u003Cbr\u003EさらにLive2Dに対応し、立体的かつ生き生きと動くキャラクターを動画に載せられるようになりました！\u003Cbr\u003E\u003Cbr\u003Eまだまだアップデートがあります！無料で試したい方は👇 \u003Ca href=\"https:\u002F\u002Ft.co\u002FgwhxSCBXBo\"\u003Epic.twitter.com\u002FgwhxSCBXBo\u003C\u002Fa\u003E\u003C\u002Fp\u003E— マーベリック|生成AI@NoLang (@sayhi2ai_jp) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1866656285351088433?ref_src=twsrc%5Etfw\"\u003EDecember 11, 2024\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\n\n\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"39a3f194-7e25-4963-a38b-1641d159b738\" id=\"39a3f194-7e25-4963-a38b-1641d159b738\"\u003Eまた、国内外の注目企業の動向分析から最新AIの紹介まで、幅広いAIニュースをまとめて毎週無料で配信しています。過去のバックナンバーは、以下よりご覧いただけます。\u003C\u002Fp\u003E\u003Cfigure name=\"9db63e17-bdc2-4004-b165-0791435a674c\" id=\"9db63e17-bdc2-4004-b165-0791435a674c\" data-src=\"https:\u002F\u002Fmvrks.news\u002F\" data-identifier=\"null\" embedded-service=\"external-article\" embedded-content-key=\"emb6e246d260484\"\u003E\u003Cdiv data-name=\"embedContainer\"\u003E\u003Cdiv data-embed-service=\"external-article\"\u003E\u003Cspan\u003E\u003Cdiv class=\"external-article-widget\"\u003E\n\u003Ca href=\"https:\u002F\u002Fmvrks.news\u002F\" rel=\"noopener noreferrer nofollow\" target=\"_blank\"\u003E\n\u003Cstrong class=\"external-article-widget-title\"\u003E\nMavericks AI ニュース\n\u003C\u002Fstrong\u003E\n\u003Cem class=\"external-article-widget-description\"\u003E\n【毎週配信・無料・5分で読める🗓】国内外の注目企業の動向分析から最新AIの紹介まで、幅広いAIニュースを分かりやすく解説👉\n\u003C\u002Fem\u003E\n\u003Cem class=\"external-article-widget-url\"\u003E\nmvrks.news\n\u003C\u002Fem\u003E\n\u003C\u002Fa\u003E\u003Ca class=\"external-article-widget-image\" href=\"https:\u002F\u002Fmvrks.news\u002F\" rel=\"noopener noreferrer nofollow\" style=\"background-image: url('https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fext\u002Fa4bb54ec0f48bed7b28b93191958c8528314744882851e1ab1635a3e3e10.png?x-type=ogp');\" target=\"_blank\"\u003E\u003C\u002Fa\u003E\n\n\u003C\u002Fdiv\u003E\n\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\u003Cp name=\"4c10651c-c72e-4994-8161-a35dae5a8587\" id=\"4c10651c-c72e-4994-8161-a35dae5a8587\"\u003E\u003Cbr\u003E\u003C\u002Fp\u003E",separator:a,description:c,index:[{body:aY,name:"9430541d-18cd-4f3d-bdfd-f6bea2357a0a",level:n,bodyAst:{content:[{type:h,value:aY}]}},{body:aZ,name:"f92fa48e-c3b1-45c4-b175-19e47eab67f9",level:n,bodyAst:{content:[{type:h,value:aZ}]}},{body:a_,name:"08ff959e-5a0e-4331-84fa-681284ddaad9",level:n,bodyAst:{content:[{type:h,value:a_}]}},{body:a$,name:"b13c11c9-6df7-45e5-b580-a43ee16fb4aa",level:n,bodyAst:{content:[{type:h,value:a$}]}},{body:ba,name:"963912e1-4653-4534-908b-a3dbc544ec7a",level:o,bodyAst:{content:[{type:h,value:ba}]}},{body:bb,name:"4726a8b8-a691-4634-990c-7e1ef9b02d06",level:o,bodyAst:{content:[{type:h,value:bb}]}},{body:bc,name:"187dd415-9e4a-458e-a78d-806ad754c7ce",level:o,bodyAst:{content:[{type:h,value:bc}]}},{body:bd,name:"17ad5dad-a275-4f78-be73-1a4890258b2a",level:n,bodyAst:{content:[{type:h,value:bd}]}},{body:be,name:"941f59b3-c64e-4453-888b-19756b554c00",level:o,bodyAst:{content:[{type:h,value:be}]}},{body:bf,name:"3ae603a2-8f99-4651-b3f2-33e88504a28d",level:o,bodyAst:{content:[{type:h,value:bf}]}},{body:bg,name:"db3d9319-c4ca-4347-8fc3-e7f83f1f2fcb",level:o,bodyAst:{content:[{type:h,value:bg}]}},{body:bh,name:"77dbc6b2-5feb-4671-ba03-618477668ebc",level:n,bodyAst:{content:[{type:h,value:bh}]}},{body:bi,name:"4537a2fe-cc81-4c57-9262-e48c780957d3",level:n,bodyAst:{content:[{type:h,value:bi}]}},{body:bj,name:"301ffa52-03ab-4a4a-becb-0da620b53dc9",level:o,bodyAst:{content:[{type:h,value:bj}]}},{body:bk,name:"d52e7a30-ceea-433a-8ae5-d2ecf619ceac",level:o,bodyAst:{content:[{type:h,value:bk}]}},{body:bl,name:"fc671ac3-ddd6-4bf3-a7f9-f0752eb697b8",level:n,bodyAst:{content:[{type:h,value:bl}]}}],externalUrl:a,disableComment:b,editableScopes:["web","ios","android"],nonEditableReason:a,capabilities:{amazonpayCampaign:b,amazonpay:b,guestAmazonpay:b,rubyText:f,formulaText:f,duplication:f},createdAt:"2025-03-09T21:32:04.000+09:00",user:{id:aX,key:"05e4e4c71cfe008127e561d7791ff483",urlname:W,nickname:i,activeFlag:f,noteCount:S,emailConfirmedFlag:f,createdAt:"2023-11-02T22:06:30.000+09:00",userProfileImagePath:"https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F121272934\u002Fprofile_dbec843310414487a658a6cf560e4980.png?fit=bounds&format=jpeg&quality=85&width=330",noUrlnameUser:b,storeUrl:c,followingCount:75,followerCount:575,profile:"東京大学・大学院卒のメンバー５人で創業されたチームです。解説動画生成AI「NoLang ( https:\u002F\u002Fno-lang.com )」をはじめとした次世代の生成AIプロダクトを開発しています。Xでも情報発信中です。https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp",withdrawal:b,isMe:b,isFollowing:b,isFollowed:b,isAdmin:b,customDomain:a,enableSerif:b,othersRelatedNotesEnabled:f,disableSupport:f,twitterNickname:bm,socials:{twitter:{id:4084092,nickname:bm,name:c,uid:c}},externalLinks:{},proUserId:a,purchaseAppealTextNote:a,purchaseAppealTextMagazine:a,purchaseAppealTextSupport:a,followAppealText:a,followAppealImage:a,likeAppealText:"ありがとう！励みになります！",likeAppealImage:"https:\u002F\u002Fassets.st-note.com\u002Fpoc-image\u002Fmanual\u002Fproduction\u002Fpreset_reaction_0.png",shareAppeal:{text:a,image:a},magazineAddAppeal:{text:a,image:a},blocksYou:b,isBlocked:b,disableGuestPurchase:b,customSupportBox:a},audio:a,belongingMagazineKeys:["mdbf82ec65e05","mf6ab37d8f2e4","m2840f510997c","m5ee458856cd1","m253eee5c31ac","m1ad5ff1549e4","me884859a85e3","m931b4059f58a","m17535ebb7604","m1fe88c81a046"],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:[{key:"emb636ce4b91d0a",url:"https:\u002F\u002Ftwitter.com\u002FSuguruKun_ai\u002Fstatus\u002F1898549311794995602",service:A,identifier:a,embeddableType:w,htmlForDisplay:a,caption:a,createdAt:"2025-03-09T21:35:13.000+09:00",htmlForEmbed:"\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003EClaude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。\u003Cbr\u003Eㅤ\u003Cbr\u003Eバズった「グラレコプロンプト」を参考に作成した、\u003Cbr\u003Eㅤ\u003Cbr\u003E幅広く使える有益デザインプロンプト10選をまとめました👇🧵 \u003Ca href=\"https:\u002F\u002Ft.co\u002Fal5n7Udf3c\"\u003Epic.twitter.com\u002Fal5n7Udf3c\u003C\u002Fa\u003E\u003C\u002Fp\u003E— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FSuguruKun_ai\u002Fstatus\u002F1898549311794995602?ref_src=twsrc%5Etfw\"\u003EMarch 9, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\"\u003E\u003C\u002Fscript\u003E\n\n\u003C\u002Fspan\u003E",isCustomDomain:b},{key:"embefee5d46a9f3",url:"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1866656285351088433",service:A,identifier:a,embeddableType:w,htmlForDisplay:a,caption:a,createdAt:"2025-03-12T13:44:37.000+09:00",htmlForEmbed:"\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E【🔥重大発表】🐬NoLang 2.5をリリースしました！！\u003Cbr\u003E\u003Cbr\u003E超実用的。PDFをナレーション付き解説動画に変換する「PDFプレゼン」機能が登場！\u003Cbr\u003E\u003Cbr\u003EさらにLive2Dに対応し、立体的かつ生き生きと動くキャラクターを動画に載せられるようになりました！\u003Cbr\u003E\u003Cbr\u003Eまだまだアップデートがあります！無料で試したい方は👇 \u003Ca href=\"https:\u002F\u002Ft.co\u002FgwhxSCBXBo\"\u003Epic.twitter.com\u002FgwhxSCBXBo\u003C\u002Fa\u003E\u003C\u002Fp\u003E— マーベリック|生成AI@NoLang (@sayhi2ai_jp) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1866656285351088433?ref_src=twsrc%5Etfw\"\u003EDecember 11, 2024\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\"\u003E\u003C\u002Fscript\u003E\n\n\u003C\u002Fspan\u003E",isCustomDomain:b},{key:"emb6e246d260484",url:"https:\u002F\u002Fmvrks.news\u002F",service:"external-article",identifier:a,embeddableType:w,htmlForDisplay:a,caption:a,createdAt:"2025-03-12T13:44:42.000+09:00",htmlForEmbed:"\u003Cspan\u003E\u003Cdiv class=\"external-article-widget\"\u003E\n\u003Ca href=\"https:\u002F\u002Fmvrks.news\u002F\" rel=\"nofollow noopener\" target=\"_blank\"\u003E\n\u003Cstrong class=\"external-article-widget-title\"\u003E\nMavericks AI ニュース\n\u003C\u002Fstrong\u003E\n\u003Cem class=\"external-article-widget-description\"\u003E\n【毎週配信・無料・5分で読める🗓】国内外の注目企業の動向分析から最新AIの紹介まで、幅広いAIニュースを分かりやすく解説👉\n\u003C\u002Fem\u003E\n\u003Cem class=\"external-article-widget-url\"\u003E\nmvrks.news\n\u003C\u002Fem\u003E\n\u003C\u002Fa\u003E\u003Ca class=\"external-article-widget-image\" href=\"https:\u002F\u002Fmvrks.news\u002F\" rel=\"nofollow noopener\" style=\"background-image: url('https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fext\u002Fa4bb54ec0f48bed7b28b93191958c8528314744882851e1ab1635a3e3e10.png?x-type=ogp');\" target=\"_blank\"\u003E\u003C\u002Fa\u003E\n\n\u003C\u002Fdiv\u003E\n\u003C\u002Fspan\u003E",isCustomDomain:b},{key:"emb517129b27585",url:"https:\u002F\u002Ftwitter.com\u002Fai_agent_dev\u002Fstatus\u002F1895679644302786748",service:A,identifier:a,embeddableType:w,htmlForDisplay:a,caption:a,createdAt:"2025-03-12T13:53:39.000+09:00",htmlForEmbed:"\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E3.7 sonnet → drawioが今のところベストな図の作成方法。特にdrawioにすることで修正ができることが従来との違い。パワポ作成やブログなどの際に図を多用できる。これはわかりやすくビジネスマン全員が使える組み合わせ。 \u003Ca href=\"https:\u002F\u002Ft.co\u002FGzZRYhgt1V\"\u003Ehttps:\u002F\u002Ft.co\u002FGzZRYhgt1V\u003C\u002Fa\u003E \u003Ca href=\"https:\u002F\u002Ft.co\u002FxmWryTqnk6\"\u003Epic.twitter.com\u002FxmWryTqnk6\u003C\u002Fa\u003E\u003C\u002Fp\u003E— 遠藤巧巳 - AIエージェント受託開発 (@ai_agent_dev) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fai_agent_dev\u002Fstatus\u002F1895679644302786748?ref_src=twsrc%5Etfw\"\u003EMarch 1, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\"\u003E\u003C\u002Fscript\u003E\n\n\u003C\u002Fspan\u003E",isCustomDomain:b},{key:"emb309ec7aa6718",url:"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1901436561369309485",service:A,identifier:a,embeddableType:w,htmlForDisplay:a,caption:a,createdAt:"2025-03-21T11:57:08.000+09:00",htmlForEmbed:"\u003Cspan\u003E\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E【🔥重大発表】🐬NoLang 3.0をリリースしました！\u003Cbr\u003E\u003Cbr\u003E縦型ショート動画を直接生成・編集可能に。今だけ無料で試せます！\u003Cbr\u003E\u003Cbr\u003Eさらに編集機能が一新され、制作できる動画の幅が大きく広がりました！\u003Cbr\u003E\u003Cbr\u003E他にも、「どんなPDFも1分要約」「話題の画像生成AI Imagen3」など注目機能が盛り沢山。詳しくは👇 \u003Ca href=\"https:\u002F\u002Ft.co\u002FrZc9dDB7ao\"\u003Epic.twitter.com\u002FrZc9dDB7ao\u003C\u002Fa\u003E\u003C\u002Fp\u003E— マーベリック|生成AI@NoLang (@sayhi2ai_jp) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fsayhi2ai_jp\u002Fstatus\u002F1901436561369309485?ref_src=twsrc%5Etfw\"\u003EMarch 17, 2025\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\"\u003E\u003C\u002Fscript\u003E\n\n\u003C\u002Fspan\u003E",isCustomDomain:b}],eyecatch:D,eyecatchAlt:"見出し画像",eyecatchHeight:ac,eyecatchWidth:ab,format:"4.1",hasCoupon:b,hasDraft:b,hashtagNotes:[{id:663738786,createdAt:j,hashtag:{name:"#プレゼン"}},{id:663738787,createdAt:j,hashtag:{name:"#図解"}},{id:663738788,createdAt:j,hashtag:{name:"#HTML"}},{id:663738789,createdAt:j,hashtag:{name:"#Claude"}},{id:663738790,createdAt:j,hashtag:{name:"#プロンプトエンジニアリング"}},{id:663738791,createdAt:j,hashtag:{name:"#PowerPoint"}},{id:663738792,createdAt:j,hashtag:{name:"#svg"}},{id:663738793,createdAt:j,hashtag:{name:"#Claude3_7Sonnet"}}],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:322,anonymousLikeCount:U,magazinesForBuy:[],magazinesForSubscribe:[],memberEditLockedAt:a,noteShareUrl:"https:\u002F\u002Fnote.com\u002Fintent\u002Fpost?url=https:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae",relatedContests:[],paywall:{isSimplePaidNote:f,isSimplePaidNoteTestA:b,sameMonthCnt:d,context:{isShowLimitedPayNotePaywall:b,isMembershipConnected:b}},pictures:[{caption:a,key:"1741827739-0Di5JmQ2uyGgBcYdLXZqteAW",url:H,thumbnailUrl:H,alt:"画像1",width:a,height:a,index:d},{caption:a,key:"1741788865-0UFNmYz9JO1MWs2qb7XjPQBf",url:I,thumbnailUrl:I,alt:"画像2",width:a,height:a,index:g},{caption:a,key:"1741766510-ohInFeTvuj2KNf6prLaCkqli",url:J,thumbnailUrl:J,alt:"画像3",width:a,height:a,index:q},{caption:a,key:"1741753610-xmtVYkw6pd9cKuI0WqBe1FS4",url:K,thumbnailUrl:K,alt:"画像4",width:a,height:a,index:x},{caption:a,key:"1741753671-LxFJldUwoK9q4Parc3BHt8un",url:L,thumbnailUrl:L,alt:"画像5",width:a,height:a,index:y},{caption:a,key:"1741753702-xcyWP17n83Zg0EIbLQwvNheX",url:M,thumbnailUrl:M,alt:"画像6",width:a,height:a,index:P},{caption:a,key:"1741797223-W4gDCE5Uk1RdT6HNjaXSoZru",url:N,thumbnailUrl:N,alt:"画像7",width:a,height:a,index:l}],pinnedUserNoteId:342896,price:d,priorSale:a,publishAt:$,readingUuid:"8dc8d9a9-e65e-4318-a1f9-2ff86ce1a9d4",remainedCharNum:d,remainedFigureNum:d,remainedImageNum:d,remainedFileNum:d,reservedPublishAt:a,facebookShareUrl:"https:\u002F\u002Fwww.facebook.com\u002Fshare.php?u=https:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae&t=%E3%80%90%E6%B1%BA%E5%AE%9A%E7%89%88%E3%80%91+Claude+3.7+Sonnet%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E5%9B%B3%E8%A7%A3%E3%82%84%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%82%92PowerPoint%E3%81%A7%E7%B7%A8%E9%9B%86%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BC%88HTML%E5%AF%BE%E5%BF%9C%EF%BC%89%EF%BD%9CMavericks%2C+Inc%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?%E3%80%90%E6%B1%BA%E5%AE%9A%E7%89%88%E3%80%91+Claude+3.7+Sonnet%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E5%9B%B3%E8%A7%A3%E3%82%84%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%82%92PowerPoint%E3%81%A7%E7%B7%A8%E9%9B%86%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BC%88HTML%E5%AF%BE%E5%BF%9C%EF%BC%89%EF%BD%9CMavericks%2C+Inc%EF%BD%9Cnote%EF%BC%88%E3%83%8E%E3%83%BC%E3%83%88%EF%BC%89%0Ahttps:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae",twitterShareUrl:"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?url=https:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae&text=%E3%80%90%E6%B1%BA%E5%AE%9A%E7%89%88%E3%80%91+Claude+3.7+Sonnet%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E5%9B%B3%E8%A7%A3%E3%82%84%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%82%92PowerPoint%E3%81%A7%E7%B7%A8%E9%9B%86%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%EF%BC%88HTML%E5%AF%BE%E5%BF%9C%EF%BC%89%EF%BD%9CMavericks%2C+Inc+%40sayhi2ai_jp+%23note&related=sayhi2ai_jp,note_PR",noteUrl:t,twitterRelatedAccounts:"sayhi2ai_jp,note_PR",tweetText:"【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc @sayhi2ai_jp #note",circlePlans:[],isPublicMembershipConnected:b,isBoardDisabled:b,discountCampaigns:[],leadForm:a,noteShareTotalCount:T,noteShareProviderDetails:{facebook:{count:y,isShared:b},line:{count:R,isShared:b},note:{count:g,isShared:b},twitter:{count:Q,isShared:b}},recommendPriceExpName:s,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:"\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae",config:{currentEnv:"production",prehubEnv:e,sourceEnv:e,_app:{basePath:bn,assetsPath:bn,cdnURL:"https:\u002F\u002Fd291vdycu0ht11.cloudfront.net\u002Fnuxt\u002Fproduction\u002F"}}}}(null,false,"",0,void 0,true,1,"text","Mavericks, Inc","2025-03-21T11:57:18.000+09:00","ImageObject",6,"Person","h2","h3","https:\u002F\u002Fschema.org\u002F",2,"0","others","https:\u002F\u002Fnote.com\u002Fnote_maverick\u002Fn\u002Fnd07e0f245dae","https:\u002F\u002Fnote.com","all","Note",3,4,"private","twitter","public","Claude 3.7 Sonnetのデザインセンスは極めて高く、イケてる図解やスライドをポン出しで生成することができます。以下のような投稿を見て感動し、Claudeに課金して、ワクワクしながら試してみた方も多いのではないでしょうか。 Claude 3.7 Sonnetの図解デザイン能力、あまりにもすごい。 ㅤ バズった「グラレコプロンプト」を参考に作成した、 ㅤ 幅広く使える有益デザインプロンプト10選をまとめました👇🧵 pic.twitter.com\u002Fal5n7Udf3c — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 9, 2025 \n\n\n","https:\u002F\u002Fassets.st-note.com\u002Fproduction\u002Fuploads\u002Fimages\u002F178824795\u002Frectangle_large_type_2_1c00a216bdfe28e2412ec0ad9df3b351.png?fit=bounds&quality=85&width=1280","【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）","ListItem","note","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741827739-0Di5JmQ2uyGgBcYdLXZqteAW.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741788865-0UFNmYz9JO1MWs2qb7XjPQBf.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741766510-ohInFeTvuj2KNf6prLaCkqli.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753610-xmtVYkw6pd9cKuI0WqBe1FS4.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753671-LxFJldUwoK9q4Parc3BHt8un.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741753702-xcyWP17n83Zg0EIbLQwvNheX.png","https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1741797223-W4gDCE5Uk1RdT6HNjaXSoZru.png","medium",5,8,14,19,27,31,"note.com","note_maverick","control","【決定版】 Claude 3.7 Sonnetで作成した図解やプレゼンをPowerPointで編集可能にする方法（HTML対応）｜Mavericks, Inc","note（ノート）","http:\u002F\u002Fschema.org","2025-03-13T12:04:01.000+09:00","https:\u002F\u002Fnote.com\u002Fnote_maverick",1538,805,"notes","published","three_column",7,9,10,11,12,13,15,16,17,18,20,21,22,23,24,25,26,28,29,30,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,"公開","非公開",{},{},8389024,"自己紹介","はじめに：SVGとHTML","SVGを「レイアウトを崩さずに」PowerPointで編集可能にする方法","HTMLを強引にSVGに変換するための3つのプロンプト","(1) レスポンシブを無効化する","(2) SVGに変換しやすいコードに変換する","(3) 「座標の計算に注意」してSVGに変換","コーナーケースへの対処","(1') スクロール不要になるまで高さ・幅を拡張する","(3') テキストの改行を調整する","(3'') 枠の大きさを調整する","限界","一部ケースで使える別アプローチ","「draw.io」形式でエクスポートし編集","「satori」を使用してHTMLをSVGに変換","運営元の紹介","sayhi2ai_jp","\u002F"));</script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/4ca85ef.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.a964edce1a52172f8764.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.7990016acae03609e665.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.e03e9a940e7d47bccea7.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.db013ba5e5c70c5ed8f8.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.8e2773434e5631503082.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.261a8f322ff3be728109.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.1fe36e19547b0bab6ee5.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.4cd71c89177159835c0e.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.b4145db09563606a56b2.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.632f387d1cd5b2e468df.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.ac478ee40c2a47f43ef0.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.425ccfe35e27d4d679d3.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.55d3a328789004022916.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.e8d30c762455496e2d3e.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.15bca7c438f2168d7050.js" defer></script><script src="https://d291vdycu0ht11.cloudfront.net/nuxt/production/note.c1fbee2afd7e3bfb1d09.js" defer></script> </body> </html>