{"version":3,"file":"94dde350e04d96d1be1dd08af724e9a3df2a3bb0-b11cc0c46081e51f73bc.js","mappings":"qJAGA,IAAMA,GAAO,oIA4Bb,IAdiB,kBACf,QAACA,EAAD,MACI,eAAKC,MAAM,6BAA6BC,QAAQ,cAC5C,gBACIC,UAAU,QACVC,EAAE,yEAEN,gBACID,UAAU,QACVC,EAAE,kF,+ECtBVC,GAAM,uiCA4ERC,EAAAA,EAAAA,OA5EQ,mQAkGRA,EAAAA,EAAAA,MAlGQ,uDA0GRA,EAAAA,EAAAA,SA1GQ,i6CA8PZ,IAR0B,SAACC,GACzB,MAA2DA,EAAnDJ,UAAAA,OAAR,MAAoB,GAApB,IAA2DI,EAAnCC,KAAAA,OAAxB,MAA+B,QAA/B,IAA2DD,EAAnBE,MAAAA,OAAxC,MAAgD,OAAhD,EACA,OACE,QAACJ,GAAD,UAAYE,EAAZ,CAAmBJ,UAAcK,EAAL,IAAaC,EAAb,IAAsBN,IAC/CI,EAAMG,Y,0FCxPPV,GAAO,ulBAuDTM,EAAAA,EAAAA,MAvDS,MAiHb,IAlDsB,WACpB,IAAMK,GAAcC,EAAAA,EAAAA,GAClB,0GAEIC,GAAcD,EAAAA,EAAAA,GAClB,uGAEIE,GAAcF,EAAAA,EAAAA,GAClB,sGAGF,OACE,QAACZ,EAAD,MACE,aAAGG,UAAU,aAAb,oCAGA,eAAKA,UAAU,cACb,eACEY,IAAI,iDACJC,IAAI,WAGR,eAAKb,UAAU,aACb,QAAC,IAAD,CACEK,KAAK,OACLC,MAAM,SACNQ,QAAS,kBAAMC,OAAOC,KAAKL,IAC3BX,UAAU,cAJZ,kBAQA,eAAKA,UAAU,eACb,QAAC,IAAD,CACEK,KAAK,QACLS,QAAS,kBAAMC,OAAOC,KAAKN,KAF7B,aAMA,QAAC,IAAD,CACEL,KAAK,QACLS,QAAS,kBAAMC,OAAOC,KAAKR,KAF7B","sources":["webpack://beaver-help/./src/components/atoms/arrowSvg.tsx","webpack://beaver-help/./src/components/atoms/officialCommonBtn.tsx","webpack://beaver-help/./src/components/molecules/Conclusion006.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  padding: 0;\n  height: 20px;\n  width: 20px;\n  margin-bottom: 8px;\n  .cls-1{\n    fill: #FFF;\n  }\n`\n\n/**\n * SVGアイコンコンポーネント\n * 製品サイトボタン用矢印アイコン\n */\nconst ArrowSvg = (): JSX.Element => (\n  <Wrapper>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n          <path\n              className=\"cls-1\"\n              d=\"M.66,3.05L5.48 3.05 10.95 10 5.48 16.95 .66 16.95 6.13 10 .66 3.05z\"\n          />\n          <path\n              className=\"cls-1\"\n              d=\"M9.05,3.05L13.87 3.05 19.34 10 13.87 16.95 9.05 16.95 14.52 10 9.05 3.05z\"\n          />\n      </svg>\n  </Wrapper>\n)\nexport default ArrowSvg\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Button = styled.button`\n  clear: both;\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  transition: ease 0.2s;\n\n  :after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    background-image: radial-gradient(circle, #fff 10%, transparent 11%);\n    background-repeat: no-repeat;\n    background-position: 50%;\n    transform: scale(10, 10);\n    opacity: 0;\n    transition: transform 0.4s, opacity 1s;\n  }\n\n  :active:after {\n    transform: scale(0, 0);\n    opacity: 0.5;\n    transition: 0s;\n  }\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &.small {\n    /* サービスサイト用調整中 */\n    display: inline-flex;\n    min-width: 90px;\n    height: 34px;\n    font-size: 16px;\n    font-weight: 600;\n    border-radius: 100vh;\n    line-height: 16px;\n    padding: 0 20px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.medium {\n    /* サービスサイト用調整中 */\n    display: inline-flex;\n    min-width: 120px;\n    height: 48px;\n    font-size: 16px;\n    font-weight: 600;\n    border-radius: 100vh;\n    line-height: 16px;\n    padding: 0 20px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.large {\n    /* サービスサイト用調整中 */\n    display: inline-flex;\n    min-width: 120px;\n    height: 48px;\n    font-size: 16px;\n    font-weight: 600;\n    border-radius: 100vh;\n    line-height: 16px;\n    padding: 0 20px;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ${BreakPoints.medium} {\n    &.large {\n      min-width: 50px;\n      font-size: 16px;\n      height: 34px;\n      padding: 0 10px;\n    }\n  }\n\n  &.mega {\n    /* サービスサイト用調整済 */\n    display: inline-flex;\n    height: 85px;\n    font-size: 30px;\n    font-weight: 600;\n    border-radius: 100vh;\n    padding: 0 40px;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  }\n\n  ${BreakPoints.large} {\n    &.mega {\n      height: 60px;\n      font-size: 26px;\n      padding: 0 10px;\n    }\n  }\n\n  ${BreakPoints.smallest} {\n    &.mega {\n      height: 60px;\n      font-size: 24px;\n    }\n  }\n\n  &.weak {\n    /* サービスサイト用調整済 */\n    color: #00b5a6;\n    background-color: #ffffff;\n    border: solid 2px #19ba9b;\n    overflow: hidden;\n    transition: 0.2s;\n\n    :before {\n      content: '';\n      z-index: -1;\n      position: absolute;\n      width: 110%;\n      height: 101%;\n      top: 0;\n      right: -110%;\n      background-color: #19ba9b;\n      transition: 0.2s;\n    }\n\n    :hover {\n      color: #ffffff;\n      background-position: 0 105%;\n      background-color: #19ba9b;\n      transition: 0.22s;\n\n      :hover:before {\n        right: 0;\n      }\n    }\n  }\n\n  &.normal {\n    /* サービスサイト用調整済 */\n    color: #ffffff;\n    background: #19ba9b;\n    border: solid 2px #19ba9b;\n    overflow: hidden;\n\n    :before {\n      content: '';\n      z-index: -1;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: -100%;\n      background-color: #ffffff;\n      transition: 0.2s;\n    }\n\n    :hover {\n      color: #19ba9b;\n      background-position: 0 100%;\n\n      :hover:before {\n        right: 0;\n      }\n    }\n  }\n\n  &.strong {\n    /* サービスサイト用調整中 */\n    color: #ffffff;\n    background: #ff9900;\n    background: linear-gradient(\n      to bottom right,\n      #ff860d 15%,\n      #ffbf00 75%,\n      #ffff00 95%\n    );\n    background-size: 110% 110%;\n    background-position: -2px -2px;\n    border: solid 2px #ffbf00;\n\n    :before {\n      content: '';\n      z-index: -1;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: -100%;\n      background-color: #ff860d;\n      transition: 0.2s;\n    }\n\n    :hover {\n      transform: scale(1.1, 1.1);\n      border-color: #ff860d;\n\n      :hover:before {\n        right: 0;\n      }\n    }\n  }\n\n  &.weak-caution {\n    color: #ff5454;\n    background-color: #ffffff;\n    border: solid 1px #ff5454;\n  }\n\n  &.caution {\n    color: #ffffff;\n    background: #d62d2d;\n    border: solid 1px #f78787;\n  }\n\n  &.disabled {\n    color: rgba(210, 210, 210, 1);\n    background: rgba(220, 220, 220, 0.3);\n    border: solid 1px rgba(220, 220, 220, 1);\n\n    &:hover {\n      border-color: rgba(220, 220, 220, 0.8);\n    }\n  }\n`\n\nexport type ICommonBtnProps = React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> & {\n  size?: 'small' | 'medium' | 'large' | 'mega'\n  level?: 'weak' | 'normal' | 'strong' | 'weak-caution' | 'caution' | 'disabled'\n}\n/**\n * サービスサイト用共通ボタン\n * 強弱/大小で組み合わせて使うぞ\n * 立体感を出したくないときは各画面から.no-shadowを指定するようにする\n * @param props\n */\nconst OfficialCommonBtn = (props: ICommonBtnProps): JSX.Element => {\n  const { className = '', size = 'small', level = 'weak' } = props\n  return (\n    <Button {...props} className={`${size} ${level} ${className}`}>\n      {props.children}\n    </Button>\n  )\n}\nexport default OfficialCommonBtn\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border-radius: 5px;\n  padding: 20px;\n  height: 200px;\n  overflow: hidden;\n  background-image: url(/images/column/common/introductionLowerBack.png);\n  position: relative;\n\n  p {\n    line-height: unset;\n    padding: 0px;\n  }\n\n  .intro-txt {\n    font-size: 20px;\n    color: #fff;\n    font-weight: 600;\n    padding: 0px;\n  }\n\n  .btn-wrap {\n    width: 100%;\n  }\n\n  .intro-img {\n    position: absolute;\n    bottom: -6px;\n    left: 20px;\n\n    img {\n      padding: 0;\n      height: 124px;\n    }\n  }\n\n  Button.mega {\n    font-size: 26px;\n    height: 60px;\n    margin-top: 10px;\n  }\n\n  .p-cta-btns {\n    margin-bottom: 0;\n\n    button {\n      margin-bottom: 0;\n      height: 40px;\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細下部製品誘導エリア3(BC)\n * @constructor\n */\nconst Conclusion006 = () => {\n  const routeParam1 = useRouteParam(\n    'https://sign-up.kintaicloud.jp/sign-up/?utm_source=article&utm_medium=post&utm_campaign=pattern_06_Con'\n  )\n  const routeParam2 = useRouteParam(\n    'https://www.kintaicloud.jp/download/?utm_source=article&utm_medium=post&utm_campaign=pattern_06_Con'\n  )\n  const routeParam3 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=article&utm_medium=post&utm_campaign=pattern_06_Con'\n  )\n\n  return (\n    <Wrapper>\n      <p className=\"intro-txt\">\n        勤怠管理でお困りのことはありませんか？お悩みをお聞かせください\n      </p>\n      <div className=\"intro-img\">\n        <img\n          src=\"/images/column/common/introductionLower001.png\"\n          alt=\"キンクラ\"\n        />\n      </div>\n      <div className=\"btn-wrap\">\n        <OfficialCommonBtn\n          size=\"mega\"\n          level=\"strong\"\n          onClick={() => window.open(routeParam3)}\n          className=\"strong-btn\"\n        >\n          勤怠システムのお問い合わせ\n        </OfficialCommonBtn>\n        <div className=\"p-cta-btns\">\n          <OfficialCommonBtn\n            size=\"large\"\n            onClick={() => window.open(routeParam2)}\n          >\n            資料ダウンロード\n          </OfficialCommonBtn>\n          <OfficialCommonBtn\n            size=\"large\"\n            onClick={() => window.open(routeParam1)}\n          >\n            無料トライアル\n          </OfficialCommonBtn>\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default Conclusion006\n"],"names":["Wrapper","xmlns","viewBox","className","d","Button","BreakPoints","props","size","level","children","routeParam1","useRouteParam","routeParam2","routeParam3","src","alt","onClick","window","open"],"sourceRoot":""}