{"version":3,"sources":["components/pages/img/square_client_D_01.jpg","components/pages/img/about.jpg","components/pages/img/top_about.jpg","components/pages/img/top_works.jpg","components/pages/img/top_contact.jpg","components/pages/img/client_A_01.jpg","components/pages/img/client_A_02-1.jpg","components/pages/img/client_B_01.jpg","components/pages/img/client_B_02.jpg","components/pages/img/client_B_03.jpg","components/pages/img/client_C_01.jpg","components/pages/img/client_C_02.jpg","components/pages/img/client_C_03.jpg","components/pages/img/client_C_04.jpg","components/pages/img/original_A_01.jpg","components/pages/img/original_A_02.jpg","components/pages/img/original_A_03.jpg","components/pages/img/original_A_04.jpg","components/pages/img/original_B_01.jpg","components/pages/img/original_B_02.jpg","components/pages/img/original_C_01.jpg","components/pages/img/original_C_02.jpg","components/pages/img/original_C_03.jpg","components/pages/img/original_C_04.png","components/pages/img/original_C_05.png","components/pages/img/square_client_A_01.jpg","components/pages/img/square_client_B_01.jpg","components/pages/img/square_client_C_01.jpg","components/pages/img/square_original_A_01.jpg","components/pages/img/square_original_B_01.jpg","components/pages/img/square_original_C_02.jpg","components/atoms/layouts/Fotter.jsx","components/atoms/icon/IconCss.jsx","components/atoms/icon/IconHeader.jsx","components/atoms/layouts/Header.jsx","components/templates/DefaultLayout.jsx","components/router/ScrollTop.jsx","components/organisms/about/AboutCard.jsx","components/pages/About.jsx","components/organisms/home/HomeHeader.jsx","components/atoms/button/TopButton.jsx","components/organisms/home/HomeContents.jsx","components/pages/Home.jsx","components/atoms/button/WorksButton.jsx","components/organisms/works/ModalImg.jsx","components/organisms/works/OpenLink.jsx","components/pages/Works.jsx","components/pages/Contact.jsx","components/router/Router.jsx","App.js","reportWebVitals.js","index.js"],"names":["module","exports","__webpack_require__","p","Fotter","React","createElement","Fragment","SFotter","SLinks","SNav","SUl","SLink","to","style","color","SP","styled","footer","_templateObject","_taggedTemplateLiteral","div","_templateObject2","media","lessThan","_templateObject3","nav","_templateObject4","_templateObject5","ul","_templateObject6","Link","_templateObject7","_templateObject8","_templateObject9","SLi","a","li","IconHeader","SIcons","SIconLink","href","target","rel","className","Header","props","_useState","useState","_useState2","_slicedToArray","showMenu","setShowMenu","SHeader","SLogo","SLogoTitle","onClick","SHamburger","SLine1","SLine2","SLine3","header","h1","_templateObject10","SLines","span","_templateObject11","_templateObject12","_templateObject13","_templateObject14","DefaultLayout","children","ScrollTop","pathname","useLocation","useEffect","window","scrollTo","AboutCard","step","Children","toArray","map","e","SStartDate","startDate","SContainer","STitle","title","SStartDateInStep","SContent","content","greaterThan","h3","history","evaluation","About","STitleContainer","SImgContainer","SImg","src","AboutImage","alt","h2","img","HomeHeader","Stitle","LinkButton","url","HomeContents","menus","SContentsContainer","type","SContentTitle","SContentAbout","SContentRight","SContentContact","SContentWorks","SContentLeft","SContentContainer","bgAbout","bgWorks","bgContact","Home","SMainContainer","ModalImage","showImage","setShowImage","workType","workGenre","worksIndex","setWorksIndex","worksTemp","titlesTemp","captionsTemp","worksCA","ClientA01","ClientA02_1","worksCB","ClientB01","ClientB02","ClientB03","worksCC","ClientC01","ClientC02","ClientC03","ClientC04","worksOA","OriginalA01","OriginalA02","OriginalA03","OriginalA04","worksOB","OriginalB01","OriginalB02","worksOC","OriginalC01","OriginalC02","OriginalC03","OriginalC04","OriginalC05","works","titles","captions","SModalBackground","SModalContainer","Lightbox","mainSrc","concat","nextSrc","length","prevSrc","onCloseRequest","onMovePrevRequest","onMoveNextRequest","imageTitle","imageCaption","RedirectToNote","open","clientWorks","comment","background","thumnailClientA","thumnailClientB","thumnailClientC","thumnailClientD","originalWorks","thumnailOriginalA","thumnailOriginalB","thumnailOriginalC","Works","_useState3","_useState4","_useState5","_useState6","setWorkType","_useState7","_useState8","setWorkGenre","SWorks","f","i","SWork","SWorkTitleContainer","SWorkTitle","SCommentContainer","SComment","SMaskContainer","SMakingComment","SMaskingPDF","g","Contact","SCommentLeft","SInformationContainer","Router","BrowserRouter","Switch","Route","exact","path","App","reportWebVitals","onPerfEntry","Function","then","bind","_ref","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.364026e9.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/square_client_D_01.5e04b98a.jpg\";","module.exports = __webpack_public_path__ + \"static/media/about.1e664a7e.jpg\";","module.exports = __webpack_public_path__ + \"static/media/top_about.84e059e8.jpg\";","module.exports = __webpack_public_path__ + \"static/media/top_works.ca74b46a.jpg\";","module.exports = __webpack_public_path__ + \"static/media/top_contact.0b78e645.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_A_01.9d80cf83.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_A_02-1.9fb1f9d5.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_B_01.6a2f7cda.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_B_02.0aab61b4.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_B_03.a00b37a0.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_C_01.781fbd9e.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_C_02.04e02f61.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_C_03.8559730a.jpg\";","module.exports = __webpack_public_path__ + \"static/media/client_C_04.2f7bc5f1.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_A_01.9b0a9d3c.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_A_02.ea63cd30.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_A_03.0e5bc45d.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_A_04.dfa3046f.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_B_01.d2f0dd83.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_B_02.6cb87db8.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_C_01.06d63cfa.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_C_02.f96d7226.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_C_03.4450a6cd.jpg\";","module.exports = __webpack_public_path__ + \"static/media/original_C_04.ee7ba153.png\";","module.exports = __webpack_public_path__ + \"static/media/original_C_05.6ca6080e.png\";","module.exports = __webpack_public_path__ + \"static/media/square_client_A_01.6779ebab.jpg\";","module.exports = __webpack_public_path__ + \"static/media/square_client_B_01.135194d2.jpg\";","module.exports = __webpack_public_path__ + \"static/media/square_client_C_01.1be3968d.jpg\";","module.exports = __webpack_public_path__ + \"static/media/square_original_A_01.361b6b2a.jpg\";","module.exports = __webpack_public_path__ + \"static/media/square_original_B_01.f2d15886.jpg\";","module.exports = __webpack_public_path__ + \"static/media/square_original_C_02.a740996b.jpg\";","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport media from \"styled-media-query\";\n\n\nexport const Fotter = () => {\n  return (\n    <>\n      <SFotter>\n        <SLinks>\n          <SNav>\n            <SUl>\n              <SLink to=\"/\" style={{color: \"#00828C\"}}>Top</SLink>\n              <SLink to=\"/about\" style={{color: \"#00828C\"}}>About</SLink>\n              <SLink to=\"/works\" style={{color: \"#00828C\"}}>Works</SLink>\n              <SLink to=\"contact\" style={{color: \"#00828C\"}}>Contact</SLink>\n            </SUl>\n          </SNav>\n        </SLinks>\n        <SP>&copy; 2023 Nauti's Shippo ART　ノーチのしっぽ研究所ウェブサイト</SP>\n      </SFotter>\n    </>\n  );\n}\n\nconst SFotter = styled.footer`\n  height: 100px;\n  width: 100%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  position: relative;\n  z-index: 9999;\n`\nconst SLinks = styled.div`\n  color: #00828C;\n  margin: 36px 0 0 12px;\n  display: flex;\n  align-items: center;\n  ${media.lessThan(\"medium\")`\n    /* screen width is less than 768px (medium) */\n    display: block;\n  `}\n`\nconst SNav = styled.nav`\n  margin: 0 20px 0 0;\n  position:relative;\n  ::after {\n   content: \"\";\n   display: inline-block;\n   width: 1px;\n   height: 20px;\n   background: #fff;\n   position: absolute;\n   top: 0px;\n   right: -10px;\n  }\n\n  ${media.lessThan(\"medium\")`\n    /* screen width is less than 768px (medium) */\n    ::after {\n      content: none;\n    }\n  `}\n`\nconst SUl = styled.ul`\n`\nconst SLink = styled(Link)`\n  letter-spacing: .1em;\n  padding: 20px 25px;\n  text-decoration: none;\n  &:hover{\n    cursor: pointer;\n  }\n  ${media.lessThan(\"medium\")`\n    /* screen width is less than 768px (medium) */\n    padding: 20px 10px;\n  `}\n`\nconst SP = styled.p`\n  font-size: 6px;\n  letter-spacing: .1em;\n  margin: 10px 0 30px 0;\n  `","import styled from 'styled-components';\n\nexport const SUl = styled.ul`\n  display: flex;\n`\n\nexport const SA = styled.a`\n  width: 30px;\n  min-width: 30px;\n  height: 30px;\n  margin: 6px 0 0 15px;\n  position: relative;\n  mask: no-repeat center/70%;\n  -webkit-mask: no-repeat center/70%;\n  display: inline-block;\n`\n\nexport const SLi = styled.li`\n  list-style: none;\n  margin: 0 0 0 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`","import React from 'react';\nimport styled from 'styled-components';\nimport media from \"styled-media-query\";\nimport { SLi, SUl } from './IconCss';\n\nexport const IconHeader = () => {\n  return (\n    <>\n      <SIcons>\n      <SIconLink><a href='https://www.youtube.com/@nautisshippolab.3431'target='_blank' rel=\"noreferrer\"><i className=\"fa-brands fa-youtube\" style={{color: \"#00828C\",}}></i></a></SIconLink>\n      <SIconLink><a href='https://www.instagram.com/nautis_shippo/'target='_blank' rel=\"noreferrer\"><i className=\"fa-brands fa-instagram\" style={{color: \"#00828C\",}}></i></a></SIconLink>\n      <SIconLink><a href='https://twitter.com/nautis_shippo'target='_blank' rel=\"noreferrer\"><i className=\"fa-brands fa-x-twitter\" style={{color: \"#00828C\",}}></i></a></SIconLink>\n      </SIcons>\n    </>\n  );\n}\n\nconst SIcons = styled(SUl)`\n  position: absolute;\n  left: 0;\n  width: 17px;\n  height: 44px;\n  ${media.lessThan(\"small\")`\n    display: none;\n  `}\n`\nconst SIconLink = styled(SLi)`\n  ${media.lessThan(\"medium\")`\n    margin: 0 0 0 5px;\n  `}\n`","import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport media from \"styled-media-query\";\nimport { IconHeader } from '../icon/IconHeader';\n\nexport const Header = (props) => {\n  const [ showMenu, setShowMenu ] = useState(false);\n  const onClickHumburger = () => {\n    showMenu === true ? setShowMenu(false) : setShowMenu(true);\n  }\n  return (\n    <>\n      <SHeader>\n        <IconHeader></IconHeader>\n        <SLogo to=\"/\"><SLogoTitle>Nauti's Shippo ART</SLogoTitle></SLogo>\n        {showMenu ? (\n          <SNav>\n            <SUl>\n              <SLink to=\"/\" onClick={() => setShowMenu(false)}>Top</SLink>\n              <SLink to=\"/about\" onClick={() => setShowMenu(false)}>About</SLink>\n              <SLink to=\"/works\" onClick={() => setShowMenu(false)}>Works</SLink>\n              <SLink to=\"/contact\" onClick={() => setShowMenu(false)}>Contact</SLink>\n            </SUl>\n          </SNav>\n        ) : (\n        <></>\n        )}\n        <SHamburger onClick={onClickHumburger}>\n          <SLine1></SLine1>\n          <SLine2></SLine2>\n          <SLine3></SLine3>\n        </SHamburger>\n      </SHeader>\n    </>\n  );\n}\n\nconst SHeader = styled.header`\n  height: 90px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n`\nconst SLogo = styled(Link)`\n  position: absolute;\n  text-decoration: none;\n`\nconst SLogoTitle = styled.h1`\n  color: #00828C;\n  font-size: 36px;\n  letter-spacing: .1em;\n  margin: 0 auto;\n  line-height: 1;\n  ${media.lessThan(\"small\")`\n   font-size: 24px;\n  `}\n`\nconst SNav = styled.nav`\n  height: 66px;\n  position: absolute;\n  top: 90px;\n  width: 100%;\n  background: #EBF5F5;\n  ${media.lessThan(\"small\")`\n    height: auto;\n  `}\n`\nconst SUl = styled.ul`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ${media.lessThan(\"small\")`\n    flex-direction: column;\n  `}\n`\nconst SLink = styled(Link)`\n  color: #00828C;\n  padding: 20px 25px;\n  text-decoration: none;\n  &:hover{\n    cursor: pointer;\n  }\n`\n\nconst SHamburger = styled.div`\n  display: block;\n  position: absolute;\n  right: 20px;\n  width: 17px;\n  height: 44px;\n  cursor: pointer;\n  transition: 1s;\n`\nconst SLines = styled.span`\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n\n  width: 25px;\n  height: 3px;\n  background: #000;\n  transition: 1s;\n  border-radius: 4px;\n`\nconst SLine1 = styled(SLines)`\nbackground: #00828C;\n  top: 35%;\n`\nconst SLine2 = styled(SLines)`\nbackground: #00828C;\n`\nconst SLine3 = styled(SLines)`\nbackground: #00828C;\n  top: 67%;\n`\n\n\n\n\n// ${media.lessThan(\"medium\")`\n// /* screen width is less than 768px (medium) */\n// `}\n\n// ${media.between(\"medium\", \"large\")`\n// /* screen width is between 768px (medium) and 1170px (large) */\n// `}\n\n// ${media.greaterThan(\"large\")`\n// /* screen width is greater than 1170px (large) */\n// `}","import React from 'react';\nimport { Fotter } from \"../atoms/layouts/Fotter\";\nimport { Header } from \"../atoms/layouts/Header\"\n\nexport const DefaultLayout = (props) => {\n  const {children} = props;\n  return (\n    <>\n      <Header />\n       {children}\n      <Fotter />\n    </>\n  );\n}","import { useEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nexport function ScrollTop() {\n    const { pathname } = useLocation();\n\n    useEffect(() => {\n        window.scrollTo(0, 0);\n    }, [pathname]);\n\n    return null;\n}","import React from 'react';\nimport styled from \"styled-components\";\nimport media from \"styled-media-query\";\n\nexport const AboutCard = (props) => {\n  const { step } = props;\n\n  return (\n    <>\n      {\n        React.Children.toArray(step.map((e) => {\n          return(\n            <>\n              <SStartDate>{e.startDate}</SStartDate>\n              <SContainer>\n                <STitle>{e.title}</STitle>\n                <SStartDateInStep>{e.startDate}</SStartDateInStep>\n                <SContent>{e.content}</SContent>\n              </SContainer>\n            </>\n          );\n        }))\n      }\n    </>\n  );\n}\n\nconst SContainer = styled.div`\n  color: #325064;\n  padding: 18px 0 18px 12px;\n  margin: 24px 50px 0 32px;\n  position: relative;\n\n  /* 下線 */\n  ::after {\n    content: \"\";\n    display: block;\n    width: 101%;\n    height: 1px;\n    background: #AF6423;\n    position: absolute;\n    bottom: 0;\n  }\n\n  ${media.greaterThan(\"large\")`\n    max-width: 500px;\n    margin: 0;\n    /* コンテナの位置 */\n    :nth-of-type(1n) {\n      width: 45%;\n      margin: 24px auto 0 0;\n    }\n    :nth-of-type(2n) {\n      margin: 24px 0 0 auto;\n    }\n    /* 下線 */\n    :nth-of-type(1n)::after {\n      width: 135%;\n      right: -195px;\n    }\n    :nth-of-type(2n)::after {\n      right: auto;\n      left: -195px;\n    }\n  `}\n`\nconst STitle = styled.h3`\n  letter-spacing: .08em;\n`\n\nconst SStartDate = styled.p`\n  display: none;\n  position: absolute;\n  font-size: 12px;\n  letter-spacing: .1em;\n  line-height: 24px;\n\n  ${media.greaterThan(\"large\")`\n    display: initial;\n    :nth-of-type(1n){\n      left: 55%;\n    }\n    :nth-of-type(2n+1){\n      margin: 48px 0 0 0;\n    }\n    :nth-of-type(1){\n      margin: 12px 0 0 0;\n    }\n    :nth-of-type(2n){\n      margin: 48px 0 0 0;\n      left: 40%;\n    }\n    ::after {\n      content: none !important;\n    }\n  `}\n`\nconst SStartDateInStep = styled.p`\n  margin: 48px 0 0 0;\n  font-size: 12px;\n  letter-spacing: .1em;\n  line-height: 24px;\n\n  ${media.greaterThan(\"large\")`\n    display: none;\n  `}\n`\nconst SContent = styled.p`\n  font-size: 12px;\n  letter-spacing: .1em;\n  line-height: 24px;\n`","import React from 'react';\nimport styled from \"styled-components\";\nimport media from \"styled-media-query\";\nimport { AboutCard } from \"../organisms/about/AboutCard\";\nimport AboutImage from \"./img/about.jpg\";\n\nconst history = [\n  {\n    title: '千葉県に生まれる',\n    startDate: '1997/1',\n    content: `自然に囲まれた農家で育ち、生き物に興味を持つ。`,\n  },\n  {\n    title: '色鉛筆画家として活動を開始',\n    startDate: '2018/8',\n    content: `SNSや展示会で作品を発表し始める。`,\n  },\n  {\n    title: '日本理科美術協会に入会',\n    startDate: '2018/12',\n    content: `サイエンスイラストレーターが所属する団体。本名の石毛洋輔名義で入会し、現在に至る。`,\n  },\n  {\n    title: '千葉大学理学部を卒業',\n    startDate: '2019/3',\n    content: `生き物が形作られるメカニズムを学びたいと考え、大学では生物学を専攻。`,\n  },\n  {\n    title: 'ノーチのしっぽ研究所名義でのアーティスト活動を開始',\n    startDate: '2020/5',\n    content: `オリジナルの世界観を創作。イラスト以外の絵本、マンガ、アニメ等の表現手法にも挑戦し始める。`,\n  },\n  {\n    title: '初の個展を開催',\n    startDate: '2021/7',\n    content: `オリジナルストーリーに沿った展示を企画し、自主制作絵本の原画等を発表。期間中にワークショップを開催し、色鉛筆画講師としてもデビュー。`,\n  },\n  {\n    title: 'オンライン講座の講師を務める',\n    startDate: '2021/7',\n    content: `画材メーカーの株式会社オリオン主催のもの。ライブ配信と動画配信の2形式があり、教材制作も行う。（〜2022/12）`,\n  },\n  {\n    title: '本格的にイラストレーター活動を開始',\n    startDate: '2022~',\n    content: `アーティストとして創作を続けつつ、科学系を中心に多様なジャンルのイラストを制作。`,\n  },\n]\n\nconst evaluation = [\n  {\n    title: '日本テレビ「ヒルナンデス！」出演',\n    startDate: '2019/4',\n    content: `アートの達人コーナーで色鉛筆画家として紹介され、作品をスタジオ披露。`,\n  },\n  {\n    title: '東京ホビーショウ2019＠東京ビッグサイト',\n    startDate: '2019/4',\n    content: `色鉛筆メーカーDERWENTブースにてライブドローイング。`,\n  },\n  {\n    title: '『第１回 in the Room展』スケッチブック商品化賞',\n    startDate: '2020/5',\n    content: `作品がスケッチブックの表紙を飾り、全国の画材店で販売された。`,\n  },\n  {\n    title: '『第２回 in the Room展』フレームA賞',\n    startDate: '2020/10',\n    content: ``,\n  },\n]\n\nexport const About = () => {\n  return (\n    <>\n      <STitleContainer>\n        <STitle>About</STitle>\n      </STitleContainer >\n      <SImgContainer>\n        <SImg src={AboutImage} alt=\"about\"></SImg>\n      </SImgContainer>\n      <SContainer>\n        <AboutCard step={history}></AboutCard>\n      </SContainer>\n      <STitleContainer>\n        <STitle>Media / Evaluation</STitle>\n      </STitleContainer>\n      <SContainer>\n        <AboutCard step={evaluation}></AboutCard>\n      </SContainer>\n    </>\n  );\n}\n\nconst STitleContainer = styled.div`\n  padding: 24px 0 0 0;\n  text-align: center;\n`\nconst STitle = styled.h2`\n  letter-spacing: .1em;\n  color: #00828C;\n  ${media.greaterThan(\"large\")`\n    width: 100%;\n    margin: 0;\n  `}\n`\nconst SImgContainer = styled.div`\n  max-width: 1170px;\n  margin: 24px auto 0;\n  text-align: center;\n`\nconst SImg = styled.img`\n  width: 80%;\n  height: 80%;\n`\nconst SContainer = styled.div`\n  max-width: 1170px;\n  margin: 12px 0 120px;\n  position: relative;\n  ::before {\n    content: '';\n    display: inline-block;\n    width: 2px;\n    height: 105%;\n    background: #AF6423;\n    position: absolute;\n    left: 30px;\n  }\n  ${media.greaterThan(\"large\")`\n    margin: 64px auto;\n    padding: 0 32px;\n    ::before {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n    }\n  `}\n`","import React from 'react';\nimport styled from \"styled-components\";\nimport media from 'styled-media-query';\n\nexport const HomeHeader = () => {\n\n  return (\n    <>\n      <SContainer>\n        <Stitle>\n          Nauti's Shippo ART<br />\n          ノーチのしっぽ研究所\n        </Stitle>\n        <SContent>\n          理系出身のイラストレーター。<br />\n          生き物や科学系のイラストを得意とし、<br />\n          子供向け書籍の挿絵から<br />\n          サイエンスイラストレーションまで、<br />\n          幅広いジャンルを手がける。<br />\n          絵本作家として、架空の研究所<br />\n          「ノーチのしっぽ研究所」を舞台にした<br />\n          オリジナル作品も発表中。\n        </SContent>\n      </SContainer>\n    </>\n  );\n}\n\nconst SContainer = styled.div`\n  text-align: center;\n  height: 80vh;\n  min-height: 500px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n`\nconst Stitle = styled.h1`\n  font-size: 36px;\n  letter-spacing: .1em;\n  ${media.lessThan(\"small\")`\n   font-size: 24px;\n  `}\n`\nconst SContent = styled.p`\n  margin: 30px auto 0 auto;\n  font-size: 12px;\n  letter-spacing: .1em;\n  line-height: 24px;\n  color: #325064;\n  width: 90%;\n  max-width: 500px;\n`","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nexport const LinkButton = (props) => {\n  return (\n    <>\n      <SLink to={props.url}>{props.children}</SLink>\n    </>\n  );\n}\nconst SLink = styled(Link)`\n  border-radius: 50px;\n  border: solid #EBF5F5;\n  color: #EBF5F5;\n  background-color: #AF6423;\n  text-decoration: none;\n  display:block;\n  margin: 16px auto 0 auto;\n  width: fit-content;\n  padding: 14px 28px;\n  &:hover {\n    cursor: pointer;\n  }\n  &:active {\n    background: #fff;\n    opacity: .6;\n    color: #000;\n  }\n`","import React from 'react';\nimport styled from \"styled-components\";\nimport media from 'styled-media-query';\nimport { LinkButton } from '../../atoms/button/TopButton';\nimport bgAbout from '../../pages/img/top_about.jpg';\nimport bgWorks from '../../pages/img/top_works.jpg';\nimport bgContact from '../../pages/img/top_contact.jpg';\n\nexport const HomeContents = (props) => {\n  const { menus } = props;\n  return (\n    <>\n      {\n        React.Children.toArray(menus.map((e) => (\n          // 条件分岐で１つ目２つ目とかで分けるか\n          <SContentsContainer>\n            {\n              e.type === \"right\" ?\n                (\n                  e.title === \"About\" ?\n                    (\n                      <>\n                        <>\n                          <SContentTitle>{e.title}</SContentTitle>\n                        </>\n                        <SContentAbout >\n                          <SContentRight>\n                            <LinkButton url={e.url}>VIEW MORE</LinkButton>\n                          </SContentRight>\n                        </SContentAbout>\n                      </>\n                    )\n                    :\n                    (\n                      <>\n                        <>\n                          <SContentTitle>{e.title}</SContentTitle>\n                        </>\n                        <SContentContact >\n                          <SContentRight>\n                            <LinkButton url={e.url}>VIEW MORE</LinkButton>\n                          </SContentRight>\n                        </SContentContact>\n                      </>\n                    )\n\n                )\n                :\n                (\n                  <>\n                    <>\n                      <SContentTitle>{e.title}</SContentTitle>\n                    </>\n                    <SContentWorks>\n                      <SContentLeft>\n                        <LinkButton url={e.url}>VIEW MORE</LinkButton>\n                      </SContentLeft>\n                    </SContentWorks>\n                  </>\n                )\n            }\n          </SContentsContainer>\n        )))\n      }\n    </>\n  );\n}\n\nconst SContentsContainer = styled.div`\n\n  width: 80%;\n  max-width: 1000px;\n  height: 60vh;\n  min-height: 60vh;\n  max-height: 500px;\n  margin: 0 auto;\n  position: relative;\n\n  :nth-of-type(1) {\n  margin: -132px auto 0 auto;\n  }\n  :nth-of-type(2) {\n  margin: -60px auto 0 auto;\n  }\n  :nth-of-type(3) {\n  margin: -60px auto 0 auto;\n  }\n`\n\nconst SContentTitle = styled.p`\n  text-decoration: none;\n  display:block;\n  margin: 60px auto 0px auto;\n  width: fit-content;\n  font-size: 36px;\n  font-weight: 400;\n`\nconst SContentContainer = styled.div`\n  border-radius: 100px;\n  border: solid #325064;\n  width: 100%;\n  height: 60%;\n  margin: 36px auto 0px auto;\n  background-size: cover;\n  background-position: center;\n`\nconst SContentAbout = styled(SContentContainer)`\n  background-image: url('${bgAbout}');\n`\nconst SContentWorks = styled(SContentContainer)`\n  background-image: url('${bgWorks}');\n`\nconst SContentContact = styled(SContentContainer)`\n  background-image: url('${bgContact}');\n`\nconst SContent = styled.div`\n  width: 50%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  ${media.lessThan(\"small\")`\n   width: 100%;\n  `}\n`\nconst SContentLeft = styled(SContent)`\n`\nconst SContentRight = styled(SContent)`\nmargin: 0 0 0 auto;\n`","import React from 'react';\nimport styled from 'styled-components';\nimport { HomeHeader } from '../organisms/home/HomeHeader';\nimport { HomeContents } from '../organisms/home/HomeContents';\n\nconst menus = [\n  {\n    type: \"right\",\n    title:\"About\",\n    url:\"/about\",\n  },\n  {\n    type: \"left\",\n    title:\"Works\",\n    url:\"/works\",\n  },\n  {\n    type: \"right\",\n    title:\"Contact\",\n    url:\"/contact\",\n  },\n]\n\nexport const Home = () => {\n  return (\n    <>\n     <HomeHeader></HomeHeader>\n      <SMainContainer>\n        <HomeContents menus={menus}></HomeContents>\n      </SMainContainer>\n    </>\n  );\n}\n\nconst SMainContainer = styled.div`\n`\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\n\nexport const LinkButton = (props) => {\n  return (\n    <>\n      <SLink to={props.url}>{props.children}</SLink>\n    </>\n  );\n}\nconst SLink = styled(Link)`\n  border-radius: 50px;\n  border: solid #EBF5F5;\n  color: #EBF5F5;\n  background-color: #325064;\n  text-decoration: none;\n  display:block;\n  margin: 16px auto 0 auto;\n  width: fit-content;\n  padding: 14px 28px;\n  &:hover {\n    cursor: pointer;\n  }\n  &:active {\n    background: #fff;\n    opacity: .6;\n    color: #000;\n  }\n`","import React from 'react';\nimport styled from \"styled-components\";\nimport Lightbox from \"lightbox-react\";\nimport \"lightbox-react/style.css\";\nimport ClientA01 from '../../pages/img/client_A_01.jpg'\nimport ClientA02_1 from '../../pages/img/client_A_02-1.jpg'\nimport ClientB01 from '../../pages/img/client_B_01.jpg'\nimport ClientB02 from '../../pages/img/client_B_02.jpg'\nimport ClientB03 from '../../pages/img/client_B_03.jpg'\nimport ClientC01 from '../../pages/img/client_C_01.jpg'\nimport ClientC02 from '../../pages/img/client_C_02.jpg'\nimport ClientC03 from '../../pages/img/client_C_03.jpg'\nimport ClientC04 from '../../pages/img/client_C_04.jpg'\nimport OriginalA01 from '../../pages/img/original_A_01.jpg'\nimport OriginalA02 from '../../pages/img/original_A_02.jpg'\nimport OriginalA03 from '../../pages/img/original_A_03.jpg'\nimport OriginalA04 from '../../pages/img/original_A_04.jpg'\nimport OriginalB01 from '../../pages/img/original_B_01.jpg'\nimport OriginalB02 from '../../pages/img/original_B_02.jpg'\nimport OriginalC01 from '../../pages/img/original_C_01.jpg'\nimport OriginalC02 from '../../pages/img/original_C_02.jpg'\nimport OriginalC03 from '../../pages/img/original_C_03.jpg'\nimport OriginalC04 from '../../pages/img/original_C_04.png'\nimport OriginalC05 from '../../pages/img/original_C_05.png'\n\nexport const ModalImage = (props) => {\n  const { showImage, setShowImage, workType, workGenre, worksIndex, setWorksIndex } = props;\n\n  var worksTemp = \"\"\n  var titlesTemp = \"\"\n  var captionsTemp = \"\"\n\n  const worksCA = [\n    ClientA01,\n    ClientA02_1,\n  ]\n  const titlesCA = [\n    \"ふなばし三番瀬環境学習館 特別展\",\n    \"ふなばし三番瀬環境学習館 特別展\",\n  ]\n  const captionsCA = [\n    \"【2022年 夏の特別展】ポスター（メインビジュアル）のイラスト・デザイン、展示物イラストを担当。\",\n    \"【2021年 春の特別展】ポスターイラスト、展示物イラストを担当。\"\n  ]\n\n  const worksCB = [\n    ClientB01,\n    ClientB02,\n    ClientB03,\n  ]\n  const titlesCB = [\n    \"柳田理科雄著『空想科学昆虫図鑑 もし虫が人間サイズだったら？』\",\n    \"柳田理科雄著『空想科学昆虫図鑑 もし虫が人間サイズだったら？』\",\n    \"柳田理科雄著『空想科学昆虫図鑑 もし虫が人間サイズだったら？』\"\n  ]\n  const captionsCB = [\n    \"【冒頭見開き８Pの一部】構成・イラストを担当。虫が人間と同じサイズになった空想世界を描いた導入のページ。\",\n    \"【冒頭見開き８Pの一部】世代交代のサイクルが早い昆虫の進化的戦略を子どもたちにもわかりやすいよう図解した。\",\n    \"【本文中イラスト】渡りを行う蝶、アサギマダラの驚くべき飛行能力を説明したイラスト。\",\n  ]\n\n  const worksCC = [\n    ClientC01,\n    ClientC02,\n    ClientC03,\n    ClientC04,\n  ]\n  const titlesCC = [\n    \"「大迫力」シリーズ\",\n    \"「大迫力」シリーズ\",\n    \"「大迫力」シリーズ\",\n    \"「大迫力」シリーズ\",\n  ]\n  const captionsCC = [\n    \"『大迫力！戦慄の都市伝説大百科』縄文時代に作られた遮光器土偶は宇宙人がモデルだったのでは、という都市伝説を描いた。\",\n    \"『大迫力！戦慄の都市伝説大百科』月面観測衛星が捉えた人型の影をもとにした都市伝説を描いた。\",\n    \"『大迫力！NEO 伝説の武器・刀剣・防具大図鑑』ギリシャ神話に登場する魔女キルケが、人間を魔法薬で豚に変えたという伝説を描いた。\",\n    \"『大迫力！NEO 伝説の武器・刀剣・防具大図鑑』コラムページ内のイラストも複数担当。\",\n  ]\n\n  const worksOA = [\n    OriginalA01,\n    OriginalA02,\n    OriginalA03,\n    OriginalA04,\n  ]\n  const titlesOA = [\n    \"絵と物語\",\n    \"絵と物語\",\n    \"絵と物語\",\n    \"絵と物語\",\n  ]\n  const captionsOA = [\n    \"『冒険のはじまり』空を見上げると、深い青の中に伸びたすじ雲を、小さな影が横切っていた。なんだか今日は大発見が待っている予感がした。（色鉛筆、マーカー）\",\n    \"『ノーチのしっぽ研究所へようこそ！』研究所の建物は、かつてこの島に流れ着いた海賊船を改装したものだ。展望台からの景色は最高だ。――どうだね、少し見ていくかね？（アクリル）\",\n    \"『見よ、探検家は還った』１羽の勇気ある探検家は世界中を旅し、彼女の勇姿は肖像画に描かれた。…というのは全て彼女の妄想なのである。（色鉛筆、マーカー）\",\n    \"『生物学全景図 パノラマばいおろじい』生物学の学問分野の広さについて紹介したイラスト。「博物ふぇすてぃばる！」にて発表・配布。（デジタル）\",\n  ]\n\n  const worksOB = [\n    OriginalB01,\n    OriginalB02,\n  ]\n  const titlesOB = [\n    \"動物画\",\n    \"動物画\",\n  ]\n  const captionsOB = [\n    \"『カワセミのハンティング』水中での躍動や羽の構造色など、写真では捉えきれない美しさの表現を試みた作品。（色鉛筆）\",\n    \"『新旧ドードーの比較』文献を読んでドードー復元の新旧の解釈を比較し、自分なりの解釈を加えて描いた復元画。（透明水彩）\"\n  ]\n\n  const worksOC = [\n    OriginalC01,\n    OriginalC02,\n    OriginalC03,\n    OriginalC04,\n    OriginalC05,\n  ]\n  const titlesOC = [\n    \"書籍\",\n    \"書籍\",\n    \"書籍\",\n    \"書籍\",\n    \"書籍\",\n  ]\n  const captionsOC = [\n    \"絵本『トロポコの冒険記録』動物の研究員たちの冒険を通して自然科学の面白さを伝えた自主制作絵本。\",\n    \"絵本『トロポコの冒険記録』本文抜粋。柱状節理ができる原理を解説したページ。\",\n    \"絵本『トロポコの冒険記録』本書に登場する架空の研究所マップ。視覚探索的な遊びを取り入れた。\",\n    \"画集第１刊『まわりにあるもの』オリジナルイラストにストーリーを添えた作品集。\",\n    \"画集第１刊『まわりにあるもの』本文抜粋。動物の研究員たちが発刊した科学ジャーナルという体裁を取っている。\",\n  ]\n\n  if (workType === \"Client\") {\n    if (workGenre === \"A\") {\n      worksTemp = worksCA\n      titlesTemp = titlesCA\n      captionsTemp = captionsCA\n    } else if (workGenre === \"B\") {\n      worksTemp = worksCB\n      titlesTemp = titlesCB\n      captionsTemp = captionsCB\n    } else if (workGenre === \"C\") {\n      worksTemp = worksCC\n      titlesTemp = titlesCC\n      captionsTemp = captionsCC\n    }\n  } else if (workType === \"Original\") {\n    if (workGenre === \"A\") {\n      worksTemp = worksOA\n      titlesTemp = titlesOA\n      captionsTemp = captionsOA\n    } else if (workGenre === \"B\") {\n      worksTemp = worksOB\n      titlesTemp = titlesOB\n      captionsTemp = captionsOB\n    } else if (workGenre === \"C\") {\n      worksTemp = worksOC\n      titlesTemp = titlesOC\n      captionsTemp = captionsOC\n    }\n  }\n\n  const works = worksTemp\n  const titles = titlesTemp\n  const captions = captionsTemp\n\n  if (showImage) {\n    return (\n\n      <SModalBackground>\n        <SModalContainer>\n          <Lightbox\n            mainSrc={`${works[worksIndex]}`}\n            nextSrc={works[(worksIndex + 1) % works.length]}\n            prevSrc={works[(worksIndex + works.length - 1) % works.length]}\n            onCloseRequest={() => setShowImage(false)}\n            onMovePrevRequest={() =>\n              setWorksIndex((worksIndex + works.length - 1) % works.length)\n            }\n            onMoveNextRequest={() => setWorksIndex((worksIndex + 1) % works.length)}\n            imageTitle={titles[worksIndex]}\n            imageCaption={captions[worksIndex]}\n          />\n        </SModalContainer>\n      </SModalBackground>\n\n    );\n  } else {\n    return null;\n  }\n}\n\n\n// モーダル\nconst SModalBackground = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background:rgba(0,0,0,0.5);\n\n  /*　画面の中央に要素を表示させる設定　*/\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  cursor: pointer;\n`\n\nconst SModalContainer = styled.div`\n  z-index: 99999;\n  width: 80%;\n  max-width: 800px;\n  height: auto;\n  max-height: 800px;\n  padding: 1em;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`","import React from \"react\";\nimport { LinkButton } from '../../atoms/button/WorksButton';\n\nexport function RedirectToNote() {\n  const redirectToNote = () => {\n    window.open('https://note.com/nautis_shippo/n/na2e2e8b5c8a6', '_blank')\n  };\n  return (\n      <LinkButton >\n        <div onClick={redirectToNote}>noteへ</div>\n      </LinkButton>\n  );\n}","import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport media from 'styled-media-query';\nimport { LinkButton } from '../atoms/button/WorksButton';\nimport { ModalImage } from \"../organisms/works/ModalImg\";\nimport { RedirectToNote } from \"../organisms/works/OpenLink\";\nimport thumnailClientA from './img/square_client_A_01.jpg'\nimport thumnailClientB from './img/square_client_B_01.jpg'\nimport thumnailClientC from './img/square_client_C_01.jpg'\nimport thumnailClientD from './img/square_client_D_01.jpg'\nimport thumnailOriginalA from './img/square_original_A_01.jpg'\nimport thumnailOriginalB from './img/square_original_B_01.jpg'\nimport thumnailOriginalC from './img/square_original_C_02.jpg'\n\n\nconst clientWorks = [\n  {\n    url: \"#\",\n    title: \"ふなばし三番瀬環境学習館 特別展\",\n    comment: \"学習館監修のもと、ポスターと展示物イラストを制作。\",\n    background: thumnailClientA,\n    workType: \"Client\",\n    workGenre: \"A\",\n  },\n  {\n    url: \"#\",\n    title: \"柳田理科雄著『空想科学昆虫図鑑     もし虫が人間サイズだったら？』\",\n    comment: \"キャラクターデザイン、一部挿画を担当。（西東社出版）\",\n    background: thumnailClientB,\n    workType: \"Client\",\n    workGenre: \"B\",\n  },\n  {\n    url: \"#\",\n    title: \"「大迫力」シリーズ\",\n    comment: \"武器・都市伝説等様々なジャンルを取り上げた児童向けの図鑑シリーズ。一部タイトルで挿画を担当。（西東社出版）\",\n    background: thumnailClientC,\n    workType: \"Client\",\n    workGenre: \"C\",\n  },\n  {\n    url: \"https://note.com/nautis_shippo/n/na2e2e8b5c8a6\",\n    title: \"国立国際医療研究センター監修      「マンガでわかるシスチノーシス」\",\n    comment: \"希少疾患の患者やその家族を対象とした解説マンガ。資料やヒアリング内容を元に、ストーリーから制作。\",\n    background: thumnailClientD,\n    workType: \"Client\",\n    workGenre: \"D\",\n  },\n]\n\nconst originalWorks = [\n  {\n    url: \"#\",\n    title: \"絵と物語/ illustration and stories\",\n    comment: \"不思議な島々「ノーチラス諸島」で暮らす動物の研究員たちの物語を制作。\",\n    background: thumnailOriginalA,\n    workType: \"Original\",\n    workGenre: \"A\",\n  },\n  {\n    url: \"#\",\n    title: \"動物画/ animal illustration\",\n    comment: \"生き物の美しさを再現したリアルタッチの絵画も多数制作。\",\n    background: thumnailOriginalB,\n    workType: \"Original\",\n    workGenre: \"B\",\n  },\n  {\n    url: \"#\",\n    title: \"書籍/ books\",\n    comment: \"絵本や作品集を発表。ストーリー執筆にも力を入れている。\",\n    background: thumnailOriginalC,\n    workType: \"Original\",\n    workGenre: \"C\",\n  },\n]\n\n\n\nexport const Works = () => {\n\n  const [showImage, setShowImage] = useState(false);\n  const [worksIndex, setWorksIndex] = useState(0);\n  const [workType, setWorkType] = useState();\n  const [workGenre, setWorkGenre] = useState();\n\n  return (\n    <>\n      <SContainer>\n        <STitle>Client Works</STitle>\n        <SWorks>\n          {\n            React.Children.toArray(clientWorks.map((f, i) => {\n\n              return (\n                <>{\n                  f.background === thumnailClientD ?\n                    (\n                      <SWork src={f.background}>\n                        <SWorkTitleContainer>\n                          <SWorkTitle>{f.title}</SWorkTitle>\n                        </SWorkTitleContainer>\n                        <SCommentContainer>\n                          <SComment>{f.comment}</SComment>\n                        </SCommentContainer>\n                        <SImg src={f.background} />\n                        <SMaskContainer>\n                          <SMakingComment>\n                            <SMaskingPDF>全文をお読みいただけます。</SMaskingPDF>\n                            <RedirectToNote />\n                          </SMakingComment>\n                        </SMaskContainer>\n                      </SWork >\n                    ) :\n                    (\n                      <SWork src={f.background} onClick={() => { setShowImage(true); setWorkType(f.workType); setWorkGenre(f.workGenre) }}>\n                        <SWorkTitleContainer>\n                          <SWorkTitle>{f.title}</SWorkTitle>\n                        </SWorkTitleContainer>\n                        <SCommentContainer>\n                          <SComment>{f.comment}</SComment>\n                        </SCommentContainer>\n                        <SImg src={f.background} />\n                        <SMaskContainer>\n                          <SMakingComment>\n                            <LinkButton url={f.url}>VIEW MORE</LinkButton>\n                          </SMakingComment>\n                        </SMaskContainer>\n                      </SWork >\n                    )\n                }\n                  <ModalImage showImage={showImage} setShowImage={setShowImage} workType={workType} setWorkType={setWorkType} workGenre={workGenre} setWorkGenre={setWorkGenre} worksIndex={worksIndex} setWorksIndex={setWorksIndex}></ModalImage>\n                </>\n              );\n            }))\n          }\n        </SWorks>\n        <STitle>Original Works</STitle>\n        <SWorks>\n          {\n            React.Children.toArray(originalWorks.map((g, i) => {\n              return (\n                <>\n                  <SWork  src={g.background} onClick={() => { setShowImage(true); setWorkType(g.workType); setWorkGenre(g.workGenre) }}>\n                    <SWorkTitleContainer>\n                      <SWorkTitle>{g.title}</SWorkTitle>\n                    </SWorkTitleContainer>\n                    <SCommentContainer>\n                      <SComment>{g.comment}</SComment>\n                    </SCommentContainer>\n                    <SImg src={g.background} />\n                    <SMaskContainer>\n                      <SMakingComment>\n                        <LinkButton url={g.url}>VIEW MORE</LinkButton>\n                      </SMakingComment>\n                    </SMaskContainer>\n                  </SWork >\n                  <ModalImage showImage={showImage} setShowImage={setShowImage} workType={workType} setWorkType={setWorkType} workGenre={workGenre} setWorkGenre={setWorkGenre} worksIndex={worksIndex} setWorksIndex={setWorksIndex}></ModalImage>\n                </>\n              );\n            }))\n          }\n\n        </SWorks>\n      </SContainer >\n    </>\n  );\n}\n\nconst SContainer = styled.div`\n  min-height: 100vh;\n  padding: 24px 0 0 0;\n`\nconst STitle = styled.h2`\n  text-align: center;\n  letter-spacing: .1em;\n`\nconst SWorks = styled.div`\n  margin: 20px 0 0 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 400px));\n  justify-content: center;\n`\nconst SWork = styled.div`\n  margin: 0 20px 70px;\n  max-width: 400px;\n  position:\t\trelative;\n`\nconst SWorkTitleContainer = styled.div`\n  height: 84px;\n`\nconst SWorkTitle = styled.h3`\n  letter-spacing: .1em;\n  margin: 12px 0 0 12px;\n  white-space: pre-wrap;\n`\nconst SCommentContainer = styled.div`\n  height: 60px;\n`\nconst SComment = styled.div`\n  font-size: 12px;\n  letter-spacing: .1em;\n  margin: 12px 0 0 12px;\n`\nconst SImg = styled.img`\n  width: 100%;\n  transition: .2s;\n  &:hover {\n    cursor: pointer;\n  }\n`\nconst SMaskContainer = styled(Link)`\n  width: 100%;\n  aspect-ratio: 1/1;\n  position: absolute;\n  top: 168px;\n  left: 0;\n  background-color:\trgba(0,0,0,0.3);\n  color: #fff;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n    \n\n  ${media.greaterThan(\"large\")`\n    width: 100%;\n    aspect-ratio: 1/1;\n    position: absolute;\n    top: 168px;\n    left: 0;\n    opacity: 0;\n    background-color:\trgba(0,0,0,0.3);\n    color: #fff;\n    text-decoration: none;\n\n    display: flex;\n    align-items: flex-end;\n\n    &:hover {\n      opacity: .3;\n    }\n  `}\n`\nconst SMakingComment = styled.div`\n  width: 100%;\n  height: 100%;\n  line-height: 1.2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-flow: column;\n`\nconst SMaskingPDF = styled.div`\nwidth: 100%;\ntext-align: center;\n`\n\n","import React from 'react';\nimport styled from \"styled-components\";\n\nexport const Contact = () => {\n\n\n  return (\n    <SContainer>\n      <STitle>Contact</STitle>\n      <SCommentContainer>\n      <SCommentLeft>御用の際は下記メールアドレスまたは各種SNSのDMまでご連絡ください。</SCommentLeft>\n      {/* <br/>＊2025年1月から同3月まで受注は停止いたしております。ご了承ください。</SCommentLeft> */}\n        <SComment>nautisshippolab [at] gmail.com</SComment>\n        <SCommentLeft>制作のご依頼・ご相談の際は、下記の項目を事前にお知らせいただけますとスムーズです。</SCommentLeft>\n        <SInformationContainer>\n          <SCommentLeft>\n            【お伝えいただきたいこと】<br />\n            <br />\n            １．ご連絡先<br />\n            お名前、一般/法人・個人事業主、会社名・屋号、メールアドレス、電話番号、ホームページなど<br />\n            <br />\n            ２．制作内容<br />\n            使用媒体・使用期間・使用目的（営利/非営利）など<br />\n            <br />\n            ３．制作仕様<br />\n            点数・サイズ・納品形式など<br />\n            <br />\n            ４．ご希望納期<br />\n            <br />\n            ５．ご予算<br />\n            未定の場合、詳しい内容をお知らせいただけましたらお見積り可能です。<br />\n            <br />\n            ６．お問合せ内容詳細<br />\n          </SCommentLeft>\n        </SInformationContainer>\n        <SCommentLeft>\n          内容を確認後、改めてこちらから折り返しご連絡いたします。<br />\n          制作についてのやり取りは基本的にメールかDMで行い、必要に応じてお電話やリモート会議でのご対応も可能です。<br />\n          よろしくお願い申し上げます。\n        </SCommentLeft>\n      </SCommentContainer>\n    </SContainer>\n  );\n}\n\nconst SContainer = styled.div`\n  min-height: 100vh;\n  padding: 24px 0 0 0;\n`\nconst STitle = styled.h2`\n  text-align: center;\n  letter-spacing: .1em;\n`\nconst SCommentContainer = styled.div`\n  margin: 0 auto;\n  width: 70%;\n  padding: 0 0 60px 0;\n`\n\nconst SComment = styled.p`\n  padding: 24px 0 0 0;\n  text-align: center;\n  letter-spacing: .1em;\n`\nconst SCommentLeft = styled(SComment)`\n  text-align: left;\n`\nconst SInformationContainer = styled.div`\n  margin: 36px auto 12px;\n  width: 80%;\n  padding: 0px 24px 24px 24px;\n  border: solid 1px;\n  border-radius: 50px;\n`","import React from 'react';\nimport { Route, Switch } from \"react-router\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { DefaultLayout } from \"../templates/DefaultLayout\"\nimport { ScrollTop } from \"./ScrollTop\"\nimport { About } from \"../pages/About\";\nimport { Home } from \"../pages/Home\";\nimport { Works } from \"../pages/Works\";\nimport { Contact } from \"../pages/Contact\";\n\nexport const Router = () => {\n  return(\n    <BrowserRouter>\n    <ScrollTop />\n      <Switch>\n        <Route exact path=\"/\">\n          <DefaultLayout>\n            <Home></Home>\n          </DefaultLayout>\n        </Route>\n        <Route exact path=\"/about\">\n          <DefaultLayout>\n            <About></About>\n          </DefaultLayout>\n        </Route>\n        <Route exact path=\"/works\">\n          <DefaultLayout>\n            <Works></Works>\n          </DefaultLayout>\n        </Route>\n        <Route exact path=\"/contact\">\n          <DefaultLayout>\n            <Contact></Contact>\n          </DefaultLayout>\n        </Route>\n      </Switch>\n    </BrowserRouter>\n  );\n}\n","import React from 'react';\nimport { Router } from \"./components/router/Router\";\n\n// mapでダミーデータを作成 => 32.Pageの作成を参照\nfunction App() {\n  return (\n    <>\n      <Router />\n    </>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}