{"version":3,"file":"component---src-pages-column-details-c-0018-tsx-f76adcad151cb2da58c9.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/molecules/Introduction003.tsx","webpack://beaver-help/./src/components/molecules/columnAuthor001.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout006.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0018.tsx","webpack://beaver-help/./src/components/molecules/columnRelationCards0018.tsx","webpack://beaver-help/./src/pages/column/details/C0018.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'\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: solid 2px #bef1e5;\n  border-radius: 5px;\n  padding: 45px;\n\n  .intro-txt {\n    font-size: 30px;\n    line-height: 1;\n    color: #ff9600;\n    font-weight: 600;\n  }\n\n  .detail-txt {\n    line-height: 1.8;\n  }\n\n  .btn-wrap {\n    display: flex;\n    width: 100%;\n    justify-content: center;\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  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：製品誘導案_クラウド型の勤怠システムだからこそおすすめできます！\n * @constructor\n */\nconst Introduction002 = () => (\n  <Wrapper>\n    <p className=\"intro-txt\">\n      クラウド型の勤怠システムだからこそおすすめできます！\n    </p>\n    <p className=\"detail-txt\">\n      「キンクラ」は、初期費用ゼロ、専用機器ゼロ、セキュリティ対策も万全。\n      <br />\n      リアルタイムに情報を把握できるので、管理者の負担も軽減されます。\n    </p>\n    <div className=\"btn-wrap\">\n      <Link to={useRouteParam('/feature/')} target=\"_blank\">\n        キンクラの特徴\n      </Link>\n    </div>\n  </Wrapper>\n)\n\nexport default Introduction002\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 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\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 * @constructor\n */\nconst usefulFunctionLayout006 = () => (\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>従業員が申請した勤怠申請の確認や承認、差し戻しが一括で行えます。</p>\n        <Link className=\"p-function-link\" to={useRouteParam('/function/')}>\n          キンクラの機能を見る\n        </Link>\n      </div>\n      {/*\n      <div className=\"p-screen-wrap\">\n        <img src=\"/images/column/functions/f007.jpg\" alt=\"キンクラの残業管理\" />\n      </div> */}\n    </section>\n  </Wrapper>\n)\n\nexport default usefulFunctionLayout006\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport Introduction003 from './Introduction003'\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: 0;\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    }\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      &.img-graph {\n        padding-bottom: 10px;\n      }\n    }\n  }\n  ${BreakPoints.large} {\n  }\n`\n\n/**\n * コラム記事詳細：記事本体\n * @constructor\n */\nconst ColumnDetailInner0018 = () => (\n  <Wrapper>\n    <ColumnH1 label=\"フレックスタイム制はどんな制度？導入のメリットとポイント\" />\n    {/** TODO 川上申し送り事項：▼投稿日をここに表示 */}\n    <p className=\"p-txt-date\">2022.04.15</p>\n    <section>\n      {/** TODO 川上申し送り事項：▼記事投稿（？）で作成された内容がここに入る予定 */}\n      <p>\n        働き方改革の施行により多様な働き方が推進されています。子の養育や親の介護と並行して職業生活を営むことに対する社会的な要請は今後益々増えてくるものと推察します。\n        <br />\n        <br />\n        労働基準法は昭和22年4月7日に交付された法律であり、当時の工場労働者をモデルとして制定されています。時代の変化により働き方の多様化は否めず、全従業員が横並びで同じ労働時間管理されるという労務管理では働きたくても働けないという事情を抱えた有能な労働者の雇用が難しくなりました。\n        <br />\n        そこで、労働基準法の中に\n        <span>始業および終業時刻を労働者の決定に委ねる</span>\n        フレックスタイム制が設けられました。\n        <br />\n        <br />\n        今回は、フレックスタイム制にフォーカスをあて、解説してまいります。\n      </p>\n      <img src=\"/images/column/details/c0018.jpg\" alt=\"キンクラコラム画像18\" />\n      <h1>フレックスタイム制とは</h1>\n      <p>\n        一定期間の総労働時間を定めておき、労働者がその範囲内で始業および終業時刻を選択できる制度です。労働契約の中で賃金と並び重要な条件である労働時間に一定の裁量が認められることから職業生活と家庭生活の調和を図ることに主眼を置いています。よくある誤りで、「始業または終業」を労働者の決定に委ねるとする定めは、フレックスタイム制の要件を満たしていません。必ず両方の時刻を労働者の決定に委ねる必要があります。\n        <br />\n        <br />\n        使用者側としては、多くの人手が必要とされる時間帯にフレックスタイム制を導入することで人手不足に陥るのではないかとの懸念事項も予想されます。それについては「コアタイム」といい、労働者が必ず働かなければならない時間帯を定めておくことで、懸念事項は可能な限り払拭できると考えます。また、フレックスタイム制は深夜の割増賃金の規制から脱却しているわけではありませんので、注意が必要です。よって、「フレキシブルタイム」といい、労働者が選択可能な時間帯を設けておくことで、深夜に状態的に働くという選択肢を除外することができます。尚、コアタイム、フレキシブルタイムを設けるか否かは任意です。\n        <br />\n        <br />\n        尚、派遣労働者に対してフレックスタイム制を採用する場合は派遣元が、就業規則への明記、労使協定の締結、労働者派遣契約での定めを行う必要があります。\n      </p>\n      <Introduction003 />\n      <h1>フレックスタイムの使用者側のメリット</h1>\n      <p>\n        フレックスタイム制は2019年4月1日に改正され、旧来1か月が上限であったものの\n        <span>上限が3か月に改正</span>\n        されました。まずは1か月フレックスタイム制のメリットから確認しましょう。\n        <br />\n        <br />\n        1か月フレックスタイム制は、\n        <span>\n          フレックスタイム制導入に際して所轄労働基準監督署への届出が不要（1か月超の場合は届出が必要）\n        </span>\n        です。そして、1か月間（以下、清算期間）における法定労働時間の総枠を超えた時間が時間外労働とされます（通常の固定労働時間制の場合は1日および1週間で法定労働時間を超えた部分が時間外労働とされる）。\n        <br />\n        <br />\n        清算期間を4週間で設定する場合は（法定労働時間が40時間の場合）、160.0時間。30日（例えば4月）で設定する場合、171.4時間。31日で設定する場合（例えば5月）では177.1時間が総枠となります。この時間を超えた場合に割増賃金が発生するという理解です。\n        <br />\n        <br />\n        1か月超のフレックスタイム制の場合は\n        <span>精算期間における法定労働時間の総枠を超えないこと</span>\n        が1つ目の要件です。1か月超の清算期間は61日（例えば4月と5月）の場合、348.5時間。91日（4月～6月）520.0時間となります。詳細は下表をご覧ください。\n        <br />\n        <br />\n        そして、1か月超のフレックスタイム制の2つ目の要件として各期間を平均して1週間あたりの労働時間が50時間を超えないこと※が必要です。\n        <br />\n        <br />\n        ※清算期間を1週間ごとに区分した各期間における週平均50時間の枠の計算式\n        <br />\n        50時間×清算期間を1か月ごとに区分した各期間の歴日数÷7\n        <br />\n        詳細は下表をご覧ください。\n      </p>\n      <h3>清算期間における法定労働時間の総枠</h3>\n      <img src=\"/images/column/details/c0018_g01.jpg\" alt=\"キンクラコラム\" />\n      <p>\n        改正後の大きなメリットとして（別途添付図）3か月のフレックスタイム制とした場合に改正前は1か月目に法定労働時間を超えた場合に、割増賃金を支払う必要がありました。改正後は例えば3か月目に法定労働時間よりも短い時間での労働時間であった場合、欠勤にもならず、かつ、割増賃金の支払い義務がなくなるということです。\n      </p>\n      <h1>フレックスタイム制と有給休暇の関係</h1>\n      <p>\n        フレックスタイム制を採用している労働者が有給休暇を取得した場合、有給休暇と賃金の関係は標準となる1日の労働時間を労働したものとして取り扱われます。\n      </p>\n      <h1 className=\"read\">最後に</h1>\n      <p>\n        フレックスタイム制は企業にとっても労働者にとっても幅広く選択が可能となりました。注意点は\n        <span>\n          1か月超を採用する場合、届け出義務や労働時間の管理が煩雑となる\n        </span>\n        点が挙げられます。労働時間管理を手作業行うとなると膨大な時間を要することからアウトソーシングや専門家の意見を参考にしながら進めていくことで思わぬ形での法違反の回避と、適正かつ有効的な制度の活用ができると考えます。\n      </p>\n    </section>\n  </Wrapper>\n)\n\nexport default ColumnDetailInner0018\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnBtnCard from '../atoms/columnBtnCard'\nimport ColumnH1 from '../atoms/columnH1'\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 ColumnRelationCards0018 = () => {\n  const routeParam = useRouteParam('/column/details/C0019/')\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"関連コラム\" />\n      <section>\n        <ColumnBtnCard\n          href={routeParam}\n          imgId=\"c0019.jpg\"\n          label=\"自由度の高い新しい働き方「スーパーフレックス制度」とは？\"\n          date=\"2022.04.15\"\n        />\n      </section>\n    </Wrapper>\n  )\n}\n\nexport default ColumnRelationCards0018\n","import { graphql } from 'gatsby'\nimport React from 'react'\nimport ColumnBackAndForth from '../../../components/atoms/columnBackAndForth'\nimport SEO from '../../../components/atoms/seo'\nimport { ITopicPath } from '../../../components/atoms/topicPath'\nimport ColumnAuthor001 from '../../../components/molecules/columnAuthor001'\nimport ColumnDetailInner0018 from '../../../components/molecules/columnDetailInner0018'\nimport ColumnRelationCards0018 from '../../../components/molecules/columnRelationCards0018'\nimport UsefulFunctionLayout006 from '../../../components/molecules/usefulFunctionLayout006'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0018 = () => {\n  const paths: ITopicPath[] = [\n    { title: 'キンクラコラムTOP', link: useRouteParam('/column') },\n    { title: 'コラム記事一覧', link: useRouteParam('/column/list') },\n    {\n      title: 'フレックスタイム制とは？活用方法と留意点を解説！',\n    },\n  ]\n\n  return (\n    <ColumnLayout paths={paths}>\n      <SEO\n        title=\"フレックスタイム制はどんな制度？導入のメリットとポイント\"\n        description=\"フレックスタイム制は一定期間の総労働時間を定め、労働者がその範囲内で始業および終業時刻を選択できる制度です。企業や労働者にとって、幅広い働き方の一つです。\"\n        ogUrl=\"https://kintaicloud.jp/column/details/C0018/\"\n        ogType=\"article\"\n        ogTitle=\"フレックスタイム制はどんな制度？導入のメリットとポイント\"\n        ogDescription=\"フレックスタイム制は一定期間の総労働時間を定め、労働者がその範囲内で始業および終業時刻を選択できる制度です。企業や労働者にとって、幅広い働き方の一つです。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n        ogImage=\"https://www.kintaicloud.jp/images/column/details/c0018.jpg\"\n      />\n      <ColumnDetailsBody>\n        {/** 記事本体 */}\n        <ColumnDetailInner0018 />\n        {/** オーサ情報 */}\n        <ColumnAuthor001 />\n        {/** お役立ち機能 */}\n        <UsefulFunctionLayout006 />\n        {/** 前後記事への遷移 */}\n        <ColumnBackAndForth />\n        {/** 関連記事 */}\n        <ColumnRelationCards0018 />\n      </ColumnDetailsBody>\n    </ColumnLayout>\n  )\n}\n\nexport default C0018\n\nexport const pageQuery = graphql`\n  query C0018 {\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","useRouteParam","target","rel","Introduction003","routeParam","paths","title","link","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage"],"sourceRoot":""}