{"version":3,"file":"079b62e6ee0fa3c8df50c0826ce123ce26c351a8-445006e0f98df932a95d.js","mappings":"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","sources":["webpack://beaver-help/./src/components/molecules/Introduction004.tsx","webpack://beaver-help/./src/components/molecules/Introduction005.tsx","webpack://beaver-help/./src/components/molecules/Introduction006.tsx","webpack://beaver-help/./src/components/molecules/Introduction007.tsx","webpack://beaver-help/./src/components/molecules/Introduction008.tsx","webpack://beaver-help/./src/components/molecules/Introduction009.tsx","webpack://beaver-help/./src/components/molecules/Introduction010.tsx","webpack://beaver-help/./src/components/molecules/Introduction011.tsx","webpack://beaver-help/./src/components/molecules/Introduction012.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(AA)\n * @constructor\n */\nconst Introduction004 = () => {\n  const routeParam = useRouteParam('https://www.kintaicloud.jp/')\n  const routeParam2 = useRouteParam(\n    'https://sign-up.kintaicloud.jp/sign-up/?utm_source=article&utm_medium=post&utm_campaign=pattern_01_IN'\n  )\n  return (\n    <>\n      <a href={routeParam} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </a>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">勤怠システム、まずは使ってみませんか？</p>\n        </div>\n        <p className=\"detail-txt\">\n          勤怠管理システム「キンクラ」は全ての機能を\n          <br />\n          最大2ヵ月無料でお試しいただけます。\n          <br />\n          １分で簡単登録！すぐにお試しいただけます。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routeParam2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>無料トライアル</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction004\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(AB)\n * @constructor\n */\nconst Introduction005 = () => {\n  const routeParam = useRouteParam('https://www.kintaicloud.jp/')\n  const routeParam2 = useRouteParam(\n    'https://sign-up.kintaicloud.jp/sign-up/?utm_source=article&utm_medium=post&utm_campaign=pattern_02_IN'\n  )\n  return (\n    <>\n      <a href={routeParam} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </a>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">勤怠システム、まずは使ってみませんか？</p>\n        </div>\n        <p className=\"detail-txt\">\n          勤怠管理システム「キンクラ」は全ての機能を\n          <br />\n          最大2ヵ月無料でお試しいただけます。\n          <br />\n          １分で簡単登録！すぐにお試しいただけます。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routeParam2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>無料トライアル</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction005\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(AC)\n * @constructor\n */\nconst Introduction006 = () => {\n  const routeParam = useRouteParam('https://www.kintaicloud.jp/')\n  const routeParam2 = useRouteParam(\n    'https://sign-up.kintaicloud.jp/sign-up/?utm_source=article&utm_medium=post&utm_campaign=pattern_03_IN'\n  )\n  return (\n    <>\n      <a href={routeParam} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </a>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">勤怠システム、まずは使ってみませんか？</p>\n        </div>\n        <p className=\"detail-txt\">\n          勤怠管理システム「キンクラ」は全ての機能を\n          <br />\n          最大2ヵ月無料でお試しいただけます。\n          <br />\n          １分で簡単登録！すぐにお試しいただけます。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routeParam2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>無料トライアル</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction006\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n    button {\n      height: 60px;\n      margin: 0;\n    }\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(BA)\n * @constructor\n */\nconst Introduction007 = () => (\n  <Wrapper>\n    <div className=\"intro-wrap\">\n      <p className=\"intro-txt\">勤怠管理をもっと楽に！</p>\n    </div>\n    <p className=\"detail-txt\">\n      クラウド型勤怠システム「キンクラ」は\n      <br />\n      初期費用0、専用機器0、セキュリティ対策万全。\n      <br />\n      リアルタイムに情報を把握できるので、管理者の負担も軽減されます。\n    </p>\n    <div className=\"btn-wrap\">\n      <OfficialCommonBtn\n        size=\"mega\"\n        level=\"strong\"\n        onClick={() =>\n          window.open(\n            useRouteParam(\n              'https://www.kintaicloud.jp/download/?utm_source=article&utm_medium=post&utm_campaign=pattern_04_IN'\n            )\n          )\n        }\n        className=\"strong-btn\"\n      >\n        <div className=\"btn-inner\">\n          <p>資料ダウンロード</p>\n          <ArrowSvg />\n        </div>\n      </OfficialCommonBtn>\n    </div>\n  </Wrapper>\n)\n\nexport default Introduction007\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n    button {\n      height: 60px;\n      margin: 0;\n    }\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(BB)\n * @constructor\n */\nconst Introduction008 = () => (\n  <Wrapper>\n    <div className=\"intro-wrap\">\n      <p className=\"intro-txt\">勤怠管理をもっと楽に！</p>\n    </div>\n    <p className=\"detail-txt\">\n      クラウド型勤怠システム「キンクラ」は\n      <br />\n      初期費用0、専用機器0、セキュリティ対策万全。\n      <br />\n      リアルタイムに情報を把握できるので、管理者の負担も軽減されます。\n    </p>\n    <div className=\"btn-wrap\">\n      <OfficialCommonBtn\n        size=\"mega\"\n        level=\"strong\"\n        onClick={() =>\n          window.open(\n            useRouteParam(\n              'https://www.kintaicloud.jp/download/?utm_source=article&utm_medium=post&utm_campaign=pattern_05_IN'\n            )\n          )\n        }\n        className=\"strong-btn\"\n      >\n        <div className=\"btn-inner\">\n          <p>資料ダウンロード</p>\n          <ArrowSvg />\n        </div>\n      </OfficialCommonBtn>\n    </div>\n  </Wrapper>\n)\n\nexport default Introduction008\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n    button {\n      height: 60px;\n      margin: 0;\n    }\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(BC)\n * @constructor\n */\nconst Introduction009 = () => (\n  <Wrapper>\n    <div className=\"intro-wrap\">\n      <p className=\"intro-txt\">勤怠管理をもっと楽に！</p>\n    </div>\n    <p className=\"detail-txt\">\n      クラウド型勤怠システム「キンクラ」は\n      <br />\n      初期費用0、専用機器0、セキュリティ対策万全。\n      <br />\n      リアルタイムに情報を把握できるので、管理者の負担も軽減されます。\n    </p>\n    <div className=\"btn-wrap\">\n      <OfficialCommonBtn\n        size=\"mega\"\n        level=\"strong\"\n        onClick={() =>\n          window.open(\n            useRouteParam(\n              'https://www.kintaicloud.jp/download/?utm_source=article&utm_medium=post&utm_campaign=pattern_06_IN'\n            )\n          )\n        }\n        className=\"strong-btn\"\n      >\n        <div className=\"btn-inner\">\n          <p>資料ダウンロード</p>\n          <ArrowSvg />\n        </div>\n      </OfficialCommonBtn>\n    </div>\n  </Wrapper>\n)\n\nexport default Introduction009\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導(CA)\n * @constructor\n */\nconst Introduction010 = () => {\n  const routeParam = useRouteParam('https://www.kintaicloud.jp/')\n  const routeParam2 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=article&utm_medium=post&utm_campaign=pattern_07_IN'\n  )\n  return (\n    <>\n      {' '}\n      <a href={routeParam} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </a>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">\n            勤怠管理でこまっていること、ありませんか？\n          </p>\n        </div>\n        <p className=\"detail-txt\">\n          貴社にピッタリなシステムを探すお手伝いをさせてください。\n          <br />\n          ぜひお気軽にご相談ください。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routeParam2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>勤怠システムのお問い合わせ</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction010\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport { Link } from 'gatsby'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(CB)\n * @constructor\n */\nconst Introduction011 = () => {\n  const routePram = useRouteParam('https://www.kintaicloud.jp/')\n  const routePram2 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=article&utm_medium=post&utm_campaign=pattern_08_IN'\n  )\n  return (\n    <>\n      <Link to={routePram} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </Link>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">\n            勤怠管理でこまっていること、ありませんか？\n          </p>\n        </div>\n        <p className=\"detail-txt\">\n          貴社にピッタリなシステムを探すお手伝いをさせてください。\n          <br />\n          ぜひお気軽にご相談ください。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routePram2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>勤怠システムのお問い合わせ</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction011\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ArrowSvg from '../atoms/arrowSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex-wrap: wrap;\n  text-align: center;\n  margin-bottom: 60px;\n  border: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 20px;\n  position: relative;\n\n  .intro-wrap {\n    background-color: #35d4c7;\n    position: absolute;\n    padding: 10px 20px;\n    left: -10px;\n    top: 15px;\n  }\n\n  .intro-txt {\n    font-size: 18px;\n    line-height: 1;\n    color: #fff;\n    font-weight: 600;\n    margin: 0;\n    padding: 0;\n  }\n\n  .detail-txt {\n    line-height: 24px;\n    margin-top: 45px;\n    margin-bottom: 15px;\n    padding: 0;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n\n    button {\n      height: 60px;\n      margin: 0;\n    }\n\n    .btn-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      p {\n        padding: 0;\n        margin-right: 10px;\n        font-size: 23px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案(CC)\n * @constructor\n */\nconst Introduction012 = () => {\n  const routePram = useRouteParam('https://www.kintaicloud.jp/')\n  const routePram2 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=article&utm_medium=post&utm_campaign=pattern_09_IN'\n  )\n  return (\n    <>\n      <a href={routePram} className=\"column-detail-link\">\n        ⇒ 勤怠管理システム「キンクラ」について詳しく知りたい方はここをクリック\n      </a>\n      <Wrapper>\n        <div className=\"intro-wrap\">\n          <p className=\"intro-txt\">\n            勤怠管理でこまっていること、ありませんか？\n          </p>\n        </div>\n        <p className=\"detail-txt\">\n          貴社にピッタリなシステムを探すお手伝いをさせてください。\n          <br />\n          ぜひお気軽にご相談ください。\n        </p>\n        <div className=\"btn-wrap\">\n          <OfficialCommonBtn\n            size=\"mega\"\n            level=\"strong\"\n            onClick={() => window.open(routePram2)}\n            className=\"strong-btn\"\n          >\n            <div className=\"btn-inner\">\n              <p>勤怠システムのお問い合わせ</p>\n              <ArrowSvg />\n            </div>\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Introduction012\n"],"names":["Wrapper","BreakPoints","routeParam","useRouteParam","routeParam2","href","className","size","level","onClick","window","open","routePram","routePram2","Link","to"],"sourceRoot":""}