{"version":3,"file":"component---src-pages-column-index-tsx-cef58af74cdcf9b6f020.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/atoms/columnBtnList.tsx","webpack://beaver-help/./src/components/molecules/columnRecommendLists.tsx","webpack://beaver-help/./src/components/atoms/columnTopImage.tsx","webpack://beaver-help/./src/components/molecules/columnNewCards.tsx","webpack://beaver-help/./src/components/organisms/columnTopBody.tsx","webpack://beaver-help/./src/pages/column/index.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst StyledLink = styled(Link)`\n  padding: 7px;\n  width: 220px;\n  border-radius: 5px;\n  border: solid 3px transparent;\n  margin-bottom: 15px;\n  &:hover {\n    border-color: #77d7c9;\n    text-decoration: underline solid rgba(255, 255, 255, 0);\n  }\n  .img-wrap {\n    width: 200px;\n    height: 100px;\n    overflow: hidden;\n    margin-bottom: 12px;\n    img {\n      width: 110%;\n      height: auto;\n    }\n  }\n  h2 {\n    font-size: 18px;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    margin-bottom: 8px;\n  }\n  span {\n    color: #ababab;\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  href: string\n  /** 画像 */\n  imgId: string\n  /** タイトル */\n  label: string\n  /** タイトル */\n  date: string\n}\n\n/**\n * コラム用カード型ボタンリンクコンポーネント\n * @param props\n * @constructor\n */\nconst ColumnBtnCard = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <StyledLink className={className} to={props.href}>\n      <div className=\"img-wrap\">\n        {/** TODO 川上申し送り事項：▼記事ごとに指定されて画像がここに表示されます */}\n        <img\n          src={`/images/column/details/${props.imgId}`}\n          alt=\"キンクラコラム\"\n        />\n      </div>\n      {/** TODO 川上申し送り事項：▼記事のタイトルがここに表示されます */}\n      <h2>{props.label}</h2>\n      {/** TODO 川上申し送り事項：▼記事の投稿日がここに表示されます */}\n      <span>{props.date}</span>\n    </StyledLink>\n  )\n}\n\nexport default ColumnBtnCard\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst StyledLink = styled(Link)`\n  padding: 7px;\n  border-radius: 5px;\n  border: solid 3px transparent;\n  display: flex;\n  margin-bottom: 10px;\n\n  &:hover {\n    border-color: #77d7c9;\n    text-decoration: underline solid rgba(255, 255, 255, 0);\n  }\n\n  .img-wrap {\n    width: 200px;\n    min-width: 200px;\n    height: 100px;\n    overflow: hidden;\n    margin-right: 15px;\n\n    img {\n      width: 110%;\n      height: auto;\n    }\n  }\n\n  .txt-wrap {\n    h2 {\n      font-size: 18px;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      margin-bottom: 6px;\n    }\n\n    p {\n      color: #505050;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    span {\n      color: #ababab;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  href: string\n  /** 画像 */\n  imgId: string\n  /** タイトル */\n  label: string\n  /** 本文 */\n  text: string\n  /** 日付 */\n  date: string\n}\n\n/**\n * コラム用リスト型ボタンリンクコンポーネント\n * @param props\n * @constructor\n */\nconst ColumnBtnList = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <StyledLink className={className} to={props.href}>\n      <div className=\"img-wrap\">\n        {/** TODO 川上申し送り事項：▼記事ごとに指定されて画像がここに表示されます */}\n        <img\n          src={`/images/column/details/${props.imgId}`}\n          alt=\"キンクラコラム\"\n        />\n      </div>\n      <div className=\"txt-wrap\">\n        {/** TODO 川上申し送り事項：▼記事のタイトルがここに表示されます */}\n        <h2>{props.label}</h2>\n        {/** TODO 川上申し送り事項：▼記事の本文がここに表示されます */}\n        <p>{props.text}</p>\n        {/** TODO 川上申し送り事項：▼記事の投稿日がここに表示されます */}\n        <span>{props.date}</span>\n      </div>\n    </StyledLink>\n  )\n}\n\nexport default ColumnBtnList\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport ColumnBtnList from '../atoms/columnBtnList'\nimport ColumnH1 from '../atoms/columnH1'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  position: relative;\n  .txt-wrap {\n    span {\n      display: none;\n    }\n  }\n  .p-list-link {\n    position: absolute;\n    top: 9px;\n    right: 2px;\n    &:before {\n      display: block;\n      content: '';\n      position: absolute;\n      width: 0;s\n      height: 0;\n      top: 5px;\n      left: -14px;\n      border-left: 8px solid #3ec7b3;\n      border-top: 4px solid transparent;\n      border-bottom: 4px solid transparent;\n    }\n  }\n  section {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n`\n\n/**\n * おすすめリストセット\n * TODO 川上申し送り事項：ここでは、おすすめとして指定された記事3件が表示される予定です\n * @constructor\n */\nconst ColumnRecommendLists = () => {\n  const routeParam = useRouteParam('/column/details/C0003')\n  const routeParam2 = useRouteParam('/column/details/C0006')\n  const routeParam3 = useRouteParam('/column/details/C0011')\n\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"おすすめ\" />\n      <section>\n        <ColumnBtnList\n          href={routeParam}\n          imgId=\"c0003.jpg\"\n          label=\"勤怠管理システムを導入したい！メリットや気をつけることとは\"\n          text=\"ワーク・ライフ・バランスや働き方改革の流れを受け、雇用形態が多様化し、社員それぞれの状況に適した形で働くことのできる環境づくりが求められるようになりました。さらに、新型コロナウイルスの流行を受け、自粛要請に伴い在宅勤務を強いられることになった企業も多いことでしょう。\"\n          date=\"2022.04.15\"\n        />\n        <ColumnBtnList\n          href={routeParam2}\n          imgId=\"c0006.jpg\"\n          label=\"通常の労働時間制（固定労働時間制度）と変形労働時間制について\"\n          text=\"通常の労働時間制、フレックスタイム制、裁量労働制など、我が国には働き方の多様化に対応した変則的な労働時間制が複数設けられています。どの制度を活用することでメリットの最大化を図ることができるかは、前提としておさえておくべき論点が明確化されていることで正しい選択が可能となります\"\n          date=\"2022.04.15\"\n        />\n        <ColumnBtnList\n          href={routeParam3}\n          imgId=\"c0011.jpg\"\n          label=\"就業時間とは？労働時間や勤務時間との違いや正しい計算方法を解説\"\n          text=\"近年、働き方の見直しを行う動きが活性化しています。そのうえで就業時間や労働時間など、ルールをしっかりと理解することが必須となります。\"\n          date=\"2022.04.15\"\n        />\n      </section>\n    </Wrapper>\n  )\n}\n\nexport default ColumnRecommendLists\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  height: 200px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  background-size: cover;\n  background: rgba(255, 255, 255, 0.6) url(/images/column/top/bgColumnTop01.jpg)\n    center;\n  background-blend-mode: lighten;\n\n  h2 {\n    text-align: center;\n    font-weight: 400;\n    font-size: 18px;\n    margin: 10px 0 0;\n    color: #153758;\n\n    img {\n      width: 70vw;\n      max-width: 500px;\n      display: block;\n      margin: 0 auto 20px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    padding-top: 40px;\n\n    h2 {\n      font-size: 16px;\n    }\n  }\n\n  ${BreakPoints.small} {\n  }\n`\n\n/**\n * キンクラコラムTOPイメージ\n * @constructor\n */\nconst ColumnTopImage = (): JSX.Element => (\n  <Wrapper>\n    <h2>\n      <img src=\"/images/column/top/logo.png\" alt=\"キンクラコラム\" />\n      勤怠管理に関する知識や役に立つ情報をお届けします\n    </h2>\n  </Wrapper>\n)\n\nexport default ColumnTopImage\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport useRouteParam from '../../hooks/useRouteParam'\nimport ColumnBtnCard from '../atoms/columnBtnCard'\nimport ColumnH1 from '../atoms/columnH1'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 30px;\n\n  .p-list-link {\n    position: absolute;\n    top: 9px;\n    right: 2px;\n\n    &:before {\n      display: block;\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 0;\n      top: 7px;\n      left: -14px;\n      border-left: 8px solid #3ec7b3;\n      border-top: 4px solid transparent;\n      border-bottom: 4px solid transparent;\n    }\n  }\n\n  section {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n\n  .list-btn-wrap {\n    display: flex;\n    justify-content: center;\n    margin-top: 30px;\n\n    a {\n      border-radius: 25vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #19ba9b;\n      border: solid 2px #19ba9b;\n      width: 200px;\n      height: 50px;\n\n      &:hover {\n        opacity: 1;\n        background: #ffffff;\n        color: #3ec7b3;\n        text-decoration: underline solid rgba(255, 255, 255, 0);\n      }\n    }\n  }\n`\n\n/**\n * 最新記事カードセット\n * TODO 川上申し送り事項：ここでは、新着記事6件が表示される予定です\n * @constructor\n */\nconst ColumnNewCards = () => {\n  const routeParam = useRouteParam('/column/details/C0079/')\n  const routeParam2 = useRouteParam('/column/details/C0078/')\n  const routeParam3 = useRouteParam('/column/details/C0077/')\n  const routeParam4 = useRouteParam('/column/details/C0076/')\n  const routeParam5 = useRouteParam('/column/details/C0075/')\n  const routeParam6 = useRouteParam('/column/details/C0074/')\n\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"最新コラム\" />\n      <section>\n        <ColumnBtnCard\n          href={routeParam}\n          imgId=\"c0079.jpg\"\n          label=\"勤怠の締め日にはどんな作業をする？締め作業を軽減する方法とは？\"\n          date=\"2025.02.28\"\n        />\n        <ColumnBtnCard\n          href={routeParam2}\n          imgId=\"c0078.jpg\"\n          label=\"遅刻早退時の賃金控除について、適用する際の注意事項などを解説！\"\n          date=\"2025.01.23\"\n        />\n        <ColumnBtnCard\n          href={routeParam3}\n          imgId=\"c0077.jpg\"\n          label=\"36協定に違反しないためには？協定違反となる事例集、違反しないための注意点などを解説！\"\n          date=\"2024.12.17\"\n        />\n        <ColumnBtnCard\n          href={routeParam4}\n          imgId=\"c0076.jpg\"\n          label=\"短時間正社員制度（時短正社員）の概要は？期待される人材、メリットデメリットについて解説！\"\n          date=\"2024.11.08\"\n        />\n        <ColumnBtnCard\n          href={routeParam5}\n          imgId=\"c0075.jpg\"\n          label=\"週休3日制についてメリットやデメリット、導入するにあたってのポイントとは？\"\n          date=\"2024.09.26\"\n        />\n        <ColumnBtnCard\n          href={routeParam6}\n          imgId=\"c0074.jpg\"\n          label=\"年俸制を採用した場合、賞与の有無や残業代はどうなる？メリットやデメリットについても解説！\"\n          date=\"2024.09.04\"\n        />\n        {/* <ColumnBtnCard\n          href={routeParam6}\n          imgId=\"c0092.jpg\"\n          label=\"勤怠管理のワークフローはシステム化できる！メリットや選び方を解説\"\n          date=\"2024.03.21\"\n        /> */}\n      </section>\n      <div className=\"list-btn-wrap\">\n        <Link className=\"list\" to={useRouteParam('/column/list/')}>\n          記事一覧\n        </Link>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default ColumnNewCards\n","import styled from '@emotion/styled'\nimport React, { ReactNode, useEffect, useState } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnOfficialBnr from '../atoms/columnOfficialBnr'\nimport ColumnSideNewList from '../molecules/columnSideNewList'\nimport AdsenseSide300x250 from '../atoms/adsenseSide300x250'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  background: #ffffff;\n  margin: 0 auto;\n  padding: 60px 0;\n  width: 1080px;\n  display: flex;\n  justify-content: space-between;\n\n  main {\n    width: 100%;\n    max-width: 700px;\n  }\n\n  aside {\n    width: 300px;\n\n    .bg1 {\n      background-color: #000000;\n      color: #ff0000;\n      height: 100px;\n    }\n\n    .bg2 {\n      background-color: #ff0000;\n      color: #00ffff;\n      height: 120px;\n    }\n\n    .ad-wrap {\n      width: 300px;\n      height: 250px;\n      background: #cccccc;\n      margin-bottom: 30px;\n    }\n\n    .fixed-wrap {\n      position: sticky;\n      top: 130px;\n\n      #randomBanner {\n        text-align: center;\n        margin-bottom: 10px;\n      }\n    }\n  }\n\n  .bg1 {\n    background-color: #000000;\n    color: #ff0000;\n    height: 100px;\n  }\n\n  .bg2 {\n    background-color: #ff0000;\n    color: #00ffff;\n    height: 120px;\n  }\n\n  ${BreakPoints.large} {\n    display: block;\n    width: calc(100vw - 20px);\n\n    main {\n      padding: 0 10px;\n    }\n\n    aside {\n      padding: 0 10px;\n      width: calc(100% - 20px);\n\n      .ad-wrap {\n        margin: 0 auto 30px;\n      }\n    }\n\n    .fixed-wrap {\n      position: sticky;\n      top: 130px;\n\n      #randomBanner,\n      .download-bnr {\n        margin: 0 auto;\n        width: 300px;\n\n        a {\n          margin: 0 auto;\n          display: block;\n          width: 300px;\n        }\n      }\n    }\n  }\n`\n\ntype Props = {\n  /** 子要素 */\n  children: ReactNode\n}\n\n/**\n * コラム用メイン部分レイアウト_TOP画面用\n * @constructor\n */\nconst columnTopBody = ({ children }: Props) => {\n  const [no, setNo] = useState(-1)\n  useEffect(() => {\n    setNo(Math.floor(Math.random() * 8))\n  }, [])\n\n  const routeParam = useRouteParam(\n    'https://www.kintaicloud.jp/lpa/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam2 = useRouteParam(\n    'https://www.kintaicloud.jp/lpb/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam3 = useRouteParam(\n    'https://www.kintaicloud.jp/lpa/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam4 = useRouteParam(\n    'https://www.kintaicloud.jp/lpb/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam5 = useRouteParam(\n    'https://www.kintaicloud.jp/lpa/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam6 = useRouteParam(\n    'https://www.kintaicloud.jp/lpb/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam7 = useRouteParam(\n    'https://www.kintaicloud.jp/lpa/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam8 = useRouteParam(\n    'https://www.kintaicloud.jp/lpb/?utm_source=column&utm_medium=side-banner&utm_campaign=2206&utm_content=top'\n  )\n  const routeParam9 = useRouteParam(\n    'https://www.kintaicloud.jp/download/?utm_source=column&utm_medium=side_banner&utm_campaign=document_download&utm_id=banner'\n  )\n\n  return (\n    <Wrapper>\n      <main>{children}</main>\n      <aside>\n        <div className=\"fixed-wrap\">\n          <ColumnSideNewList />\n          {no === 0 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner001.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 1 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam2} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner002.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 2 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam3} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner001.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 3 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam4} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner002.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 4 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam5} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner001.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 5 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam6} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner002.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 6 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam7} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner001.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          {no === 7 && (\n            <div id=\"randomBanner\">\n              <a href={routeParam8} target=\"_blank\" rel=\"noreferrer\">\n                <img\n                  src=\"/images/column/common/sideLpBanner002.png\"\n                  alt=\"キンクラの導入効果\"\n                />\n                導入効果\n              </a>\n            </div>\n          )}\n          <div className=\"download-bnr\">\n            <ColumnOfficialBnr\n              href={routeParam9}\n              target=\"_blank\"\n              imgId=\"sideBanner001.png\"\n              label=\"資料ダウンロード\"\n            />\n          </div>\n          {/** 広告挿入テスト：キンクラ_ディスプレイ_固定_サイドメニュー用_300x250 */}\n          <AdsenseSide300x250 />\n        </div>\n      </aside>\n    </Wrapper>\n  )\n}\nexport default columnTopBody\n","import { graphql } from 'gatsby'\nimport React from 'react'\nimport ColumnTopImage from '../../components/atoms/columnTopImage'\nimport SEO from '../../components/atoms/seo'\nimport ColumnNewCards from '../../components/molecules/columnNewCards'\nimport ColumnRecommendLists from '../../components/molecules/columnRecommendLists'\nimport ColumnLayout from '../../components/organisms/columnLayout'\nimport ColumnTopBody from '../../components/organisms/columnTopBody'\n\n/**\n * コラムTOP画面\n * @constructor\n */\nconst ColumnIndexPage = () => (\n  <ColumnLayout>\n    <SEO\n        title=\"キンクラコラム\"\n        description=\"勤怠管理や労働基準法の基礎知識から最近の法改正の解説まで。社会保険労務士の先生が執筆する、人事・総務担当者の「知りたい」が分かるお役立ちコラムを提供します。\"\n        ogUrl=\" https://www.kintaicloud.jp/column/\"\n        ogType=\"website\"\n        ogTitle=\"キンクラコラム\"\n        ogDescription=\"勤怠管理や労働基準法の基礎知識から最近の法改正の解説まで。社会保険労務士の先生が執筆する、人事・総務担当者の「知りたい」が分かるお役立ちコラムを提供します。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n    />\n    {/** TOPメインビジュアル */}\n    <ColumnTopImage />\n    <ColumnTopBody>\n      {/** 最新コラム */}\n      <ColumnNewCards />\n      {/** おすすめ記事一覧 */}\n      <ColumnRecommendLists />\n    </ColumnTopBody>\n  </ColumnLayout>\n)\n\nexport default ColumnIndexPage\n\nexport const pageQuery = graphql`\n  query ColumnIndexPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["StyledLink","Link","props","className","to","href","src","imgId","alt","label","date","text","Wrapper","routeParam","useRouteParam","routeParam2","routeParam3","BreakPoints","routeParam4","routeParam5","routeParam6","children","useState","no","setNo","useEffect","Math","floor","random","routeParam7","routeParam8","routeParam9","id","target","rel","title","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName"],"sourceRoot":""}