{"version":3,"sources":["webpack:///./src/pages/works/dx-humanIntroduce.jsx","webpack:///./src/images/gatsby-image/v2-work-page/fluid-images.js","webpack:///./src/constants-v2/page-contents/work-info.js","webpack:///./src/components/work-v2/index.jsx","webpack:///./src/images/gatsby-image/work-detail-page/fluid-images.js"],"names":["contentFontH","h1","font","line","h2","h3","h4","Root","styled","div","BodyWrapper","CaptionRightAlign","Link","TopAttention","colorPaletteV2","blue","WorkContentWrapper","EyeCatchPic","Img","WorkTitle","WorkTags","WorkTagsItem","span","WorksOuter","WorkDescriptionWrapper","WorkParagraph","p","WorkBlockImagePC","WorkBlockImageSP","DxHumanIntroduce","pageTitle","className","to","pagesV2","works","path","fluid","WorkFluidImages","WorkDetailFluidImages","href","image","useStaticQuery","childImageSharp","workInfo","link","subtitle","title","description","text","buttonlabel","ListItemBox","ListItemBoxLink","ListItemBoxNoLink","ListItemBoxPic","props","addHover","ListItemTitle","ListItemDescription","ListItemText","CaptionLeftAlign","Title","TitleInner","WorksGridList","ButtonM","ButtonStr","Works","map","work","index","key","join"],"mappings":"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","file":"component---src-pages-works-dx-human-introduce-jsx-1bab3db6d0b92dce8e93.js","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport PageRoot from '../../components/common-components/templates/page-root-v2';\nimport Works from '../../components/work-v2/index';\nimport colorPaletteV2 from '../../styles/color-palette-v2';\nimport '../../styles/foundation-v2.css';\nimport WorkFluidImages from '../../images/gatsby-image/v2-work-page/fluid-images';\nimport WorkDetailFluidImages from '../../images/gatsby-image/work-detail-page/fluid-images';\nimport pagesV2 from '../../constants-v2/pages-v2';\nimport SEOHeaderV2 from '../../components/common-components/templates/page-root-v2/seo-v2';\n\nconst wpContentSideMarginSp = 2.4;\n\nconst captionWidthPc = '608rem';\nconst captionWidthSp = `calc(100% - ${wpContentSideMarginSp * 2}rem)`;\n\nconst contentFontH = {\n  sp: {\n    h1: {\n      font: '24rem',\n      line: '36rem',\n    },\n    h2: {\n      font: '24rem',\n      line: '36rem',\n    },\n    h3: {\n      font: '21rem',\n      line: '31.5rem',\n    },\n    h4: {\n      font: '17rem',\n      line: '27rem',\n    },\n  },\n  pc: {\n    h1: {\n      font: '24rem',\n      line: '34.75rem',\n    },\n    h2: {\n      font: '24rem',\n      line: '34.75rem',\n    },\n    h3: {\n      font: '18rem',\n      line: '24.06rem',\n    },\n    h4: {\n      font: '16rem',\n      line: '23.17rem',\n    },\n  },\n};\n\nconst Root = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 60vh;\n`;\n\nconst BodyWrapper = styled.div`\n  z-index: 1;\n  margin-bottom: 160px;\n  @media (max-width: 1023px) {\n    width: 100%;\n    margin-bottom: 100px;\n  }\n`;\n\nconst CaptionRightAlign = styled(Link)`\n  display: flex;\n  align-items: center;\n  width: 110rem;\n  margin: 0 0 24rem auto;\n  @media (max-width: 1023px) {\n    margin-bottom: 18rem;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 24rem;\n  }\n`;\n\nconst TopAttention = styled.h2`\n  font-weight: 400;\n  color: ${colorPaletteV2.blue};\n  @media (max-width: 1023px) {\n    font-size: 16rem;\n    line-height: 16rem;\n  }\n  @media (min-width: 1024px) {\n    font-size: 16rem;\n    line-height: 16rem;\n    margin-left: 4rem;\n  }\n`;\n\nconst WorkContentWrapper = styled.div`\n  @media (min-width: 1024px) {\n    width: ${captionWidthPc};\n  }\n`;\n\nconst EyeCatchPic = styled(Img)`\n  border: 0;\n  background-size: cover;\n  @media (max-width: 1023px) {\n    width: ${captionWidthSp};\n    height: 320rem;\n    margin: 0 auto 24px;\n  }\n  @media (min-width: 1024px) {\n    width: ${captionWidthPc};\n    height: 420px;\n    margin-bottom: 28rem;\n  }\n  @media (max-width: 640px) {\n    height: 210rem;\n  }\n`;\n\nconst WorkTitle = styled.h1`\n  font-size: 24rem;\n  line-height: 34.75rem;\n  font-weight: 700;\n  @media (max-width: 1023px) {\n    margin-bottom: 12rem;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 14rem;\n  }\n`;\n\nconst WorkTags = styled.div`\n  @media (max-width: 1023px) {\n    display: block;\n    line-height: 28.8rem;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 40px;\n    margin-bottom: 40rem;\n  }\n`;\n\nconst WorkTagsItem = styled.span`\n  font-size: 16rem;\n  color: ${colorPaletteV2.blue};\n  display: inline;\n  margin-right: 5rem;\n  cursor: pointer;\n  white-space: nowrap;\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\nconst WorksOuter = styled.div`\n  margin-bottom: 100px;\n`;\n\nconst WorkDescriptionWrapper = styled.div`\n  font-size: 16px;\n  font-size: 16rem;\n  line-height: 28.8px;\n  line-height: 28.8rem;\n\n  & h2 {\n    padding: 2rem 8rem;\n    border-left: solid 6px ${colorPaletteV2.blue};\n    margin-top: 20px;\n    margin-top: 20rem;\n    margin-bottom: 20px;\n    margin-bottom: 20rem;\n\n    @media (max-width: 1023px) {\n      font-size: ${contentFontH.sp.h2.font};\n      line-height: ${contentFontH.sp.h2.line};\n    }\n    @media (min-width: 1024px) {\n      font-size: ${contentFontH.pc.h2.font};\n      line-height: ${contentFontH.pc.h2.line};\n    }\n  }\n  & a {\n    color: ${colorPaletteV2.blue};\n    &:link,\n    &:visited,\n    &:hover {\n      color: ${colorPaletteV2.blue};\n    }\n  }\n`;\n\nconst WorkParagraph = styled.p`\n  font-size: 16px;\n  font-size: 16rem;\n  line-height: 28.8px;\n  line-height: 28.8rem;\n  font-weight: 400;\n  display: inline-block;\n  margin-bottom: 24px;\n`;\n\nconst WorkBlockImagePC = styled(Img)`\n  @media (min-width: 1024px) {\n    width: 100%;\n    height: auto;\n    margin: 0 auto 20px;\n  }\n  @media (max-width: 1023px) {\n    display: none;\n  }\n  //TO DO:2021/03/30:公開後タブレット用画像用意する？\n`;\n\nconst WorkBlockImageSP = styled(Img)`\n  @media (min-width: 1024px) {\n    display: none;\n  }\n  @media (max-width: 1023px) {\n    width: 100%;\n    height: auto;\n    margin: 0 auto 20px;\n  }\n  //TO DO:2021/03/30:公開後タブレット用画像用意する？\n`;\n\nconst DxHumanIntroduce = () => {\n  return (\n    <PageRoot>\n      <SEOHeaderV2 pageTitle=\"実績紹介｜人材を弊社でお預かりしてDX技術者（エンジニア）として育成！\" />\n      <Root className=\"wrapper-v2\">\n        <BodyWrapper>\n          <CaptionRightAlign to={pagesV2.works.path}>\n            <TopAttention>実績紹介一覧</TopAttention>\n          </CaptionRightAlign>\n          <WorkContentWrapper>\n            <EyeCatchPic fluid={WorkFluidImages('dxHumanIntroduce')} />\n            <WorkTitle>\n              人材を弊社でお預かりして DX技術者（エンジニア）として育成！\n            </WorkTitle>\n            <WorkTags>\n              <WorkTagsItem>#IT人材育成</WorkTagsItem>\n              <WorkTagsItem>#内製化</WorkTagsItem>\n            </WorkTags>\n            <WorkDescriptionWrapper>\n              <h2>プロジェクトの背景</h2>\n              {/* 20210329 TO DO:「同社」の表現考えてもらう */}\n              <WorkParagraph>\n                &emsp;小型から大型のものまで発電所や化学プラント向けの超高圧バルブを製造する岡野バルブ製造株式会社様は、次の収益の柱となる事業の種をいくつか蒔いていましたが、思ったスピードで事が運ばないという課題感を抱えていました。\n                <br />\n                その原因の一つがITエンジニアの不在で、これまでは弊社のような外部の企業に委託して開発を進めてきましたが、スピード感を持って事業開発を推進するには、開発を内製化する必要があると同社経営層は考えていました。\n                <br />\n                そこで、次世代バルブメンテナンス事業の開発でパートナーシップを組んでいた弊社に人材開発も任せていただくことになりました。\n              </WorkParagraph>\n              <WorkBlockImagePC\n                fluid={WorkDetailFluidImages('dxHumanIntroduceDescktop01')}\n              />\n              <WorkBlockImageSP\n                fluid={WorkDetailFluidImages('dxHumanIntroduceMobile01')}\n              />\n\n              <h2>取り組み内容</h2>\n              <WorkParagraph>\n                &emsp;将来は50人規模のIT技術者チームを組成するという目標の下、まずは同社内で2名社員の方を選出してもらい、弊社にて1年間OJTでIT教育を受けてもらいました。\n                <br />\n                2名中、1名は中堅社員で50人を束ねるチームリーダー候補として、もう１名は新卒１年目でチームの主要メンバー候補として、毎日肩を並べて弊社社員と共同開発をしながら技術の基礎からみっちり学んでもらいました。\n                <br />\n                ORCLというバルブ診断装置との連携も可能にし、同装置で取得したバルブの診断結果をアプリケーションにアップロードすることで、バルブのリアルな「健康状態」をクラウド上で一元管理することが可能になりました。\n                <br />\n              </WorkParagraph>\n              <WorkParagraph>\n                Amazon&nbsp;Web&nbsp;Servicesのようなクラウド環境や、Ruby&nbsp;on&nbsp;Railsを使い実際のシステムを開発し実践的な知識と技術を習得すると同時に、技術プレゼンテーションや技術ドキュメント作成等のビジネススキルも磨いてもらいました。{' '}\n                <br />\n                1年の育成期間が終わる頃には、新機能の開発から問題を特定してデバッグする作業まで、基礎的な事が1人で完結できるようになりました。\n              </WorkParagraph>\n              <WorkParagraph>\n                DX技術者育成プログラムの詳細はこちらです。事業変革の実現に課題を感じている方はぜひご覧ください。\n                <a href=\"https://www.regnio.co.jp/dx-hr-development/\">\n                  https://www.regnio.co.jp/dx-hr-development\n                </a>\n              </WorkParagraph>\n            </WorkDescriptionWrapper>\n          </WorkContentWrapper>\n        </BodyWrapper>\n        <WorksOuter>\n          <Works />\n        </WorksOuter>\n      </Root>\n    </PageRoot>\n  );\n};\nexport default DxHumanIntroduce;\n","import { useStaticQuery, graphql } from 'gatsby';\n\nconst WorkFluidImages = image => {\n  const data = useStaticQuery(graphql`\n    query {\n      workproductevelopment: file(\n        relativePath: { eq: \"v2-work/productevelopment@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      productionManagement: file(\n        relativePath: { eq: \"v2-work/productionManagement@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      valveMaintenanceSystem: file(\n        relativePath: { eq: \"v2-work/valveMaintenanceSystem@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      dxsolution: file(relativePath: { eq: \"v2-work/dxsolution@2x.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      dxHumanIntroduce: file(\n        relativePath: { eq: \"v2-work/dxHumanIntroduce@2x.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 448, maxHeight: 310) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `);\n\n  return data[image].childImageSharp.fluid;\n};\n\nexport default WorkFluidImages;\n","const workInfo = [\n  {\n    image: 'workproductevelopment',\n    link: 'work-product-development',\n    subtitle: null,\n    title: [\n      '鋼板の生産ラインを自動化！',\n      '熟練の匠にしかできない神技。',\n      '自動制御システムで現場の負担を軽減',\n    ],\n    description: [\n      '重厚長大な産業の現場で活躍する',\n      '匠の「熟練の技」をデータ化し、AIモデルを生成。',\n    ],\n    text:\n      '安全性の向上や、後継者不足の解消、現場の方々の負担の軽減に繋がるようなプロダクトを、パートナーと共に作っています。',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'productionManagement',\n    link: 'production-management-system',\n    subtitle: null,\n    title: [\n      '需要予測から生産計画を立案！',\n      '資材発注と生産実績計上も自動で行い、',\n      '生産工程を丸ごと効率化。',\n    ],\n    description: ['老舗豆腐メーカーの', '生産工程をDXするシステムを開発中'],\n    text:\n      '安全性の向上や、後継者不足の解消、現場の方々の負担の軽減に繋がるようなプロダクトを、パートナーと共に作っています。',\n    buttonlabel: 'Comming Soon...',\n  },\n  {\n    image: 'valveMaintenanceSystem',\n    link: 'valve-maintenance-system',\n    subtitle: null,\n    title: ['ハードとソフトが融合！', '超高圧バルブメンテナンスシステム'],\n    description: [\n      '超高圧バルブの診断装置とWebシステムが融合。',\n      '次世代メンテナンスシステムを継続開発中！',\n    ],\n    text:\n      '発電所などで使用する超高圧バルブを製造する老舗企業様とのプロジェクト。（システム開発＆人材育成）',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'dxHumanIntroduce',\n    link: 'dx-humanIntroduce',\n    subtitle: null,\n    title: ['人材を弊社でお預かりして', 'DX技術者（エンジニア）として育成！'],\n    description: [\n      '老舗企業様から人材をお預かりし、人材育成中。',\n      '次世代メンテナンスシステムを継続開発中！',\n    ],\n    text:\n      'システム開発を通して、広範なIT技術や、新しいワークスタイルを身に付けて、社内に持ち帰っていただきます。',\n    buttonlabel: '詳しく見る',\n  },\n  {\n    image: 'dxsolution',\n    link: 'dx-solution',\n    subtitle: 'Online Merges With Offline',\n    title: ['OMO実現を見据えて', '顧客との接点を生むシステム開発'],\n    description: [\n      '老舗の釣り具販売企業様の、',\n      'WEBシステム＆SNSモバイルアプリの開発',\n    ],\n    text:\n      'ファンコミュニティの形成を通じた、企業ブランドと顧客接点の変革のためのシステムを制作しました。',\n    buttonlabel: '詳しく見る',\n  },\n];\n\nexport default workInfo;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport WorkFluidImages from '../../images/gatsby-image/v2-work-page/fluid-images';\nimport workInfo from '../../constants-v2/page-contents/work-info';\nimport '../../styles/foundation-v2.css';\nimport colorPaletteV2 from '../../styles/color-palette-v2';\n\nconst Root = styled.div``;\n\nconst ListItemBox = styled.div`\n  width: 100%;\n`;\nconst ListItemBoxLink = styled(Link)`\n  cursor: pointer;\n`;\n\nconst ListItemBoxNoLink = styled.div``;\n\nconst ListItemBoxPic = styled(Img)`\n  background: no-repeat center;\n  border: 0;\n  background-size: cover;\n  &:hover {\n    opacity: ${props => (props.addHover ? '0.7' : 'none')};\n  }\n  transition: 0.4s all;\n  @media (max-width: 1023px) {\n    width: 100%;\n    height: 237px;\n    height: 237px;\n  }\n\n  @media (min-width: 1024px) {\n    width: 100%;\n    height: 343px;\n    height: 343px;\n  }\n`;\n\nconst ListItemTitle = styled.p`\n  display: inline-block;\n  white-space: pre-wrap;\n  margin-top: 18px;\n  margin-top: 18px;\n  font-weight: 600;\n  @media (max-width: 1023px) {\n    font-size: 19px;\n    font-size: 19px;\n    line-height: 1.5;\n  }\n  @media (min-width: 1024px) {\n    font-size: 24px;\n    font-size: 24px;\n    line-height: 1.5;\n  }\n  @media (max-width: 742px) {\n    font-size: 18px;\n    font-size: 18px;\n    line-height: 1.5;\n  }\n  @media (max-width: 632px) {\n    font-size: 15px;\n    font-size: 15px;\n    line-height: 1.5;\n  }\n\n  @media (max-width: 591px) {\n    font-size: 17px;\n    font-size: 17px;\n    line-height: 1.5;\n  }\n`;\n\nconst ListItemDescription = styled.p`\n  display: inline-block;\n  white-space: pre-wrap;\n  padding: 0px 8px;\n  margin-top: 18px;\n  border-left: solid 6px ${colorPaletteV2.blue};\n  color: ${colorPaletteV2.blue};\n  font-weight: 400;\n\n  @media (max-width: 1023px) {\n    font-size: 15px;\n    font-size: 15px;\n    line-height: 22.5px;\n    line-height: 22.5px;\n  }\n  @media (min-width: 1024px) {\n    font-size: 16px;\n    font-size: 16px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n  @media (max-width: 742px) {\n    font-size: 13px;\n    font-size: 13px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n  @media (max-width: 591px) {\n    font-size: 16px;\n    font-size: 16px;\n    line-height: 1.5;\n    line-height: 1.5;\n  }\n`;\n\nconst ListItemText = styled.p`\n  font-size: 16px;\n  font-size: 16px;\n  line-height: 28.8px;\n  line-height: 28.8px;\n  margin-top: 22px;\n  font-weight: 400;\n`;\n\nconst CaptionLeftAlign = styled.div`\n  display: flex;\n  align-items: baseline;\n  @media (max-width: 1023px) {\n    margin-bottom: 32px;\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 56px;\n  }\n`;\n\nconst Title = styled.h2`\n  margin-left: 20px;\n  margin-left: 20px;\n  display: inline-block;\n  text-transform: uppercase;\n  @media (max-width: 1023px) {\n    font-size: 20px;\n    font-size: 20px;\n  }\n  @media (min-width: 1024px) {\n    font-size: 24px;\n    font-size: 24px;\n  }\n`;\n\nconst TitleInner = styled.div`\n  display: flex;\n`;\n\nconst WorksGridList = styled.div`\n  display: grid;\n  gap: 2vw;\n  @media (max-width: 1023px) {\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    column-gap: 2vw;\n    row-gap: 42px;\n    row-gap: 42px;\n  }\n  @media (min-width: 1024px) {\n    grid-template-columns: repeat(2, minmax(288px, 1fr));\n    column-gap: 3vw;\n    row-gap: 40px;\n    row-gap: 40px;\n  }\n`;\n\nconst ButtonM = styled(Link)`\n  margin-top: 16px;\n`;\nconst ButtonStr = styled.span`\n  line-height: 1;\n`;\n\nconst Works = () => {\n  return (\n    <Root>\n      <div>\n        <CaptionLeftAlign>\n          <h1 className=\"section_title_left\">実績紹介</h1>\n          <Title>\n            <TitleInner>\n              <p className=\"grad_txt section_title_right\">works</p>\n            </TitleInner>\n          </Title>\n        </CaptionLeftAlign>\n      </div>\n      <div>\n        <WorksGridList>\n          {workInfo.map((work, index) => {\n            return (\n              <ListItemBox key={index}>\n                {work.link === 'production-management-system' ? (\n                  <ListItemBoxNoLink>\n                    <ListItemBoxPic fluid={WorkFluidImages(work.image)} />\n                  </ListItemBoxNoLink>\n                ) : (\n                  <ListItemBoxLink to={`/works/${work.link}`}>\n                    <ListItemBoxPic\n                      fluid={WorkFluidImages(work.image)}\n                      addHover\n                    />\n                  </ListItemBoxLink>\n                )}\n                <ListItemTitle>{work.title.join('\\n')}</ListItemTitle>\n                <ListItemDescription>\n                  {work.description.join('\\n')}\n                </ListItemDescription>\n                <ListItemText>{work.text}</ListItemText>\n                {work.buttonlabel === 'Comming Soon...' ? (\n                  <ButtonM className=\"comming_soon_button sizeM\">\n                    <ButtonStr className=\"comming_soon_button_inside\">\n                      {work.buttonlabel}\n                    </ButtonStr>\n                  </ButtonM>\n                ) : (\n                  <ButtonM\n                    className=\"grad1_border_button sizeM\"\n                    to={`/works/${work.link}`}\n                  >\n                    <ButtonStr className=\"grad1_border_button_inside white\">\n                      {work.buttonlabel}\n                    </ButtonStr>\n                  </ButtonM>\n                )}\n              </ListItemBox>\n            );\n          })}\n        </WorksGridList>\n      </div>\n    </Root>\n  );\n};\nexport default Works;\n","import { useStaticQuery, graphql } from 'gatsby';\n\nconst WorkDetailFluidImages = image => {\n  const data = useStaticQuery(graphql`\n    query {\n      workproductDevelopmentDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentMobile01: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentDescktop02: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_02.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      workproductDevelopmentMobile02: file(\n        relativePath: { eq: \"v2-work-detail/productDevelopment_img_sp_02.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      valveMaintenanceSystemDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/valveMaintenanceSystem_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      valveMaintenanceSystemMobile01: file(\n        relativePath: {\n          eq: \"v2-work-detail/valveMaintenanceSystem_img_sp_01.png\"\n        }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      dxsolutionDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/dxsolution_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      dxsolutionMobile01: file(\n        relativePath: { eq: \"v2-work-detail/dxsolution_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n\n      dxHumanIntroduceDescktop01: file(\n        relativePath: { eq: \"v2-work-detail/dxHumanIntroduce_img_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 608, maxHeight: 320) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      dxHumanIntroduceMobile01: file(\n        relativePath: { eq: \"v2-work-detail/dxHumanIntroduce_img_sp_01.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 238) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return data[image].childImageSharp.fluid;\n};\n\nexport default WorkDetailFluidImages;\n"],"sourceRoot":""}