{"version":3,"file":"component---src-pages-column-details-c-0052-tsx-5930ac579b764b8c5404.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/molecules/columnAuthor001.tsx","webpack://beaver-help/./src/components/molecules/popupBanner.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout011.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0052.tsx","webpack://beaver-help/./src/components/molecules/columnRelationCards0052.tsx","webpack://beaver-help/./src/pages/column/details/C0052.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'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 60px;\n  border: solid 2px #e5e5e5;\n  border-radius: 5px;\n  padding: 20px;\n\n  section {\n    display: flex;\n    justify-content: left;\n    align-items: center;\n\n    img {\n      width: 110px;\n      height: 110px;\n      margin: 0 20px 0 0;\n    }\n\n    .author-wrap {\n      position: relative;\n      width: 100%;\n\n      p {\n        line-height: 2;\n\n        &.author-name {\n          font-size: 18px;\n          font-weight: 600;\n\n          span {\n            font-weight: 400;\n            font-size: 14px;\n          }\n        }\n\n        &.author-job {\n          position: relative;\n          width: 100%;\n          margin-left: 14px;\n\n          &:before {\n            display: block;\n            content: '';\n            position: absolute;\n            width: 0;\n            height: 0;\n            top: 10px;\n            left: -14px;\n            border-left: 8px solid #3ec7b3;\n            border-top: 4px solid transparent;\n            border-bottom: 4px solid transparent;\n          }\n\n          a {\n            margin-right: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  .detail-txt {\n    border-top: solid 1px #dcdee1;\n    margin-top: 20px;\n    padding-top: 15px;\n    line-height: 1.8;\n  }\n\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：オーサ情報 蓑田 真吾（ミノダ シンゴ）\n * @constructor\n */\nconst columnAuthor001 = () => (\n  <Wrapper>\n    {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n    <section>\n      <img src=\"/images/column/authors/a001.png\" alt=\"蓑田 真吾\" />\n      <div className=\"author-wrap\">\n        <p className=\"author-name\">\n          蓑田 真吾<span>（ミノダ シンゴ）</span>\n        </p>\n        <p className=\"author-job\">\n          <Link\n            to=\"https://www.minodashahorou.com/\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            みのだ社会保険労務士事務所\n          </Link>\n          代表 社会保険労務士\n        </p>\n      </div>\n    </section>\n    <div className=\"detail-txt\">\n      社会保険労務士(社労士)独立後は労務トラブルが起こる前の事前予防対策に特化。現在は様々な労務管理手法を積極的に取り入れ企業の人事労務業務をサポートしている。また、年金・医療保険に関する問題や労働法・働き方改革関する専門家として、実務相談を多く取り扱い、大手出版社からも書籍出版するなど、多方面で執筆活動を行う。\n    </div>\n  </Wrapper>\n)\n\nexport default columnAuthor001\n","import React, { useEffect, useState } from 'react'\nimport styled from '@emotion/styled'\nimport { a } from 'aws-amplify'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  position: fixed;\n  bottom: 100px;\n  left: 30px;\n  width: 300px;\n  height: 250px;\n  z-index: 100;\n  img {\n    height: 250px;\n    width: 300px;\n    border: 2px solid #e5e5e5;\n  }\n  .popup-close {\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    width: 29px;\n    height: 29px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #fff;\n    border-radius: 50%;\n    border: solid 2px #e5e5e5;\n    text-decoration: none;\n    &:hover {\n      text-decoration: none;\n    }\n  }\n`\n\n// ▼ここで何ピクセルスクロールしたら表示するのかを設定してね\nconst PAGE_Y_OFFSET = 1500\n\nconst PopupBanner = () => {\n  const [show, setShow] = useState<boolean>(false)\n\n  const changeShow = () => {\n    if (window.pageYOffset > PAGE_Y_OFFSET) {\n      setShow(true)\n    } else {\n      setShow(false)\n    }\n  }\n\n  const [visible, setVisible] = useState(true)\n\n  useEffect(() => {\n    window.addEventListener('scroll', changeShow)\n    return () => window.removeEventListener('scroll', changeShow)\n  }, [])\n\n  const [no, setNo] = useState(-1)\n  useEffect(() => {\n    setNo(Math.floor(Math.random() * 2))\n  }, [])\n\n  const routeParam = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202301'\n  )\n  const routeParam2 = useRouteParam(\n    'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202302'\n  )\n\n  if (show)\n    return (\n      <Wrapper style={{ visibility: visible ? 'visible' : 'hidden' }}>\n        {no === 0 && (\n          <div>\n            <a target=\"_blank\" href={routeParam} rel=\"noreferrer\">\n              <img\n                src=\"/images/column/common/popupBanner01.png\"\n                alt=\"キンクラ\"\n              />\n            </a>\n          </div>\n        )}\n        {no === 1 && (\n          <div>\n            <a target=\"_blank\" href={routeParam2} rel=\"noreferrer\">\n              <img\n                src=\"/images/column/common/popupBanner02.png\"\n                alt=\"キンクラ\"\n              />\n            </a>\n          </div>\n        )}\n        {/** ▼閉じるボタン */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n        <a className=\"popup-close\" onClick={() => setVisible(!visible)}>\n          ×\n        </a>\n      </Wrapper>\n    )\n  return null\n}\n\nexport default PopupBanner\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport WingSvg from '../atoms/wingSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 30px;\n  font-size: 16px;\n\n  h1 {\n    border-bottom: solid 2px #243650;\n    position: relative;\n    display: inline-block;\n    width: auto;\n    padding: 0 6px 2px 0;\n    margin-bottom: 10px;\n\n    .svg-icon {\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      right: -22px;\n      bottom: -3px;\n    }\n  }\n\n  section {\n    display: flex;\n    padding: 20px 25px 20px 20px;\n    background: #f2faf9;\n    border-radius: 5px;\n    justify-content: space-between;\n\n    h2 {\n      font-size: 22px;\n      color: #ff9600;\n      display: flex;\n      align-items: center;\n      margin-bottom: 15px;\n\n      img {\n        width: 65px;\n        margin: 0 5px 0 0;\n        height: auto;\n      }\n    }\n\n    p {\n      margin: 0 0 5px 5px;\n    }\n\n    .p-function-link {\n      position: relative;\n      top: 9px;\n      right: 2px;\n      left: 20px;\n\n      &:before {\n        display: block;\n        content: '';\n        position: absolute;\n        width: 0;\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\n    .p-screen-wrap {\n      width: 260px;\n      height: auto;\n      margin: 5px 5px 0;\n      display: flex;\n      align-items: center;\n      justify-content: right;\n\n      img {\n        width: 100%;\n        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n      }\n    }\n  }\n`\n\n/**\n * コラム記事下部：キンクラの便利な機能レイアウト_勤務実態集計\n * TODO 川上申し送り事項：ここでは記事に関連したキンクラの機能の紹介をします\n * 機能数に応じてが増える予定ですが、どういう運用方法になるのかは不明です。\n * @constructor\n */\nconst usefulFunctionLayout011 = () => (\n  <Wrapper>\n    <h1>\n      キンクラの便利な機能\n      <WingSvg />\n    </h1>\n    <section>\n      <div>\n        <h2>\n          <img\n            src=\"/images/official/function/imgFunction37.png\"\n            alt=\"キンクラの勤務実態集計\"\n          />\n          勤務実態集計\n        </h2>\n        <p>\n          従業員の出勤率、自社と常駐先の比率や在宅勤務率等、集計して確認できます。\n        </p>\n        <Link className=\"p-function-link\" to={useRouteParam('/function/')}>\n          キンクラの機能を見る\n        </Link>\n      </div>\n      <div className=\"p-screen-wrap\">\n        <img\n          src=\"/images/column/functions/f011.jpg\"\n          alt=\"キンクラの勤務実態集計\"\n        />\n      </div>\n    </section>\n  </Wrapper>\n)\n\nexport default usefulFunctionLayout011\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport Introduction004 from './Introduction004'\nimport Introduction005 from './Introduction005'\nimport Introduction006 from './Introduction006'\nimport Introduction007 from './Introduction007'\nimport Introduction008 from './Introduction008'\nimport Introduction009 from './Introduction009'\nimport Introduction010 from './Introduction010'\nimport Introduction011 from './Introduction011'\nimport Introduction012 from './Introduction012'\n\nconst Wrapper = styled.article`\n  position: relative;\n  margin-bottom: 30px;\n  .p-txt-date {\n    margin-top: -10px;\n    color: #ababab;\n  }\n  section {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    font-size: 16px;\n    color: #505050;\n    line-height: 1.6em;\n    h1 {\n      color: #414141;\n      font-size: 22px;\n      line-height: 1.4em;\n      background: #f5f5f5;\n      border-radius: 3px;\n      position: relative;\n      width: 100%;\n      padding: 5px 5px 5px 20px;\n      margin-bottom: 30px;\n      margin-top: 10px;\n      &:before {\n        content: '';\n        position: absolute;\n        width: 10px;\n        background: #77d7c9;\n        left: 0;\n        top: 0;\n        border-radius: 3px 0 0 3px;\n        height: 100%;\n      }\n    }\n    h2 {\n      color: #414141;\n      font-size: 22px;\n      line-height: 1.4em;\n      background: #ffffff;\n      border-radius: 3px;\n      position: relative;\n      width: 100%;\n      padding: 5px 5px 5px 20px;\n      margin-top: 10px;\n      margin-bottom: 30px;\n      &:before {\n        content: '';\n        position: absolute;\n        width: 10px;\n        background: #d8d8d8;\n        left: 0;\n        top: 0;\n        border-radius: 3px 0 0 3px;\n        height: 100%;\n      }\n    }\n    h3 {\n      color: #414141;\n      font-size: 16px;\n      line-height: 1.4em;\n      background: #ffffff;\n      width: auto;\n      padding: 10px 0 8px;\n      margin-top: -10px;\n      margin-bottom: 20px;\n      border-top: solid 2px #e5e5e5;\n      border-bottom: solid 2px #e5e5e5;\n    }\n    p {\n      padding-bottom: 30px;\n      line-height: 2;\n      position: relative;\n      span {\n        background: linear-gradient(transparent 60%, #ff6 60%);\n        font-weight: 600;\n      }\n      .p-list-link {\n        position: absolute;\n        top: 6px;\n        right: 2px;\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      &.txt-color-red {\n        color: #ff6969;\n      }\n    }\n    .link-div {\n      width: 100%;\n      display: flex;\n      justify-content: left;\n      padding-bottom: 30px;\n      > div {\n        width: 50px;\n      }\n      .link-p {\n        width: calc(100% - 50px);\n        .p-list-link {\n          position: absolute;\n          top: -3px;\n          left: 30px;\n          &:before {\n            display: block;\n            content: '';\n            position: absolute;\n            width: 0;\n            height: 0;\n            top: 11px;\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    }\n    img {\n      width: 100%;\n      height: auto;\n      padding-bottom: 30px;\n    }\n  }\n  ${BreakPoints.large} {\n  }\n`\ntype Props = {\n  /** 広告の番号 */\n  no: number\n}\n\n/**\n * コラム記事詳細：記事本体\n * @constructor\n */\nconst ColumnDetailInner0052 = (props: Props): JSX.Element => (\n  <Wrapper>\n    <ColumnH1 label=\"有給休暇と残業時間の関係。残業時間が相殺されるケースとは\" />\n    {/** TODO 川上申し送り事項：▼投稿日をここに表示 */}\n    <p className=\"p-txt-date\">2023.06.13</p>\n    <section>\n      {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n      <p>\n        有給休暇と残業時間とは全く性質が異なるものの、相互に密接に関連している部分があります。この関係を理解できていない状態では適正な労務管理を進めていくことが難しくなります。今回は有給休暇と残業時間の関係について、具体例を交え、解説していきます。\n      </p>\n      <img src=\"/images/column/details/c0052.jpg\" alt=\"キンクラコラム画像52\" />\n      <h1 id=\"toc1\">有給休暇と残業時間が関連するケースとは</h1>\n      <p>\n        前提として、有給休暇は「本来働くべき日」に取得することができる休暇制度です。言い換えると、\n        <span>有給休暇は働くべき義務のない休日には取れない</span>\n        ということです。他方、休日労働と言い、休日に働くことは可能とされています。\n        <br />\n        <br />\n        では、どのような場合に残業が発生するかと言うと、労働時間とは1日8時間・週40時間以内が法律上の枠組みとなるものの、それを超えて働かざるを得ない場合も少なくありません。最も分かりやすい例では8時30分から17時30分（途中1時間休憩）まで1日8時間労働として契約している労働者が9時間働いた（18時30分まで）場合、1時間の「残業時間」が発生します。しかし、午前中は有給休暇を取得し、13時から出勤した場合はどのように考えるべきでしょうか。結論として、\n        <span>\n          法律上はその日に18時30分まで働いたとしても残業時間としては扱われません。\n        </span>\n        その理由として、有給休暇は働いたものとみなして賃金を保障する制度ですが、実際に働いているわけではありません。1日8時間・週40時間を考えるにあたっては「実労働時間」を計算し、残業時間を計算しますので、本事例では法律上、残業時間としては扱われないこととなります。\n      </p>\n\n      <h1 id=\"toc2\">残業時間の2つの種類</h1>\n      <p>\n        残業時間と言っても厳密には次の2つの残業時間があります。1つは\n        <span>法定外残業</span>と2つ目は<span>法定内残業</span>\n        です。会社によっては異なる呼び名を用いているケースもありますが、本記事では法定外（内）残業で話を進めていきます。\n        <br />\n        <br />\n        <span>1日8時間・週40時間を超えて働いた分は法定外残業</span>\n        と言います。これは法律上の1日8時間・週40時間の「法定労働時間」を超えて働いた分であるためとされています。次に法定内残業とは、人によっては通常の労働契約で1日7時間労働という契約をしているケースも珍しくありません。そのような場合に、仮に9時間労働をした場合、\n        <span>7時間を超えて8時間までの労働を法定内残業</span>\n        と呼びます。これは法律上の1日8時間・週40時間の「法定労働時間」を超えていない労働であるためとされています。そして、8時間を超えて9時間までの労働は法定外残業となります。\n        <br />\n        <br />\n        補足として、法定内残業は通常の賃金と同額を支払えば足り、法定外残業のように通常の賃金に更に1.25倍割り増した割増賃金を支払うことは、法律上は義務とされていません。\n        <br />\n        <br />\n        午前中に有給休暇を取り、（午後から出社）遅い時間まで勤務した場合であっても、少なくとも午前中は労働の提供がなされいないことから、（有給休暇により）午前中の賃金の保障はされても実労働時間のカウントとは別次元の話ですので、終業時刻が17時30分であり、仮にその時刻を過ぎて働いたとしても全く残業が発生しないことは理論上十分にあり得ます。\n      </p>\n\n      {/** ここに9パターンの広告設定する */}\n      {props.no === 0 && <Introduction004 />}\n      {props.no === 1 && <Introduction005 />}\n      {props.no === 2 && <Introduction006 />}\n      {props.no === 3 && <Introduction007 />}\n      {props.no === 4 && <Introduction008 />}\n      {props.no === 5 && <Introduction009 />}\n      {props.no === 6 && <Introduction010 />}\n      {props.no === 7 && <Introduction011 />}\n      {props.no === 8 && <Introduction012 />}\n\n      <h1 id=\"toc3\">実務上の留意点</h1>\n      <p>\n        法律上の理屈では、1日8時間・週40時間を超えて働いた場合に限り残業代（通常の賃金に対して1.25倍の賃金）を支払うという労務管理は問題ありません。しかし、就業規則上「終業時刻を過ぎて働いた分は割増賃金を支払う」と規定されている場合、話は異なります。\n        <span>\n          就業規則はその会社の最低基準のルールを定めたものであり、その内容を下回ることができません。\n        </span>\n        それは法律を上回る内容を定めていた場合であっても、既に規定を定め労働者に周知している場合はその内容がその会社の「最低基準」となります。\n        <br />\n        <br />\n        このことが、何を意味するかと言うと、仮に8時30分が始業、17時30分が終業の会社の場合、午前中に有給休暇を取り、午後に出社した場合であっても、17時30分以降に働いた分は残業時間として割増賃金を支払うというルールになるということです。\n      </p>\n\n      <h1 id=\"toc4\">相殺は可能？</h1>\n      <p>\n        例えば2日連続で午前中に有給休暇を取得し、初日は実労働時間として6時間働き、翌日は実労働時間として10時間働いた場合を検証します。会社目線では、経営的にも割増賃金は可能な限り回避したいものですが、翌日の2時間分の残業(10時間労働-法定労働時間である8時間=2時間)を初日に当て込んで両日、\n        <span>残業ゼロという対応は取れません。</span>\n        <br />\n        <br />\n        参考までにフレックスタイム制であれば原則として、月あたりの総労働時間数で残業時間を計算するため、一日経過時点では残業時間として確定しませんが、通常の固定労働時間制では日を跨いで相殺するという対応は違法となります。\n      </p>\n\n      <h1 id=\"toc5\">最後に</h1>\n      <p>\n        割合的に有給休暇を取得した日に残業するというケース自体、あまり多くはないのでしょうが、そもそも残業という性質上、労働者の業務スケジュールとは無関係に突発的に発生することがありますので、\n        <span>どのような場合に法律上の残業時間として扱われるのか</span>\n        と言う部分と、自社の\n        <span>就業規則の規定内容は必ず確認しておくべき</span>論点です。\n      </p>\n    </section>\n  </Wrapper>\n)\n\nexport default ColumnDetailInner0052\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport ColumnBtnCard from '../atoms/columnBtnCard'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n  section {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: start;\n\n    span {\n      display: none;\n    }\n  }\n\n  ${BreakPoints.large} {\n    margin-bottom: 10px;\n  }\n`\n\n/**\n * 関連記事カードセット\n * TODO 川上申し送り事項：記事詳細下部に表示されるコンポーネントです。\n * ここでは、表示している記事に関連した他の記事3件が表示される予定です\n * @constructor\n */\nconst ColumnRelationCards0052 = () => {\n  const routeParam = useRouteParam('/column/details/C0021/')\n  const routeParam2 = useRouteParam('/column/details/C0022')\n  const routeParam3 = useRouteParam('/column/details/C0027')\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"関連コラム\" />\n      <section>\n        <ColumnBtnCard\n          href={routeParam}\n          imgId=\"c0021.jpg\"\n          label=\"年次有給休暇とは？付与の条件や日数、時期などを詳しく解説\"\n          date=\"2022.04.15\"\n        />\n        <ColumnBtnCard\n          href={routeParam2}\n          imgId=\"c0022.jpg\"\n          label=\"有給休暇の取得義務化！企業がするべき対応やポイントとは\"\n          date=\"2022.04.15\"\n        />\n        <ColumnBtnCard\n          href={routeParam3}\n          imgId=\"c0027.jpg\"\n          label=\"残業とは何か？残業の定義や上限時間などを解説します\"\n          date=\"2022.04.15\"\n        />\n      </section>\n    </Wrapper>\n  )\n}\n\nexport default ColumnRelationCards0052\n","import { graphql } from 'gatsby'\nimport React, { useEffect, useState } from 'react'\nimport ColumnBackAndForth from '../../../components/atoms/columnBackAndForth'\nimport SEO from '../../../components/atoms/seo'\nimport { ITopicPath } from '../../../components/atoms/topicPath'\nimport ColumnDetailInner0052 from '../../../components/molecules/columnDetailInner0052'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport Conclusion001 from '../../../components/molecules/Conclusion001'\nimport Conclusion002 from '../../../components/molecules/Conclusion002'\nimport Conclusion003 from '../../../components/molecules/Conclusion003'\nimport Conclusion004 from '../../../components/molecules/Conclusion004'\nimport Conclusion005 from '../../../components/molecules/Conclusion005'\nimport Conclusion006 from '../../../components/molecules/Conclusion006'\nimport Conclusion007 from '../../../components/molecules/Conclusion007'\nimport Conclusion008 from '../../../components/molecules/Conclusion008'\nimport Conclusion009 from '../../../components/molecules/Conclusion009'\nimport ColumnAuthor001 from '../../../components/molecules/columnAuthor001'\nimport ColumnRelationCards0052 from '../../../components/molecules/columnRelationCards0052'\nimport UsefulFunctionLayout011 from '../../../components/molecules/usefulFunctionLayout011'\nimport CarouselBanner from '../../../components/molecules/carouselBanner'\nimport PopupBanner from '../../../components/molecules/popupBanner'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0052 = () => {\n  const paths: ITopicPath[] = [\n    { title: 'キンクラコラムTOP', link: useRouteParam('/column') },\n    { title: 'コラム記事一覧', link: useRouteParam('/column/list') },\n    {\n      title: '有給休暇と残業時間の関係。残業時間が相殺されるケースとは',\n    },\n  ]\n\n  // 0~8ランダム数字を保存\n  const [no, setNo] = useState(-1)\n  useEffect(() => {\n    setNo(Math.floor(Math.random() * 9))\n  }, [])\n\n  return (\n    <ColumnLayout paths={paths}>\n      <SEO\n        title=\"有給休暇と残業時間の関係。残業時間が相殺されるケースとは\"\n        description=\"残業は「実労働時間」を計算し、残業時間を計算します。有給休暇を取得して残業した場合など、労働時間が基準値を超えなければ、割増賃金が発生しないケースがあります。\"\n        ogUrl=\"https://kintaicloud.jp/column/details/C0052/\"\n        ogType=\"article\"\n        ogTitle=\"有給休暇と残業時間の関係。残業時間が相殺されるケースとは\"\n        ogDescription=\"残業は「実労働時間」を計算し、残業時間を計算します。有給休暇を取得して残業した場合など、労働時間が基準値を超えなければ、割増賃金が発生しないケースがあります。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n        ogImage=\"https://www.kintaicloud.jp/images/column/details/c0052.jpg\"\n      />\n      <ColumnDetailsBody>\n        {/** ポップアップバナー */}\n        <PopupBanner />\n        {/** 記事本体 */}\n        <ColumnDetailInner0052 no={no} />\n\n        {/** ここに9パターンの広告設定する */}\n        {no === 0 && <Conclusion001 />}\n        {no === 1 && <Conclusion002 />}\n        {no === 2 && <Conclusion003 />}\n        {no === 3 && <Conclusion004 />}\n        {no === 4 && <Conclusion005 />}\n        {no === 5 && <Conclusion006 />}\n        {no === 6 && <Conclusion007 />}\n        {no === 7 && <Conclusion008 />}\n        {no === 8 && <Conclusion009 />}\n\n        {/** オーサ情報 */}\n        <ColumnAuthor001 />\n        {/** お役立ち機能 */}\n        <UsefulFunctionLayout011 />\n        {/** 前後記事への遷移 */}\n        <ColumnBackAndForth />\n        {/** カルーセルバナー */}\n        <CarouselBanner />\n        {/** 関連記事 */}\n        <ColumnRelationCards0052 />\n      </ColumnDetailsBody>\n    </ColumnLayout>\n  )\n}\n\nexport default C0052\n\nexport const pageQuery = graphql`\n  query C0052 {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["StyledLink","Link","props","className","to","href","src","imgId","alt","label","date","Wrapper","BreakPoints","target","rel","useState","show","setShow","changeShow","window","pageYOffset","visible","setVisible","useEffect","addEventListener","removeEventListener","no","setNo","Math","floor","random","routeParam","useRouteParam","routeParam2","style","visibility","onClick","id","Introduction004","Introduction005","Introduction006","Introduction007","Introduction008","Introduction009","Introduction010","Introduction011","Introduction012","routeParam3","paths","title","link","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage","Conclusion001","Conclusion002","Conclusion003","Conclusion004","Conclusion005","Conclusion006","Conclusion007","Conclusion008","Conclusion009"],"sourceRoot":""}