{"version":3,"file":"component---src-pages-help-movie-tsx-467152ca3725c637b8de.js","mappings":"yPAIMA,GAAE,8pBAqDJC,EAAAA,EAAAA,OArDI,4IAwGR,EAZoB,SAACC,GACjB,IAAOC,EAAuCD,EAAvCC,UAAWC,EAA4BF,EAA5BE,SAAlB,EAA8CF,EAAlBG,UAAAA,OAA5B,MAAwC,GAAxC,EAEA,OACI,QAACL,EAAD,CAAIG,UAAWA,IACX,iBAAID,EAAMI,OACTD,IAAa,gBAAMF,UAAU,iBAAiBD,EAAMK,cACpDH,IAAY,gBAAMD,UAAU,gBAAgBD,EAAMM,e,sBC1FzDC,GAAO,2VA+BTR,EAAAA,EAAAA,OA/BS,gBAkLb,EAxIkB,SAAC,GAA0B,IAAxBS,EAAuB,EAAvBA,SACbC,EAAsB,CAC1B,CAAEC,MAAO,MAAOC,MAAMC,EAAAA,EAAAA,GAAc,UACpC,CAAEF,MAAO,YAEX,OACE,QAAC,IAAD,CAAQF,SAAUA,EAAUC,MAAOA,EAAOI,aAAcC,EAAAA,EAAAA,QACtD,QAAC,IAAD,CAAKJ,MAAM,aACX,QAAC,IAAD,CAAUN,MAAM,aAChB,aAAGH,UAAU,4BAAb,sCAGA,QAACM,EAAD,CAASN,UAAU,SACjB,QAAC,EAAD,CACEG,MAAM,aACND,WAAS,EACTE,aAAa,qBAEf,eAAKJ,UAAU,SACb,kBACEc,MAAM,MACNC,OAAO,MACPC,IAAI,4CACJP,MAAM,uBACNQ,YAAY,IACZC,MAAM,sGACNC,iBAAe,KAEjB,eAAKnB,UAAU,gBACb,yCAEE,mBAFF,uCAOJ,QAAC,EAAD,CACEG,MAAM,mBACND,WAAS,EACTE,aAAa,iBAEf,eAAKJ,UAAU,SACb,kBACEc,MAAM,MACNC,OAAO,MACPC,IAAI,4CACJP,MAAM,uBACNQ,YAAY,IACZC,MAAM,sGACNC,iBAAe,KAEjB,eAAKnB,UAAU,gBACb,qCAEE,mBAFF,6DAOJ,QAAC,EAAD,CACEG,MAAM,gBACNF,UAAQ,EACRI,YAAY,aAEd,eAAKL,UAAU,SACb,kBACEc,MAAM,MACNC,OAAO,MACPC,IAAI,4CACJP,MAAM,uBACNQ,YAAY,IACZC,MAAM,sGACNC,iBAAe,KAEjB,eAAKnB,UAAU,gBACb,+CAEE,mBAFF,6CAOJ,QAAC,EAAD,CACEA,UAAU,OACVG,MAAM,gBACNF,UAAQ,EACRI,YAAY,cAEd,eAAKL,UAAU,SACb,kBACEc,MAAM,MACNC,OAAO,MACPC,IAAI,4CACJP,MAAM,uBACNQ,YAAY,IACZC,MAAM,sGACNC,iBAAe,KAEjB,eAAKnB,UAAU,gBACb,iDAEE,mBAFF,yCAOJ,QAAC,EAAD,CACEA,UAAU,QACVG,MAAM,gBACNF,UAAQ,EACRI,YAAY,aAEd,eAAKL,UAAU,SACb,kBACEc,MAAM,MACNC,OAAO,MACPC,IAAI,4CACJP,MAAM,uBACNQ,YAAY,IACZC,MAAM,sGACNC,iBAAe,KAEjB,eAAKnB,UAAU,gBACb,+CAEE,mBAFF,gDAQN,QAAC,IAAD","sources":["webpack://beaver-help/./src/components/atoms/helpMovieH2.tsx","webpack://beaver-help/./src/pages/help/movie.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints';\n\nconst H2 = styled.h2`\n  color: #414141;\n  font-size: 20px;\n  border: none;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  position: relative;\n  width: fit-content;\n\n  p {\n    margin: 0 0 3px;\n    padding: 0 0 15px;\n    display: inline-block;\n    position: relative;\n  }\n\n  :before {\n    position: absolute;\n    content: '';\n    height: 2px;\n    width: 100%;\n    background-color: #e5e5e5;\n    bottom: 10px;\n  }\n\n  :after {\n    position: absolute;\n    content: '';\n    height: 2px;\n    width: 40px;\n    background-color: #77d7c9;\n    bottom: 10px;\n  }\n\n  .manager-label {\n    color: #808080;\n    font-weight: normal;\n  }\n\n  .worker-label {\n    font-size: 18px;\n    color: #ffffff;\n    width: 160px;\n    height: 25px;\n    padding: 3px 0 25px;\n    margin-top: -4px;\n    margin-left: 15px;\n    text-align: center;\n    border-radius: 2px;\n    background-color: #e2a679;\n  }\n\n  ${BreakPoints.medium} {\n    flex-direction: column;\n\n    p {\n      display: block;\n      margin: 0;\n    }\n\n    .manager-label {\n      margin: -10px 0 20px;\n      font-size: 14px;\n    }\n\n    .worker-label {\n      margin: -10px 0 20px;\n    }\n  }\n`\n\ntype Props = {\n    /** クラス名 */\n    className?: string\n    /** タイトル */\n    label: string\n    /** 「○○向け機能説明」 */\n    isManager?: boolean\n    /** 「○○向け機能説明」内文言 */\n    managerLabel?: string\n    /** 従業員用ラベル */\n    isWorker?: boolean\n    /** 従業員用ラベル文言 */\n    workerLabel?: string\n}\n\n/**\n * コラム用共通H2コンポーネント\n * @param props\n * @constructor\n */\nconst helpMovieH2 = (props: Props): JSX.Element => {\n    const {className, isWorker, isManager = ''} = props\n\n    return (\n        <H2 className={className}>\n            <p>{props.label}</p>\n            {isManager && <span className=\"manager-label\">{props.managerLabel}</span>}\n            {isWorker && <span className=\"worker-label\">{props.workerLabel}</span>}\n        </H2>\n    )\n}\n\nexport default helpMovieH2\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport CommonH2 from '../../components/atoms/commonH2'\nimport SEO from '../../components/atoms/seo'\nimport { ITopicPath } from '../../components/atoms/topicPath'\nimport Layout from '../../components/organisms/layout'\nimport BreakPoints from '../../styles/breakPoints'\nimport { CategoryKind } from '../../types/CategoryKind'\nimport HelpMovieH2 from '../../components/atoms/helpMovieH2'\nimport ManualBtn from '../../components/molecules/manualBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  max-width: 800px;\n  margin: 40px auto 0 auto;\n\n  .card {\n    width: 100%;\n    background-color: #ffffff;\n    border-radius: 8px;\n    padding: 25px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin-bottom: 30px;\n  }\n\n  .flex {\n    .worker-label {\n      background-color: #dd9593;\n    }\n  }\n\n  .fixed {\n    .worker-label {\n      background-color: #166fc7;\n    }\n  }\n\n  .detail-wrap {\n    margin-left: 25px;\n  }\n\n  ${BreakPoints.medium} {\n    width: 90%;\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.ManagePageQuery>\n\n/**\n * 動画マニュアルページ\n * @constructor\n */\nconst MoviePage = ({ location }: IProps) => {\n  const paths: ITopicPath[] = [\n    { title: 'TOP', link: useRouteParam('/help') },\n    { title: '動画マニュアル' },\n  ]\n  return (\n    <Layout location={location} paths={paths} categoryKind={CategoryKind.MOVIE}>\n      <SEO title=\"動画マニュアル\" />\n      <CommonH2 label=\"動画マニュアル\" />\n      <p className=\"txt-center mt-020 mb-020\">\n        キンクラの操作方法や利用手順を動画で分かりやすくご案内しています。\n      </p>\n      <Wrapper className=\"wrap\">\n        <HelpMovieH2\n          label=\"初期セットアップ手順\"\n          isManager\n          managerLabel=\"（システム管理者向け機能説明）\"\n        />\n        <div className=\"card\">\n          <iframe\n            width=\"200\"\n            height=\"115\"\n            src=\"https://www.youtube.com/embed/7nnKf-Ka1sc\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowFullScreen\n          />\n          <div className=\"detail-wrap\">\n            <p>\n              システム管理者向けの動画マニュアルです。\n              <br />\n              「社員情報」の登録や編集、確認手順、権限について解説しています。\n            </p>\n          </div>\n        </div>\n        <HelpMovieH2\n          label=\"申請の承認と残業/有休の管理方法\"\n          isManager\n          managerLabel=\"（管理職向け機能説明）\"\n        />\n        <div className=\"card\">\n          <iframe\n            width=\"200\"\n            height=\"115\"\n            src=\"https://www.youtube.com/embed/_IUqPn08f7M\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowFullScreen\n          />\n          <div className=\"detail-wrap\">\n            <p>\n              管理職向けの動画マニュアルです。\n              <br />\n              申請内容の確認や承認方法、残業・有休の管理方法など、管理職者がキンクラ上でできることについて解説しています。\n            </p>\n          </div>\n        </div>\n        <HelpMovieH2\n          label=\"キンクラの基本的な利用方法\"\n          isWorker\n          workerLabel=\"変形労働時間制\"\n        />\n        <div className=\"card\">\n          <iframe\n            width=\"200\"\n            height=\"115\"\n            src=\"https://www.youtube.com/embed/c2GWjxY18Kc\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowFullScreen\n          />\n          <div className=\"detail-wrap\">\n            <p>\n              「変形労働時間制」の従業員向けの動画マニュアルです。\n              <br />\n              シフト・打刻・勤務表提出など、勤怠に関わる基本的な操作方法を解説しています。\n            </p>\n          </div>\n        </div>\n        <HelpMovieH2\n          className=\"flex\"\n          label=\"キンクラの基本的な利用方法\"\n          isWorker\n          workerLabel=\"フレックス時間制\"\n        />\n        <div className=\"card\">\n          <iframe\n            width=\"200\"\n            height=\"115\"\n            src=\"https://www.youtube.com/embed/oaCV4pCT9qM\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowFullScreen\n          />\n          <div className=\"detail-wrap\">\n            <p>\n              「フレックスタイム制」の従業員向けの動画マニュアルです。\n              <br />\n              打刻・勤務表提出など、勤怠に関わる基本的な操作方法を解説しています。\n            </p>\n          </div>\n        </div>\n        <HelpMovieH2\n          className=\"fixed\"\n          label=\"キンクラの基本的な利用方法\"\n          isWorker\n          workerLabel=\"固定労働時間制\"\n        />\n        <div className=\"card\">\n          <iframe\n            width=\"200\"\n            height=\"115\"\n            src=\"https://www.youtube.com/embed/mJVVWigQSDY\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowFullScreen\n          />\n          <div className=\"detail-wrap\">\n            <p>\n              「固定労働時間制」の従業員向けの動画マニュアルです。\n              <br />\n              打刻・勤務表提出・シフト確認など、勤怠に関わる基本的な操作方法を解説しています。\n            </p>\n          </div>\n        </div>\n      </Wrapper>\n      <ManualBtn />\n    </Layout>\n  )\n}\n\nexport default MoviePage\n\nexport const pageQuery = graphql`\n  query MoviePage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["H2","BreakPoints","props","className","isWorker","isManager","label","managerLabel","workerLabel","Wrapper","location","paths","title","link","useRouteParam","categoryKind","CategoryKind","width","height","src","frameBorder","allow","allowFullScreen"],"sourceRoot":""}