{"version":3,"file":"component---src-pages-column-details-c-0019-tsx-c0ba16ef0f5d00105d0f.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/molecules/Introduction001.tsx","webpack://beaver-help/./src/components/molecules/columnAuthor001.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout013.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0019.tsx","webpack://beaver-help/./src/components/molecules/columnRelationCards0019.tsx","webpack://beaver-help/./src/pages/column/details/C0019.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 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 Introduction001 = () => {\n  const routeParam = useRouteParam('https://sign-up.kintaicloud.jp/sign-up')\n  return (\n    <Wrapper>\n      <p className=\"intro-txt\">勤怠管理でお困りのことはありませんか？</p>\n      <p className=\"detail-txt\">\n        「キンクラ」では、「自社」「常駐先」の両方の勤怠時間を\n        <br />\n        法律を守りながら管理できます。\n        <br />\n        アカウントを作成すれば、すぐにご利用いただけます。\n      </p>\n      <div className=\"btn-wrap\">\n        <a href={routeParam} target=\"_blank\" rel=\"noreferrer\">\n          アカウントを作成\n        </a>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default Introduction001\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 usefulFunctionLayout013 = () => (\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      <div className=\"p-screen-wrap\">\n        <img\n          src=\"/images/column/functions/f013.jpg\"\n          alt=\"キンクラのお知らせ管理\"\n        />\n      </div>\n    </section>\n  </Wrapper>\n)\n\nexport default usefulFunctionLayout013\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport Introduction001 from './Introduction001'\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    }\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`\n\n/**\n * コラム記事詳細：記事本体\n * @constructor\n */\nconst ColumnDetailInner0019 = () => (\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        <span>コアタイムがないフレックスタイム制度</span>があります。\n        <br />\n        今回はスーパーフレックスタイム制度について解説します。\n      </p>\n      <img src=\"/images/column/details/c0019.jpg\" alt=\"キンクラコラム画像19\" />\n      <h1>フレックスタイム制度とは</h1>\n      <p>\n        端的には労働者に<span>始業および終業の時刻の決定を委ねる</span>\n        ことです。フレックスタイム制度を導入することで、子育てや介護をしながら働く方にとっては時間の融通が利きやすくなり、やむを得ず退職するといった判断をせずに働き続けられるメリットがあります。注意点としては、フレックスタイム制度を導入したとしても深夜割増の適用はあることから、遅い時刻に出社し、\n        <span>深夜帯に働く場合には深夜割増賃金の支払いが義務</span>となります。\n      </p>\n      <h1>コアタイムとは</h1>\n      <p>\n        <span>労働者が働かなければならない時間</span>\n        のことです。例えば、11時から14時の間が顧客からの問い合わせが集中する会社の場合、その時間帯をコアタイムとして設定することで、休日や休暇の日を除き、必ず働かなければならない時間として定めることが可能です。\n      </p>\n      <h1>スーパーフレックスタイム制度とは</h1>\n      <p>\n        <span>コアタイムをなくしたフレックスタイム制度</span>\n        です。コアタイムがないということは、完全に労働者に働く時間を委ねることを意味し、労働者目線では、通常のフレックスタイム制度よりも更に時間の融通が利くというメリットがあります。\n        <br />\n        反対に会社目線では顧客からの問い合わせが集中する時間であっても必ず一定数以上の労働者が働いているという保証がないため、一定のリスクはあると言えます。\n      </p>\n      <h1>スーパーフレックスタイム制度のメリット</h1>\n      <p>\n        フレックスタイム制度と言っても長時間のコアタイムを設定してしまうと実質的に通常の固定労働時間制とほぼ変わらないというケースもあります。しかし、スーパーフレックスタイム制度の場合、そもそもコアタイムが存在しないことから、労働者目線では\n        <span>極めて働き方の自由度が高い</span>\n        状態となり、子供が保育園等に通園し始めた労働者や、要介護状態の家族と同居する労働者であれば、仕事を保育や介護と両立することが可能となります。\n        <br />\n        <br />\n        次に、通常の固定労働時間制の場合、終業時刻が定められていることから、仕事が早く終わってもその時間まで在社していなければ、仮に早めに退社する場合、時間単位の有給休暇を取得するような場合を除き、給与計算上は欠勤控除の対象となります。\n        <br />\n        しかし、スーパーフレックスタイム制度の場合、自身で仕事が早く終わり退社する日、早く退社した日の分を挽回する日を設定することが可能となり、\n        <span>生産的に働くことが可能</span>となります。\n        <br />\n        <br />\n        また、会社としても、終業時刻前に労働者が退社すること自体イレギュラーでなくなることから、いわゆるお付き合い残業が減り、\n        <span>長時間労働の防止</span>にも寄与します。\n      </p>\n      <Introduction001 />\n      <h1>スーパーフレックスタイム制度のデメリット</h1>\n      <p>\n        コアタイムがないため、<span>特定の時間帯に人手不足に陥るリスク</span>\n        があります。コアタイムがないということは、労働者には就労義務がないため、突発的に会議を開催しようにもメンバーが揃っていない可能性もあります。そこで、会議が開催できなかったとしても居合わせなかった労働者に懲戒処分を科すことはできません。\n        <br />\n        <br />\n        次に<span>コミュニケーション不足</span>\n        が挙げられます。これは、通常の固定労働時間制やコアタイムのあるフレックスタイム制度であれば、休日や休暇の日を除き、顔を合わせる機会は自然と多くなりますが、スーパーフレックスタイム制度の場合、余程の偶然が重ならない限り、顔を合わせる頻度が増えるということは想定できません。\n        <br />\n        そこで、コミュニケーション不足によるミスが起ることや、申し送り事項の共有がされておらず、インシデントの発生などが想定されます。\n        <br />\n        <br />\n        また、<span>有給休暇の取得率の減少</span>\n        が挙げられます。スーパーフレックスタイム制度の場合、通常のフレックスタイム制度よりも働き方の自由度が高く、あえて有給休暇を申請しなくても、出社時間の調整で用事を済ませることができます。\n        <br />\n        2019年4月1日より施行された年10日以上有給休暇が付与された労働者に対して、付与された日から1年間に5日の消化が義務付けられていますが、5日の消化が未達成となる可能性もあります。\n        <br />\n        尚、未達成の場合、1人に付き30万円以下の罰金が法律上規定されており、黙認できない状況となっています。\n      </p>\n      <h1 className=\"read\">最後に</h1>\n      <p>\n        フレックスタイム制度を採用せずにいきなりスーパーフレックスタイム制度を導入するとなると、会社目線では環境の変化が大きすぎて持続的な制度の運用が難しいとの声があります。\n        <br />\n        <br />\n        まずはフレックスタイム制度を導入し、そこで出た課題を解決し、タイミングを見てスーパーフレックスタイム制度を導入するという判断が一般的になりつつあります。\n      </p>\n    </section>\n  </Wrapper>\n)\n\nexport default ColumnDetailInner0019\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 ColumnRelationCards0019 = () => {\n  const routeParam = useRouteParam('/column/details/C0018/')\n  return (\n    <Wrapper>\n      <ColumnH1 label=\"関連コラム\" />\n      <section>\n        <ColumnBtnCard\n          href={routeParam}\n          imgId=\"c0018.jpg\"\n          label=\"フレックスタイム制はどんな制度？導入のメリットとポイント\"\n          date=\"2022.04.15\"\n        />\n      </section>\n    </Wrapper>\n  )\n}\n\nexport default ColumnRelationCards0019\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 ColumnDetailInner0019 from '../../../components/molecules/columnDetailInner0019'\nimport ColumnRelationCards0019 from '../../../components/molecules/columnRelationCards0019'\nimport UsefulFunctionLayout013 from '../../../components/molecules/usefulFunctionLayout013'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * コラム記事詳細画面\n * @constructor\n */\nconst C0019 = () => {\n  const paths: ITopicPath[] = [\n    { title: 'キンクラコラムTOP', link: useRouteParam('/column') },\n    { title: 'コラム記事一覧', link: useRouteParam('/column/list') },\n    {\n      title:\n        'スーパーフレックス制度とは？自由度の高い働き方、メリットデメリットを解説します。',\n    },\n  ]\n\n  return (\n    <ColumnLayout paths={paths}>\n      <SEO\n        title=\"自由度の高い新しい働き方「スーパーフレックス制度」とは？\"\n        description=\"スーパーフレックスタイム制度とは、コアタイムをなくしたフレックスタイム制度です。通常のフレックスタイム制度より時間の融通が利くメリットがあります。\"\n        ogUrl=\"https://kintaicloud.jp/column/details/C0019/\"\n        ogType=\"article\"\n        ogTitle=\"自由度の高い新しい働き方「スーパーフレックス制度」とは？\"\n        ogDescription=\"スーパーフレックスタイム制度とは、コアタイムをなくしたフレックスタイム制度です。通常のフレックスタイム制度より時間の融通が利くメリットがあります。\"\n        ogSiteName=\"キンクラ - 客先常駐特化型のクラウド勤怠管理システム\"\n        ogImage=\"https://www.kintaicloud.jp/images/column/details/c0019.jpg\"\n      />\n      <ColumnDetailsBody>\n        {/** 記事本体 */}\n        <ColumnDetailInner0019 />\n        {/** オーサ情報 */}\n        <ColumnAuthor001 />\n        {/** お役立ち機能 */}\n        <UsefulFunctionLayout013 />\n        {/** 前後記事への遷移 */}\n        <ColumnBackAndForth />\n        {/** 関連記事 */}\n        <ColumnRelationCards0019 />\n      </ColumnDetailsBody>\n    </ColumnLayout>\n  )\n}\n\nexport default C0019\n\nexport const pageQuery = graphql`\n  query C0019 {\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","routeParam","useRouteParam","target","rel","Introduction001","paths","title","link","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage"],"sourceRoot":""}