{"version":3,"sources":["webpack://gatsby-starter-hello-world/./src/common/ui/organism/ScrollToTop.tsx","webpack://gatsby-starter-hello-world/./src/common/ui/organism/ScrollToTop.module.styl","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/ButtonRequestAssessmentSP.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/ButtonRequestAssessmentPC.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/CTA_PC.module.styl","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/CTA_PC.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/CTA_SP.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/CTA_SP.module.styl","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/molecule/Card.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/docs/faq/organism/FAQSchemaMarkup.tsx","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/img/arrow-white.svg","webpack://gatsby-starter-hello-world/./src/newcar/ui/detail/img/triple_crown.svg"],"names":["className","useState","isVisible","state","setState","useEffect","onScroll","y","window","pageYOffset","addEventListener","removeEventListener","onClick","e","preventDefault","animateScroll","duration","to","buttonText","buttonTextAbove","buttonTextBelow","handlerOnClick","id","type","data-gtm","arrow","src","alt","ctaBox","boxIn","planDetail","naviplanTitle","ctaPriceBox","isJustifyContentFlexEnd","comment","notdiscountPrice","ctaGetsugaku","ctaPrice","isCursorPointer","isUnderline","plusBtn","active","isBorderGreyLighter","widthAuto","thumbnailUrl","monthlyPrice","uniqueStyle","isOpen","setIsOpen","simulationManagerStore","useContext","SimulationManagerStoreContext","interruptionStore","InterruptionStoreContext","afterPrice","nowRecommendSPSelection","price","toLocaleString","planMonth","Number","term","goToEntryForm","addItem","NEWCAR_CONST","nowCarToUndefined","saveEntryBreakdown","navigate","NEWCAR_DEFINE","styles","width","height","decoding","nowSelectRecommendSPPrice","orderName","option","ButtonRequestAssessmentSP","children","items","Helmet","JSON","stringify","mainEntity","map","name","question","acceptedAnswer","text","answer"],"mappings":"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","file":"c7e38b85dfd1959af4d8aa18bd8729af8a049420-7d16026eed189dbfe3c8.js","sourcesContent":["import React, {\n  FC, useState, useEffect, ComponentProps,\n} from 'react';\nimport { Link } from 'gatsby';\nimport { animateScroll } from 'react-scroll';\nimport * as styles from './ScrollToTop.module.styl';\n\ninterface State {\n  isVisible: boolean\n}\n\n/**\n * ページトップにスクロールするボタン\n */\nconst ScrollToTop: FC<ComponentProps<'a'>> = ({ className }) => {\n  const [state, setState] = useState<State>({\n    isVisible: false,\n  });\n\n  const {\n    isVisible,\n  } = state;\n\n  const scrollToTop = (e: React.MouseEvent<HTMLAnchorElement>):void => {\n    e.preventDefault();\n    animateScroll.scrollToTop({ duration: 300 });\n  };\n\n  useEffect(() => {\n    const onScroll = (): void => {\n      const OFFSET = 500;\n      const y = window.pageYOffset;\n      setState({\n        ...state,\n        isVisible: y > OFFSET,\n      });\n    };\n    window.addEventListener('scroll', onScroll);\n    return function cleanup(): void {\n      window.removeEventListener('scroll', onScroll);\n    };\n  }, [setState]);\n\n  return (\n    <Link\n      onClick={scrollToTop}\n      to=\"#top\"\n      className={`\n        is-block ${styles.pagetop}\n        ${isVisible ? styles.pagetopShow : ''}\n        ${className}\n      `}\n    />\n  );\n};\n\nexport default ScrollToTop;\n","// extracted by mini-css-extract-plugin\nexport const pagetop = \"ScrollToTop-module--pagetop--Q4kVm\";\nexport const pagetopShow = \"ScrollToTop-module--pagetop-show--17M61\";","import React from 'react';\n\nimport * as styles from '@/newcar/ui/detail/molecule/ButtonRequestAssessmentSP.module.styl';\n\ntype ButtonRequestAssessmentSPProps = {\n  className?: string;\n  buttonText: string;\n  buttonTextAbove?: string;\n  buttonTextBelow?: string;\n  handlerOnClick: () => void;\n};\nconst ButtonRequestAssessmentSP = ({\n  className,\n  buttonText,\n  buttonTextAbove,\n  buttonTextBelow,\n  handlerOnClick,\n}: ButtonRequestAssessmentSPProps): JSX.Element => (\n  <>\n    { buttonTextAbove && (\n      <div className=\"has-text-center is-margin-top-5 balloon-campaign-parent\">\n        <span className={`is-size-6 is-relative ${styles.balloonCampaign}`}>\n          {buttonTextAbove}\n        </span>\n      </div>\n    )}\n    <button\n      id=\"cta-charm\"\n      type=\"button\"\n      className={className}\n      onClick={handlerOnClick}\n      data-gtm=\"gtm-newcar-detail-cta-charm\"\n    >\n      <div className=\"is-line-height-small has-text-weight-semibold\">\n        <strong>{buttonText}</strong>\n      </div>\n      <span className=\"icon-arrow-right-big is-margin-right-2\" />\n    </button>\n    {buttonTextBelow && (\n      <p className=\"is-size-6 is-margin-top-1\">{buttonTextBelow}</p>\n    )}\n  </>\n);\n\nexport default ButtonRequestAssessmentSP;\n","import React from 'react';\n\ntype ButtonRequestAssessmentPCProps = {\n  className?: string;\n  buttonText: string;\n  buttonTextBelow?: string;\n  handlerOnClick: () => void;\n  arrow: string;\n};\nconst ButtonRequestAssessmentPC = ({\n  className,\n  buttonText,\n  buttonTextBelow,\n  handlerOnClick,\n  arrow,\n}: ButtonRequestAssessmentPCProps): JSX.Element => (\n  <>\n    <button\n      type=\"button\"\n      className={className}\n      onClick={handlerOnClick}\n      data-gtm=\"gtm-newcar-detail-cta-charm\"\n    >\n      <div className=\"is-line-height-small\">\n        <span className=\"is-size-5 is-flex is-align-items-center has-text-weight-bold\">\n          <strong>{buttonText}</strong>\n          <img src={arrow} alt=\"矢印\" className=\"is-margin-left-4\" />\n        </span>\n      </div>\n    </button>\n    {buttonTextBelow && (\n      <p className=\"is-size-6 is-margin-top-1\">\n        {buttonTextBelow}\n      </p>\n    )}\n  </>\n);\n\nexport default ButtonRequestAssessmentPC;\n","// extracted by mini-css-extract-plugin\nexport const ctaBox = \"CTA_PC-module--cta-box--3Am7g\";\nexport const boxIn = \"CTA_PC-module--box-in--2-b2J\";\nexport const planDetail = \"CTA_PC-module--plan-detail--3OotT\";\nexport const naviplanTitle = \"CTA_PC-module--naviplan-title--2tXi-\";\nexport const ctaPriceBox = \"CTA_PC-module--cta-price-box--2TQGd\";\nexport const isJustifyContentFlexEnd = \"CTA_PC-module--is-justify-content-flex-end--1QtUk\";\nexport const comment = \"CTA_PC-module--comment--2NR1G\";\nexport const notdiscountPrice = \"CTA_PC-module--notdiscount-price--30psw\";\nexport const ctaGetsugaku = \"CTA_PC-module--cta-getsugaku--Wg1W6\";\nexport const ctaPrice = \"CTA_PC-module--cta-price--1DNiP\";\nexport const isCursorPointer = \"CTA_PC-module--is-cursor-pointer--ufuYc\";\nexport const isUnderline = \"CTA_PC-module--is-underline--3ZQ2e\";\nexport const plusBtn = \"CTA_PC-module--plus-btn--1KDk8\";\nexport const active = \"CTA_PC-module--active--3u9Xl\";\nexport const isBorderGreyLighter = \"CTA_PC-module--is-border-grey-lighter--2V7Rq\";\nexport const widthAuto = \"CTA_PC-module--width-auto--2aUNl\";","/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable max-len */\nimport React, { useContext, useState } from 'react';\nimport { navigate } from 'gatsby';\nimport { Observer } from 'mobx-react-lite';\nimport NEWCAR_CONST from '@/newcar/util/const';\nimport NEWCAR_DEFINE from '@/newcar/util/define';\nimport arrow from '@/newcar/ui/detail/img/arrow-white.svg';\nimport SimulationManagerStoreContext from '@/newcar/ui/common/context/SimulationManagerStoreContext';\nimport InterruptionStoreContext from '@/newcar/ui/common/context/InterruptionStoreContext';\nimport ButtonRequestAssessmentPC from '@/newcar/ui/detail/molecule/ButtonRequestAssessmentPC';\nimport * as styles from '@/newcar/ui/detail/molecule/CTA_PC.module.styl';\n\ntype CTAPCProps = {\n  thumbnailUrl?: string;\n  monthlyPrice?: string;\n  uniqueStyle?: string;\n};\n\nconst CTA_PC = ({\n  thumbnailUrl, monthlyPrice, uniqueStyle,\n}: CTAPCProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const simulationManagerStore = useContext(SimulationManagerStoreContext);\n  const interruptionStore = useContext(InterruptionStoreContext);\n\n  const beforePrice = () => simulationManagerStore.nowSelectRecommendSPPrice?.toLocaleString() || '---,---';\n  const afterPrice = () => simulationManagerStore.nowRecommendSPSelection?.price?.toLocaleString() || '';\n  const planName = () => simulationManagerStore.nowRecommendSPSelection.orderName || '';\n  const planOption = () => simulationManagerStore.nowRecommendSPSelection.option || '';\n  const planYear = () => simulationManagerStore.nowRecommendSPSelection.term || '';\n  const planMonth = () => Number(simulationManagerStore.nowRecommendSPSelection.term) * 12 || '';\n\n  const goToEntryForm = () => {\n    // 申し込みへ進んだ内容を記録\n    interruptionStore.addItem(simulationManagerStore, NEWCAR_CONST.SIMULATION_PLAN.ID.RECOMMEND_SP);\n\n    simulationManagerStore.nowCarToUndefined();\n    simulationManagerStore.saveEntryBreakdown(NEWCAR_CONST.SIMULATION_PLAN.ID.RECOMMEND_SP);\n    navigate(NEWCAR_DEFINE.PATH.FORM_CONTACT_INFO);\n  };\n  return (\n    <Observer>\n      {() => (\n        <div id=\"cta-pc\" className={`${styles.ctaBox} is-hidden-mobile is-hidden-tablet-only ${styles[uniqueStyle || '']}`}>\n          <p className={`${styles.naviplanTitle} is-size-6 has-text-primary has-text-weight-semibold`}>頭金・ボーナス払い0円 法定費用・手数料コミ</p>\n          <p className=\"has-text-primary has-text-centered is-size-3 has-text-weight-semibold\">おすすめ！ナビ付きプランで審査に進む</p>\n          <div className={`columns is-mobile is-centered is-margin-bottom-3 ${styles.boxIn}`}>\n            <div className=\"column is-narrow is-margin-right-3\">\n              <img\n                src={thumbnailUrl || ''}\n                width=\"224\"\n                height=\"126\"\n                alt=\"車画像\"\n                decoding=\"async\"\n              />\n            </div>\n            <div className={`column is-narrow ${styles.ctaPriceBox}`}>\n              <div className={`is-flex is-margin-bottom-1 ${styles.isJustifyContentFlexEnd}`}>\n                <div className={`${styles.comment} is-margin-right-2`}>ネット割で！</div>\n                <div className={`${styles.notdiscountPrice}`}>\n                  {beforePrice()}\n                  円\n                </div>\n              </div>\n              <div className=\"is-flex\">\n                <p className={`${styles.ctaGetsugaku}`}>\n                  最安料金\n                  <br />\n                  月額定額\n                </p>\n                <p className={`${styles.ctaPrice} has-text-weight-bold`}>\n                  {monthlyPrice || afterPrice()}\n                  <span className=\"is-size-5 has-text-black-ter\">円</span>\n                </p>\n              </div>\n            </div>\n          </div>\n          {/* プラン詳細 */}\n          <div\n            className={`columns is-centered is-vcentered is-margin-bottom-5 ${styles.isCursorPointer}`}\n            onClick={() => setIsOpen(!isOpen)}\n            data-gtm=\"gtm-newcar-detail-fvPlanAccordion\"\n          >\n            <div className={`column is-narrow is-size-6 is-padding-right-2 ${styles.isUnderline}`}>おすすめ！ナビ付きプラン詳細</div>\n            <span className={`${styles.plusBtn} ${isOpen && styles.active}`} />\n          </div>\n          {isOpen && (\n            <div className={`columns is-desktop is-multiline is-centered is-vcentered is-size-6 is-padding-5 is-margin-bottom-5 ${styles.planDetail} ${styles.isBorderGreyLighter}`}>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">グレード</p>\n                <p className=\"has-text-grey\">{planName()}</p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">オプション装備</p>\n                <p className=\"has-text-grey\">{planOption()}</p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">賃貸期間</p>\n                <p className=\"has-text-grey\">\n                  {planMonth() ? `${planMonth()}ヶ月　` : ''}\n                  {planYear()}\n                  年\n                </p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">月額料金</p>\n                <p className=\"has-text-grey\">\n                  {afterPrice()}\n                  円/月（税込）\n                </p>\n              </div>\n            </div>\n          )}\n          {/* 申し込みボタン */}\n          <div className=\"has-text-centered is-margin-bottom-4\">\n            <ButtonRequestAssessmentPC\n              className=\"button is-link is-large is-size-4 is-multiline-button\"\n              buttonText=\"いますぐ審査・商談に進む\"\n              buttonTextBelow=\"※申込後のキャンセル・プラン変更も可能です！\"\n              handlerOnClick={goToEntryForm}\n              arrow={arrow}\n            />\n          </div>\n        </div>\n      )}\n    </Observer>\n  );\n};\n\nexport default CTA_PC;\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable max-len */\nimport React, { useContext, useState } from 'react';\nimport { navigate } from 'gatsby';\nimport { Observer } from 'mobx-react-lite';\nimport NEWCAR_CONST from '@/newcar/util/const';\nimport NEWCAR_DEFINE from '@/newcar/util/define';\nimport SimulationManagerStoreContext from '@/newcar/ui/common/context/SimulationManagerStoreContext';\nimport InterruptionStoreContext from '@/newcar/ui/common/context/InterruptionStoreContext';\nimport ButtonRequestAssessmentSP from '@/newcar/ui/detail/molecule/ButtonRequestAssessmentSP';\nimport * as styles from '@/newcar/ui/detail/molecule/CTA_SP.module.styl';\n\ntype CTASPProps = {\n  thumbnailUrl?: string;\n  monthlyPrice?: string;\n};\n\nconst CTA_SP = ({\n  thumbnailUrl, monthlyPrice,\n}: CTASPProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const simulationManagerStore = useContext(SimulationManagerStoreContext);\n  const interruptionStore = useContext(InterruptionStoreContext);\n\n  const beforePrice = () => simulationManagerStore.nowSelectRecommendSPPrice?.toLocaleString() || '---,---';\n  const afterPrice = () => simulationManagerStore.nowRecommendSPSelection?.price?.toLocaleString() || '';\n  const planName = () => simulationManagerStore.nowRecommendSPSelection.orderName || '';\n  const planOption = () => simulationManagerStore.nowRecommendSPSelection.option || '';\n  const planYear = () => simulationManagerStore.nowRecommendSPSelection.term || '';\n  const planMonth = () => Number(simulationManagerStore.nowRecommendSPSelection.term) * 12 || '';\n\n  const goToEntryForm = () => {\n    // 申し込みへ進んだ内容を記録\n    interruptionStore.addItem(simulationManagerStore, NEWCAR_CONST.SIMULATION_PLAN.ID.RECOMMEND_SP);\n\n    simulationManagerStore.nowCarToUndefined();\n    simulationManagerStore.saveEntryBreakdown(NEWCAR_CONST.SIMULATION_PLAN.ID.RECOMMEND_SP);\n    navigate(NEWCAR_DEFINE.PATH.FORM_CONTACT_INFO);\n  };\n\n  return (\n    <Observer>\n      {() => (\n        <div id=\"cta-sp\" className={`${styles.ctaBox} is-hidden-desktop`}>\n          <h3 className={styles.ctaBoxHeading}>\n            ＜おすすめ！ナビ付きプラン＞\n          </h3>\n          <div className={`columns is-mobile is-centered ${styles.boxIn}`}>\n            <div className=\"column is-narrow\">\n              <img\n                src={thumbnailUrl || ''}\n                width=\"112\"\n                height=\"63\"\n                alt=\"車画像\"\n                decoding=\"async\"\n              />\n            </div>\n            <div className={`column is-narrow ${styles.ctaPriceBox}`}>\n              <div className=\"is-flex is-margin-bottom-1\">\n                <div className={`${styles.comment} is-margin-right-2`}>ネット割適用で</div>\n                <div className={`${styles.notdiscountPrice}`}>\n                  {beforePrice()}\n                  円\n                </div>\n              </div>\n              <div className=\"is-flex\">\n                <p className={`${styles.ctaGetsugaku} has-text-weight-bold`}>月額</p>\n                <p className={`${styles.ctaPrice} has-text-weight-bold`}>\n                  {monthlyPrice || afterPrice()}\n                  <span className=\"is-size-5 has-text-black-ter\">円</span>\n                </p>\n              </div>\n              <div className=\"columns\">\n                <p className=\"has-text-grey is-size-6 has-text-right\">（11年リース）</p>\n              </div>\n            </div>\n          </div>\n          {/* 申し込みボタン */}\n          <div className=\"has-text-centered is-margin-bottom-4\">\n            <div className={`${styles.naviPlanBalloon}`}>\n              最大\n              <span className={`${styles.naviPlanText}`}>\n                3万円\n              </span>\n              分当たる！キャンペーン対象\n            </div>\n            <ButtonRequestAssessmentSP\n              className={`${styles.isBlue} ${styles.isShaped} button has-head-copy `}\n              buttonText=\"まずはお試しで審査に申込む\"\n              // buttonTextAbove=\"無料！5分でかんたんお申し込み\"\n              buttonTextBelow=\"※審査申込みは契約ではありません\"\n              handlerOnClick={goToEntryForm}\n            />\n          </div>\n          {/* プラン詳細 */}\n          <div\n            className=\"columns is-mobile is-multiline is-centered is-vcentered\"\n            onClick={() => setIsOpen(!isOpen)}\n            data-gtm=\"gtm-newcar-detail-fvPlanAccordion\"\n          >\n            <div className={`column is-narrow is-size-6 is-padding-right-2 ${styles.isUnderline}`}>ナビ付きプランの詳細</div>\n            <span className={`${styles.plusBtn} ${isOpen && styles.active}`} />\n          </div>\n          {isOpen && (\n            <div className={`columns is-desktop is-multiline is-centered is-vcentered is-size-6 is-padding-5 is-margin-bottom-5 ${styles.isBorderGreyLighter}`}>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">グレード</p>\n                <p className=\"has-text-grey\">{planName()}</p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">オプション装備</p>\n                <p className=\"has-text-grey\">{planOption()}</p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">賃貸期間</p>\n                <p className=\"has-text-grey\">\n                  {planMonth() ? `${planMonth()}ヶ月　` : ''}\n                  {planYear()}\n                  年\n                </p>\n              </div>\n              <div className=\"column is-padding-bottom-3\">\n                <p className=\"has-text-weight-semibold\">月額料金</p>\n                <p className=\"has-text-grey\">\n                  {afterPrice()}\n                  円/月（税込）\n                </p>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </Observer>\n  );\n};\n\nexport default CTA_SP;\n","// extracted by mini-css-extract-plugin\nexport const ctaBox = \"CTA_SP-module--cta-box--2zd4F\";\nexport const ctaBoxHeading = \"CTA_SP-module--cta-box-heading--2W0rO\";\nexport const boxIn = \"CTA_SP-module--box-in--2Kq8c\";\nexport const planDetail = \"CTA_SP-module--plan-detail--3xENU\";\nexport const naviplanTitle = \"CTA_SP-module--naviplan-title--2FVgd\";\nexport const ctaPriceBox = \"CTA_SP-module--cta-price-box--2-o86\";\nexport const comment = \"CTA_SP-module--comment--1GaVf\";\nexport const notdiscountPrice = \"CTA_SP-module--notdiscount-price--BF0y1\";\nexport const ctaGetsugaku = \"CTA_SP-module--cta-getsugaku--3AQHL\";\nexport const ctaPrice = \"CTA_SP-module--cta-price--1r3u6\";\nexport const isUnderline = \"CTA_SP-module--is-underline--1Nw5x\";\nexport const plusBtn = \"CTA_SP-module--plus-btn--1ylqL\";\nexport const active = \"CTA_SP-module--active--1AjB_\";\nexport const isBorderGreyLighter = \"CTA_SP-module--is-border-grey-lighter--26b-G\";\nexport const isBlue = \"CTA_SP-module--is-blue--3K_yM\";\nexport const isShaped = \"CTA_SP-module--is-shaped--4Jjj_\";\nexport const naviPlanBalloon = \"CTA_SP-module--navi-plan-balloon--11Z6G\";\nexport const naviPlanText = \"CTA_SP-module--navi-plan-text--3I4oo\";\nexport const naviPlanTextMin = \"CTA_SP-module--navi-plan-text-min--w1f1g\";","import React, { FC } from 'react';\n\nimport * as styles from '@/newcar/ui/detail/molecule/Card.module.styl';\n\ntype CardProps = {\n  className?: string;\n}\n\nconst Card:FC<CardProps> = ({ className, children }) => (\n  <div className={`card is-margin-bottom-5 has-background-white ${styles.isPadding} ${className && className}`}>\n    <div className={`is-margin-bottom-5 ${styles.band}`} />\n    {children}\n  </div>\n);\n\nexport default Card;\n","import React, { FC } from 'react';\nimport { Helmet } from 'react-helmet';\n\ntype FAQSchemaMarkupProps = {\n  items: {\n    question: string\n    answer: string\n  }[]\n};\n\n/**\n * FAQ一覧の構造化マークアップ\n */\nconst FAQSchemaMarkup: FC<FAQSchemaMarkupProps> = ({ items }) => (\n  <Helmet>\n    <script type=\"application/ld+json\">\n      {JSON.stringify({\n        '@context': 'https://schema.org',\n        '@type': 'FAQPage',\n        mainEntity: items.map(({ question, answer }) => ({\n          '@type': 'Question',\n          name: question,\n          acceptedAnswer: {\n            '@type': 'Answer',\n            text: answer,\n          },\n        })),\n      })}\n    </script>\n  </Helmet>\n);\n\nexport default FAQSchemaMarkup;\n","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zMTIiIGhlaWdodD0iMTIuMzEyIiB2aWV3Qm94PSIwIDAgMTIuMzEyIDEyLjMxMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjMjQwMDAwOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0i44Kw44Or44O844OXXzEwMDYxIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMDA2MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiPgogICAgPGNpcmNsZSBpZD0i5qWV5YaG5b2iXzQzIiBkYXRhLW5hbWU9IualleWGhuW9oiA0MyIgY2xhc3M9ImNscy0xIiBjeD0iNi4xNTYiIGN5PSI2LjE1NiIgcj0iNi4xNTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+CiAgICA8cGF0aCBpZD0i44OR44K5XzY0NDciIGRhdGEtbmFtZT0i44OR44K5IDY0NDciIGNsYXNzPSJjbHMtMiIgZD0iTTY2MS4yMjMsOTUuMzM0YS41MzYuNTM2LDAsMCwxLS4zNzktLjkxNWwyLjgyNy0yLjgyNy0yLjgyNy0yLjgyN2EuNTM2LjUzNiwwLDAsMSwuNzU4LS43NThsMy41ODUsMy41ODVMNjYxLjYsOTUuMTc3QS41MzQuNTM0LDAsMCwxLDY2MS4yMjMsOTUuMzM0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY1Ni4xNzMgLTg1LjM4NykiLz4KICA8L2c+Cjwvc3ZnPgo=\"","export default __webpack_public_path__ + \"static/triple_crown-c0e121debfdd4fe315f82076accf9353.svg\";"],"sourceRoot":""}