{"version":3,"file":"component---src-pages-column-details-c-0024-tsx-7e54675d8bd7ae4145da.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/columnBtnCard.tsx","webpack://beaver-help/./src/components/molecules/columnAuthor001.tsx","webpack://beaver-help/./src/components/molecules/columnRelationLink.tsx","webpack://beaver-help/./src/components/molecules/popupBanner.tsx","webpack://beaver-help/./src/components/molecules/columnDetailInner0024.tsx","webpack://beaver-help/./src/components/molecules/columnRelationCards0024.tsx","webpack://beaver-help/./src/components/molecules/usefulFunctionLayout024.tsx","webpack://beaver-help/./src/pages/column/details/C0024.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst StyledLink = styled(Link)`\n padding: 7px;\n width: 220px;\n border-radius: 5px;\n border: solid 3px transparent;\n margin-bottom: 15px;\n &:hover {\n border-color: #77d7c9;\n text-decoration: underline solid rgba(255, 255, 255, 0);\n }\n .img-wrap {\n width: 200px;\n height: 100px;\n overflow: hidden;\n margin-bottom: 12px;\n img {\n width: 110%;\n height: auto;\n }\n }\n h2 {\n font-size: 18px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n margin-bottom: 8px;\n }\n span {\n color: #ababab;\n }\n`\n\ntype Props = {\n /** 繧ｯ繝ｩ繧ｹ蜷� */\n className?: string\n /** 繝ｪ繝ｳ繧ｯ蜈� */\n href: string\n /** 逕ｻ蜒� */\n imgId: string\n /** 繧ｿ繧､繝医Ν */\n label: string\n /** 繧ｿ繧､繝医Ν */\n date: string\n}\n\n/**\n * 繧ｳ繝ｩ繝�逕ｨ繧ｫ繝ｼ繝牙梛繝懊ち繝ｳ繝ｪ繝ｳ繧ｯ繧ｳ繝ｳ繝昴�繝阪Φ繝�\n * @param props\n * @constructor\n */\nconst ColumnBtnCard = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n <StyledLink className={className} to={props.href}>\n <div className=\"img-wrap\">\n {/** TODO 蟾昜ｸ顔筏縺鈴√ｊ莠矩��ｼ壺名險倅ｺ九＃縺ｨ縺ｫ謖�ｮ壹＆繧後※逕ｻ蜒上′縺薙％縺ｫ陦ｨ遉ｺ縺輔ｌ縺ｾ縺� */}\n <img\n src={`/images/column/details/${props.imgId}`}\n alt=\"繧ｭ繝ｳ繧ｯ繝ｩ繧ｳ繝ｩ繝�\"\n />\n </div>\n {/** TODO 蟾昜ｸ顔筏縺鈴√ｊ莠矩��ｼ壺名險倅ｺ九�繧ｿ繧､繝医Ν縺後％縺薙↓陦ｨ遉ｺ縺輔ｌ縺ｾ縺� */}\n <h2>{props.label}</h2>\n {/** TODO 蟾昜ｸ顔筏縺鈴√ｊ莠矩��ｼ壺名險倅ｺ九�謚慕ｨｿ譌･縺後％縺薙↓陦ｨ遉ｺ縺輔ｌ縺ｾ縺� */}\n <span>{props.date}</span>\n </StyledLink>\n )\n}\n\nexport default ColumnBtnCard\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\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 React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n width: 100%;\n display: flex;\n justify-content: flex-start;\n z-index: 1;\n margin-bottom: 20px;\n\n p {\n padding-bottom: 0 !important;\n }\n\n a {\n color: #00b5a6;\n padding-left: 10px;\n }\n\n ${BreakPoints.large} {\n }\n`\ntype Props = {\n link: string\n label: string\n}\n\n/**\n * 繧ｳ繝ｩ繝�險倅ｺ玖ｩｳ邏ｰ�夐未騾｣繧ｳ繝ｩ繝�隱伜ｰ守畑繝ｪ繝ｳ繧ｯ\n * @constructor\n */\nconst ColumnRelationLink = (props: Props): JSX.Element => {\n const routePram = useRouteParam(props.link)\n\n return (\n <Wrapper className=\"relation-link\">\n <p>\n 髢｢騾｣險倅ｺ具ｼ喀n <a href={routePram}>{props.label}</a>\n </p>\n </Wrapper>\n )\n}\nexport default ColumnRelationLink\n","import React, { useEffect, useState } from 'react'\nimport styled from '@emotion/styled'\nimport { a } from 'aws-amplify'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n position: fixed;\n bottom: 100px;\n left: 30px;\n width: 300px;\n height: 250px;\n z-index: 100;\n img {\n height: 250px;\n width: 300px;\n border: 2px solid #e5e5e5;\n }\n .popup-close {\n position: absolute;\n top: -10px;\n right: -10px;\n width: 29px;\n height: 29px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border-radius: 50%;\n border: solid 2px #e5e5e5;\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n`\n\n// 笆ｼ縺薙％縺ｧ菴輔ヴ繧ｯ繧ｻ繝ｫ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺励◆繧芽｡ｨ遉ｺ縺吶ｋ縺ｮ縺九ｒ險ｭ螳壹＠縺ｦ縺ｭ\nconst PAGE_Y_OFFSET = 1500\n\nconst PopupBanner = () => {\n const [show, setShow] = useState<boolean>(false)\n\n const changeShow = () => {\n if (window.pageYOffset > PAGE_Y_OFFSET) {\n setShow(true)\n } else {\n setShow(false)\n }\n }\n\n const [visible, setVisible] = useState(true)\n\n useEffect(() => {\n window.addEventListener('scroll', changeShow)\n return () => window.removeEventListener('scroll', changeShow)\n }, [])\n\n const [no, setNo] = useState(-1)\n useEffect(() => {\n setNo(Math.floor(Math.random() * 2))\n }, [])\n\n const routeParam = useRouteParam(\n 'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202301'\n )\n const routeParam2 = useRouteParam(\n 'https://www.kintaicloud.jp/contact/?utm_source=column&utm_medium=popup&utm_campaign=popup_202302'\n )\n\n if (show)\n return (\n <Wrapper style={{ visibility: visible ? 'visible' : 'hidden' }}>\n {no === 0 && (\n <div>\n <a target=\"_blank\" href={routeParam} rel=\"noreferrer\">\n <img\n src=\"/images/column/common/popupBanner01.png\"\n alt=\"繧ｭ繝ｳ繧ｯ繝ｩ\"\n />\n </a>\n </div>\n )}\n {no === 1 && (\n <div>\n <a target=\"_blank\" href={routeParam2} rel=\"noreferrer\">\n <img\n src=\"/images/column/common/popupBanner02.png\"\n alt=\"繧ｭ繝ｳ繧ｯ繝ｩ\"\n />\n </a>\n </div>\n )}\n {/** 笆ｼ髢峨§繧九�繧ｿ繝ｳ */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n <a className=\"popup-close\" onClick={() => setVisible(!visible)}>\n ﾃ予n </a>\n </Wrapper>\n )\n return null\n}\n\nexport default PopupBanner\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ColumnH1 from '../atoms/columnH1'\nimport ColumnRelationLink from './columnRelationLink'\nimport Introduction004 from './Introduction004'\nimport Introduction005 from './Introduction005'\nimport Introduction006 from './Introduction006'\nimport Introduction007 from './Introduction007'\nimport Introduction008 from './Introduction008'\nimport Introduction009 from './Introduction009'\nimport Introduction010 from './Introduction010'\nimport Introduction011 from './Introduction011'\nimport Introduction012 from './Introduction012'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n position: relative;\n margin-bottom: 30px;\n\n .p-txt-date {\n margin-top: -10px;\n color: #ababab;\n }\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\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\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\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\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\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\n p {\n padding-bottom: 30px;\n line-height: 2;\n position: relative;\n\n span {\n background: linear-gradient(transparent 60%, #ff6 60%);\n font-weight: 600;\n }\n\n .p-list-link {\n position: absolute;\n top: 6px;\n right: 2px;\n\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 &.txt-color-red {\n color: #ff6969;\n }\n }\n\n .link-div {\n width: 100%;\n display: flex;\n justify-content: left;\n padding-bottom: 30px;\n\n > div {\n width: 50px;\n }\n\n .link-p {\n width: calc(100% - 50px);\n\n .p-list-link {\n position: absolute;\n top: -3px;\n left: 30px;\n\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\n img {\n width: 100%;\n height: auto;\n padding-bottom: 30px;\n }\n }\n\n .toc {\n border: 1px solid #ababab;\n padding: 20px 40px;\n margin: 0 auto 30px;\n\n ol {\n padding-left: 30px;\n }\n\n p {\n text-align: center;\n padding-bottom: 10px;\n }\n\n a {\n text-decoration: underline;\n }\n\n li {\n list-style-type: decimal;\n display: list-item;\n }\n\n ul {\n padding-left: 30px;\n\n li {\n list-style-type: circle;\n }\n }\n }\n\n ${BreakPoints.large} {\n }\n`\ntype Props = {\n /** 蠎�相縺ｮ逡ｪ蜿ｷ */\n no: number\n}\n\n/**\n * 繧ｳ繝ｩ繝�險倅ｺ玖ｩｳ邏ｰ�夊ｨ倅ｺ区悽菴貼n * @constructor\n */\nconst ColumnDetailInner0024 = (props: Props): JSX.Element => {\n const routePram = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0025/?utm_source=article&utm_medium=post&utm_campaign=Related_article_C0024'\n )\n const routePram2 = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0021/?utm_source=article&utm_medium=post&utm_campaign=Related_article_C0024'\n )\n const routePram3 = useRouteParam(\n 'https://www.kintaicloud.jp/column/details/C0022/?utm_source=article&utm_medium=post&utm_campaign=Related_article_C0024'\n )\n\n return (\n <Wrapper>\n <ColumnH1 label=\"譎る俣蜊倅ｽ阪→蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｨ縺ｯ�溷宛蠎ｦ蜀�ｮｹ縺ｨ蟆主�譁ｹ豕輔ｒ隗｣隱ｬ\" />\n {/** TODO 蟾昜ｸ顔筏縺鈴√ｊ莠矩��ｼ壺名謚慕ｨｿ譌･繧偵％縺薙↓陦ｨ遉ｺ */}\n <p className=\"p-txt-date\">2022.04.15</p>\n <section>\n <img src=\"/images/column/details/c0024.jpg\" alt=\"繧ｭ繝ｳ繧ｯ繝ｩ繧ｳ繝ｩ繝�\" />\n {/** TODO 蟾昜ｸ顔筏縺鈴√ｊ莠矩��ｼ壺名險倅ｺ区兜遞ｿ�茨ｼ滂ｼ峨〒菴懈�縺輔ｌ縺溷�螳ｹ縺後％縺薙↓蜈･繧倶ｺ亥ｮ� */}\n <p>\n 莨夂､ｾ縺ｧ蜒阪￥蜉ｴ蜒崎�↓縺ｨ縺｣縺ｦ繧よｳｨ逶ｮ蠎ｦ縺ｮ鬮倥＞蛻ｶ蠎ｦ縺ｮ荳縺､縺ｫ譛臥ｵｦ莨第嚊縺梧嫌縺偵ｉ繧後∪縺吶�\n <span>譛臥ｵｦ莨第嚊</span>\n 縺ｯ譛ｬ譚･縲∵圜譌･繧貞腰菴阪→縺励※蜿門ｾ励☆繧九％縺ｨ縺悟次蜑�→縺輔ｌ縺ｦ縺�∪縺吶′縲∝叙蠕礼紫縺碁ｲ縺ｾ縺ｪ縺�レ譎ｯ縺後≠繧翫∵凾髢灘腰菴阪ｄ蜊頑律蜊倅ｽ阪〒縺ｮ蜿門ｾ励ｂ豕募ｾ九�夐＃縺ｧ蜿ｯ閭ｽ縺ｨ譏手ｨ倥＆繧後※縺�∪縺吶�\n <br />\n 莉雁屓縺ｯ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縲∝濠譌･蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｫ繝輔か繝ｼ繧ｫ繧ｹ繧偵≠縺ｦ縲∬ｧ｣隱ｬ縺励※縺ｾ縺�ｊ縺ｾ縺吶�\n </p>\n <div className=\"toc\">\n <p>逶ｮ谺｡</p>\n <ol>\n <li>\n <a href=\"#toc1\">譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊</a>\n </li>\n <li>\n <a href=\"#toc2\">\n 譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊蟆主�縺ｫ蠖薙◆繧雁ｿ�ｦ√↑蜉ｴ菴ｿ蜊泌ｮ壹�蜊泌ｮ壼�螳ｹ\n </a>\n </li>\n <li>\n <a href=\"#toc3\">蜉ｴ菴ｿ蜊泌ｮ夂ｷ�邨舌↓蠖薙◆縺｣縺ｦ縺ｮ逡呎э轤ｹ</a>\n </li>\n <li>\n <a href=\"#toc4\">譎る俣蜊倅ｽ肴怏邨ｦ莨第嚊縺ｮ螳溷漁荳翫�蜿門ｾ�</a>\n </li>\n <li>\n <a href=\"#toc5\">蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊</a>\n </li>\n <li>\n <a href=\"#toc6\">蟷ｴ5譌･蜿門ｾ礼ｾｩ蜍吶↓縺翫￠繧句曙譁ｹ縺ｮ逡呎э轤ｹ</a>\n </li>\n <li>\n <a href=\"#toc7\">譛蠕後↓</a>\n </li>\n </ol>\n </div>\n <div id=\"toc1\">\n <h1>譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊</h1>\n </div>\n <p>\n 蜉ｴ蜒咲ｵ�粋縺後↑縺�ｼ夂､ｾ縺ｮ蝣ｴ蜷医∝感蜒崎��驕主濠謨ｰ繧剃ｻ｣陦ｨ縺吶ｋ閠�→蜉ｴ菴ｿ蜊泌ｮ壹ｒ邱�邨舌☆繧九％縺ｨ縺ｧ豕募ｾ倶ｸ翫�\n <span>5譌･莉･蜀�↓髯舌ｊ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊</span>\n 繧剃ｻ倅ｸ弱☆繧九％縺ｨ縺後〒縺阪∪縺吶ょ感菴ｿ蜊泌ｮ夂ｷ�邨舌↓縺ゅ◆縺｣縺ｦ縺ｯ縲∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊繧剃ｸ弱∴繧九％縺ｨ縺後〒縺阪ｋ蜉ｴ蜒崎��遽�峇繧呈ｱｺ螳壹＠縺ｾ縺吶�\n <br />\n <br />\n 蟆壹∝感菴ｿ蜊泌ｮ壹�謇霓�感蜒榊渕貅也屮逹｣鄂ｲ縺ｸ縺ｮ螻雁�縺ｯ荳崎ｦ√→縺輔ｌ縲∽ｸ弱∴繧九％縺ｨ縺悟�譚･繧区律謨ｰ縺ｮ縲�5譌･莉･蜀�阪→縺ｯ縲―n <span>蜑榊ｹｴ蠎ｦ縺ｮ郢ｰ繧願ｶ翫＠蛻�ｂ蜷ｫ繧√※</span>\n 5譌･縺ｮ遽�峇蜀�→縺ｪ繧翫∪縺吶�5譌･縺ｫ貅縺溘↑縺�律謨ｰ縺ｮ譛臥ｵｦ莨第嚊縺御ｻ倅ｸ弱＆繧後ｋ蜉ｴ蜒崎�↓縺､縺�※縺ｯ蜉ｴ菴ｿ蜊泌ｮ壹〒莉倅ｸ弱＆繧後ｋ譌･謨ｰ縺ｮ遽�峇蜀�〒螳壹ａ繧九％縺ｨ縺ｨ縺ｪ繧翫∪縺吶�\n <br />\n <br />\n 譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｫ縺､縺�※縲∽ｻ､蜥�2蟷ｴ蟆ｱ蜉ｴ譚｡莉ｶ邱丞粋隱ｿ譟ｻ�亥字逕溷感蜒咲怐�臥ｵ先棡縺ｧ縺ｯ莉､蜥悟�蟷ｴ縺ｮ譛臥ｵｦ莨第嚊蜿門ｾ礼紫縺ｯ逕ｷ螂ｳ蟷ｳ蝮�56.3%�育塙諤ｧ53.7���螂ｳ諤ｧ60.7��ｼ峨→縺ｪ縺｣縺ｦ縺翫ｊ縲∵ｱｺ縺励※螟壹＞縺ｨ縺ｯ險縺��繧翫∪縺帙ｓ縲る℃蜴ｻ繧堤ｴ占ｧ｣縺上→蟷ｳ謌�21蟷ｴ縺ｫ譛臥ｵｦ莨第嚊縺ｮ蜿門ｾ嶺ｿ�ｲ繧呈悄蠕�＠縲∵怏邨ｦ莨第嚊縺ｮ譛ｬ譚･縺ｮ雜｣譌ｨ繧定ｸ上∪縺医▽縺､縲∽ｻ穂ｺ九→逕滓ｴｻ縺ｮ隱ｿ蜥後ｒ蝗ｳ繧玖ｦｳ轤ｹ縺九ｉ蜉ｴ菴ｿ蜊泌ｮ壹↓繧医ｊ5譌･縺ｮ遽�峇蜀�〒�亥ｹｳ謌�22蟷ｴ4譛�1譌･譁ｽ陦鯉ｼ画凾髢灘腰菴阪�譛臥ｵｦ莨第嚊繧剃ｸ弱∴繧区葎縺ｮ騾夐＃縺悟�縺輔ｌ縺ｦ縺�∪縺吶�\n </p>\n <div id=\"toc2\">\n <h1>譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊蟆主�縺ｫ蠖薙◆繧雁ｿ�ｦ√↑蜉ｴ菴ｿ蜊泌ｮ壹�蜊泌ｮ壼�螳ｹ</h1>\n </div>\n <p>\n 螳溷漁荳翫∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊繧貞宛蠎ｦ蛹悶☆繧九↓縺ｯ蜉ｴ菴ｿ蜊泌ｮ壹�邱�邨舌′蠢�ｦ√〒縺ゅｊ縲∫ｷ�邨仙�螳ｹ縺ｯ莉･荳九�縺ｨ縺翫ｊ縺ｧ縺吶�\n <br />\n <br />\n 繝ｻ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｮ蟇ｾ雎｡縺ｨ縺吶ｋ蜉ｴ蜒崎��遽�峇\n <br />\n 繝ｻ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｮ譌･謨ｰ��5譌･莉･蜀�↓髯舌ｋ�噂n <br />\n 繝ｻ縺昴�莉門字逕溷感蜒咲怐莉､縺ｧ螳壹ａ繧倶ｺ矩��ｼ�1譎る俣莉･螟悶�譎る俣繧貞腰菴阪→縺吶ｋ蝣ｴ蜷医�縺昴�譎る俣謨ｰ遲会ｼ噂n </p>\n <div id=\"toc3\">\n <h1>蜉ｴ菴ｿ蜊泌ｮ夂ｷ�邨舌↓蠖薙◆縺｣縺ｦ縺ｮ逡呎э轤ｹ</h1>\n </div>\n <p>\n 萓九∴縺ｰ蜉ｴ蜒咲ｵ�粋蜩｡縺ｮ縺ｿ隱阪ａ縺ｪ縺�％縺ｨ縲∝ｦ顔肇蟀ｦ蜉ｴ蜒崎��縺ｿ隱阪ａ縺ｪ縺�→縺�≧遽�峇縺ｮ豎ｺ螳壹�譏弱ｉ縺九↓蝠城｡後〒縺吶′縲∵ｵ√ｌ菴懈･ｭ縺ｫ蠕謎ｺ九☆繧句ｷ･蝣ｴ蜉ｴ蜒崎�↓髯舌▲縺ｦ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｮ蜿門ｾ励′蝗ｰ髮｣縺ｧ縺ゅｋ縺薙→縺九ｉ蟇ｾ雎｡縺ｫ蜷ｫ繧√↑縺�→縺�≧閠�∴譁ｹ縺ｧ縺ゅｌ縺ｰ逶ｴ縺｡縺ｫ驕墓ｳ輔→縺ｯ縺ｪ繧翫∪縺帙ｓ縲�\n </p>\n {/** 縺薙％縺ｫ9繝代ち繝ｼ繝ｳ縺ｮ蠎�相險ｭ螳壹☆繧� */}\n {props.no === 0 && <Introduction004 />}\n {props.no === 1 && <Introduction005 />}\n {props.no === 2 && <Introduction006 />}\n {props.no === 3 && <Introduction007 />}\n {props.no === 4 && <Introduction008 />}\n {props.no === 5 && <Introduction009 />}\n {props.no === 6 && <Introduction010 />}\n {props.no === 7 && <Introduction011 />}\n {props.no === 8 && <Introduction012 />}\n <div id=\"toc4\">\n <h1>譎る俣蜊倅ｽ肴怏邨ｦ莨第嚊縺ｮ螳溷漁荳翫�蜿門ｾ�</h1>\n </div>\n <p>\n 螳滄圀縺ｫ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞叙蠕励☆繧九°蜷ｦ縺九�蛟九��蜉ｴ蜒崎��諢丞ｿ励↓繧医ｊ縺ｾ縺吶ゅ∪縺溘∝ｮ溷漁荳翫�1譌･蛻��譛臥ｵｦ莨第嚊縺御ｽ墓凾髢灘�縺ｮ譎る俣蜊倅ｽ阪↓逶ｸ蠖薙☆繧九�縺九�蛟九��蜉ｴ蜒崎��謇螳壼感蜒肴凾髢薙↓繧医▲縺ｦ螟峨ｏ繧翫∪縺吶�\n <br />\n 蟆壹∽ｾ句､也噪縺ｫ謇螳壼感蜒肴凾髢薙↓1譎る俣縺ｫ貅縺溘↑縺�凾髢捺焚縺後≠繧句�ｴ蜷医∝感蜒崎�↓縺ｨ縺｣縺ｦ荳榊茜逶翫→縺ｪ繧峨↑縺�ｈ縺�↓縺吶ｋ隕ｳ轤ｹ縺九ｉ1譌･縺ｮ謇螳壼感蜒肴凾髢薙ｒ荳句屓繧峨↑縺�ｂ縺ｮ縺ｨ縺吶ｋ縺薙→縺梧ｱゅａ繧峨ｌ縺ｾ縺呻ｼ�1譎る俣縺ｫ貅縺溘↑縺�凾髢捺焚縺ｯ1譎る俣縺ｫ蛻�ｊ荳翫￡�峨�\n <br />\n 莉悶�隲也せ縺ｨ縺励※縲∵律縺ｫ繧医▲縺ｦ1譌･縺ｮ謇螳壼感蜒肴凾髢捺焚縺檎焚縺ｪ繧句�ｴ蜷医�1蟷ｴ髢薙↓縺翫￠繧�1譌･蟷ｳ蝮�園螳壼感蜒肴凾髢捺焚繧貞渕貅悶→縺励�1蟷ｴ髢薙�邱乗園螳壼感蜒肴凾髢薙′豎ｺ縺ｾ縺｣縺ｦ縺�↑縺��ｴ蜷医�謇螳壼感蜒肴凾髢薙′豎ｺ縺ｾ縺｣縺ｦ縺�ｋ譛滄俣縺ｫ縺翫￠繧�1譌･蟷ｳ蝮�園螳壼感蜒肴凾髢捺焚縺悟渕貅悶→縺ｪ繧翫∪縺吶�\n <br />\n <br />\n 縺ｾ縺溘�2譎る俣繧�3譎る俣縺ｨ縺�▲縺溘�1譎る俣莉･螟悶阪�譎る俣繧貞腰菴阪→縺励※譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧定ｨｭ螳壹☆繧句�ｴ蜷医�\n <span>蜉ｴ菴ｿ蜊泌ｮ壹↓縺ｦ縺昴�譌ｨ繧貞ｮ壹ａ繧�</span>\n 蠢�ｦ√′縺ゅｊ縺ｾ縺吶ゅ◎縺励※縲∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊縺ｫ縺､縺�※繧ゆｽｿ逕ｨ閠��譎ょｭ｣螟画峩讓ｩ縺ｮ蟇ｾ雎｡縺ｨ縺ｪ繧翫∪縺吶�\n <br />\n 豕ｨ諢冗せ縺ｨ縺励※縺ｯ蜉ｴ蜒崎�′譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧定ｫ区ｱゅ＠縺溷�ｴ蜷医↓譌･蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｫ螟画峩縺吶ｋ縺薙→繧�∵律蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧呈凾遏ｭ蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｫ螟画峩縺吶ｋ縺薙→縺ｯ譎ょｭ｣螟画峩縺ｫ縺ｯ縺ゅ◆繧峨★縲∬ｪ阪ａ繧峨ｌ縺ｾ縺帙ｓ縲�\n <br />\n 縺ｾ縺溘∝感菴ｿ蜊泌ｮ壹↓縺翫＞縺ｦ縲∽ｺ医ａ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞叙蠕励〒縺阪↑縺�凾髢灘ｸｯ繧貞ｮ壹ａ縺ｦ縺翫￥縺薙→縲∵園螳壼感蜒肴凾髢薙�騾比ｸｭ縺ｫ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞叙蠕励☆繧九％縺ｨ繧貞宛髯舌☆繧九％縺ｨ縲∝叙蠕励〒縺阪ｋ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｮ譎る俣謨ｰ繧貞宛髯舌☆繧九↑縺ｩ縺ｮ螳壹ａ繧りｪ阪ａ繧峨ｌ縺ｾ縺帙ｓ縲�\n <br />\n <br />\n 譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｨ險育判逧�ｻ倅ｸ弱�髢｢菫ゅ↓縺､縺�※縺ｯ縲∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊縺ｯ縺ゅ￥縺ｾ縺ｧ蜉ｴ蜒崎�′譎る俣蜊倅ｽ阪↓繧医ｋ譛臥ｵｦ莨第嚊縺ｮ蜿門ｾ励ｒ隲区ｱゅ＠縺溷�ｴ蜷医↓荳弱∴繧九％縺ｨ縺ｧ縺ｧ縺阪ｋ繧ゅ�縺ｧ縺ゅｊ縲∬ｨ育判逧�ｻ倅ｸ弱→縺励※譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧剃ｻ倅ｸ弱☆繧九％縺ｨ縺ｯ縺ｧ縺阪∪縺帙ｓ縲�\n </p>\n <ColumnRelationLink\n link={routePram}\n label=\"縺薙ｓ縺ｪ譎ゅ↓菴ｿ縺�◆縺�ｼ∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊縺ｮ豢ｻ逕ｨ莠倶ｾ九→豕ｨ諢丈ｺ矩��\"\n />\n <div id=\"toc5\">\n <h1>蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊</h1>\n </div>\n <p>\n 譛臥ｵｦ莨第嚊縺ｮ譖ｴ縺ｪ繧句叙蠕嶺ｿ�ｲ縺ｮ隕ｳ轤ｹ縺九ｉ蜉ｴ蜒崎�′蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞ｸ梧悍縺励∵凾蟄｣繧呈欠螳壹＠縲√°縺､縲∽ｽｿ逕ｨ閠�′蜷梧э縺励◆蝣ｴ蜷医〒縺ゅｊ縲∵悽譚･縺ｮ蜿門ｾ玲婿豕輔�髦ｻ螳ｳ縺ｨ縺ｪ繧峨↑縺�ｯ�峇縺ｧ驕ｩ蛻�↓驕狗畑縺輔ｌ繧九％縺ｨ繧貞燕謠舌→縺励※蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧剃ｻ倅ｸ弱＠縺ｦ繧ょ撫鬘後�縺ゅｊ縺ｾ縺帙ｓ縲ょｽ鍋┯縲∝感蜒崎�′譌･蜊倅ｽ阪〒譛臥ｵｦ莨第嚊繧呈欠螳壹＠縺ｦ縺�ｋ縺ｫ繧る未繧上ｉ縺壻ｽｿ逕ｨ閠�′蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧剃ｻ倅ｸ弱☆繧九％縺ｨ縺ｯ縺ｧ縺阪∪縺帙ｓ縲�\n <br />\n <br />\n 螳溷漁荳翫＠縺ｰ縺励�蝠城｡後↓縺ｪ繧矩Κ蛻�→縺励※縲∽ｾ九∴縺ｰ蝨滓屆譌･縺ｯ蜊頑律縺ｮ縺ｿ蜍､蜍吶�蜉ｴ蜒崎�′蝨滓屆譌･縺ｫ譛臥ｵｦ莨第嚊繧貞叙蠕励＠縺溷�ｴ蜷医�荳ｸ荳譌･蜃ｺ蜍､縺励◆蝣ｴ蜷医→蜷梧ｧ倥↓1蜉ｴ蜒肴律蛻��譛臥ｵｦ莨第嚊繧貞叙蠕励＠縺溘％縺ｨ縺ｫ縺ｪ繧翫∪縺吶ゅ＠縺九＠縲∝濠譌･蜊倅ｽ阪�蜿門ｾ励→縺励※蝨滓屆譌･縺ｫ2蝗樊怏邨ｦ莨第嚊繧貞叙蠕励＠縺溷�ｴ蜷医↓1譌･蛻��譛臥ｵｦ莨第嚊繧貞叙蠕励＠縺溘→縺吶ｋ縺薙→縺ｯ邱丞粋逧�↓蜉ｴ蜒崎��荳榊茜逶翫↓縺ｯ縺ｪ繧峨★縲∵ｳ輔ｒ荳雁屓繧句ｯｾ蠢懊〒縺ゅｋ縺薙→縺九ｉ驕墓ｳ輔→縺ｯ縺ｪ繧翫∪縺帙ｓ縲�\n </p>\n <div id=\"toc6\">\n <h1>蟷ｴ5譌･蜿門ｾ礼ｾｩ蜍吶↓縺翫￠繧句曙譁ｹ縺ｮ逡呎э轤ｹ</h1>\n </div>\n <p>\n 2019蟷ｴ縺ｮ謾ｹ豁｣蜉ｴ蜒榊渕貅匁ｳ輔↓繧医ｊ蟷ｴ10譌･莉･荳翫�譛臥ｵｦ莨第嚊縺御ｻ倅ｸ弱＆繧後ｋ蜉ｴ蜒崎�↓蟇ｾ縺励※縺ｯ縲∽ｻ倅ｸ弱＆繧後◆譌･縺九ｉ1蟷ｴ莉･蜀�↓5譌･縺ｮ譛臥ｵｦ莨第嚊繧剃ｻ倅ｸ弱☆繧九％縺ｨ縺梧ｱゅａ繧峨ｌ縺ｦ縺�∪縺吶ゆｸ�′荳5譌･莉倅ｸ弱☆繧九％縺ｨ縺後〒縺阪↑縺九▲縺溷�ｴ蜷医↓縺ｯ鄂ｰ蜑�ｂ險ｭ縺代ｉ繧後※縺翫ｊ縲�1莠ｺ縺ｫ縺､縺�30荳��莉･荳九�鄂ｰ驥代′豕募ｾ倶ｸ願ｦ丞ｮ壹＆繧後※縺�∪縺吶ゅ◎縺薙〒縲∵凾髢灘腰菴阪→蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞叙蠕励＠縺溷�ｴ蜷医�髢｢菫よｧ繧呈紛逅�＠縺ｾ縺励ｇ縺��\n <br />\n <br />\n 邨占ｫ悶→縺励※縺ｯ譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊繧貞叙蠕励＠縺ｦ繧ょ叙蠕励☆縺ｹ縺�5譌･縺ｮ荳ｭ縺ｫ蜷ｫ繧√ｋ縺薙→縺ｯ縺ｧ縺阪∪縺帙ｓ縺後―n <span>蜊頑律蜊倅ｽ阪�0.5譌･蛻�</span>縺ｨ縺励※蜷ｫ繧√ｋ縺薙→縺後〒縺阪∪縺吶�\n </p>\n <ColumnRelationLink\n link={routePram2}\n label=\"蟷ｴ谺｡譛臥ｵｦ莨第嚊縺ｨ縺ｯ�滉ｻ倅ｸ弱�譚｡莉ｶ繧�律謨ｰ縲∵凾譛溘↑縺ｩ繧定ｩｳ縺励￥隗｣隱ｬ\"\n />\n <ColumnRelationLink\n link={routePram3}\n label=\"譛臥ｵｦ莨第嚊縺ｮ蜿門ｾ礼ｾｩ蜍吝喧�∽ｼ∵･ｭ縺後☆繧九∋縺榊ｯｾ蠢懊ｄ繝昴う繝ｳ繝医→縺ｯ\"\n />\n <div id=\"toc7\">\n <h1 className=\"read\">譛蠕後↓</h1>\n </div>\n <p>\n 蜒阪″譁ｹ縺ｮ螟壽ｧ伜喧縺梧耳縺鈴ｲ繧√ｉ繧後ｋ迴ｾ莉｣縺ｫ縺翫＞縺ｦ縲∵律蜊倅ｽ阪ｈ繧翫ｂ繧縺励ｍ譎る俣蜊倅ｽ阪ｄ蜊頑律蜊倅ｽ阪�譁ｹ縺悟叙蠕嶺ｿ�ｲ縺ｫ郢九′繧九→縺�≧莨∵･ｭ繧ゅ≠繧九〒縺励ｇ縺�ら音縺ｫ蟷ｴ5譌･縺ｮ蜿門ｾ礼ｾｩ蜍吶↓縺ｯ鄂ｰ蜑�′險ｭ縺代ｉ繧後◆縺薙→繧ゅ≠繧翫∵凾髢灘腰菴阪→蜊頑律蜊倅ｽ阪�逶ｸ驕慕せ縺ｯ驥崎ｦ√↑隲也せ縺ｨ縺ｪ繧翫∪縺吶�\n <br />\n 縺励°縺励√◎繧御ｻ･蜑阪↓譛臥ｵｦ莨第嚊繧貞叙蠕励☆繧九％縺ｨ縺ｧ\n <span>蠢�ｺｫ縺ｮ繝ｪ繝輔Ξ繝�す繝･</span>\n 繧貞峙繧翫�<span>鬮倥＞蜉ｴ蜒咲函逕｣諤ｧ繧堤ｶｭ謖�</span>\n 縺吶ｋ縺溘ａ縺ｫ繧よ怏邨ｦ莨第嚊繧貞叙蠕励＠繧�☆縺�｢ｨ蝨溘▼縺上ｊ縺ｫ豕ｨ蜉帙＠縺ｦ縺�￥縺薙→縺碁㍾隕√〒縺吶�\n </p>\n </section>\n </Wrapper>\n )\n}\n\nexport default ColumnDetailInner0024\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 ColumnRelationCards0024 = () => {\n const routeParam = useRouteParam('/column/details/C0025/')\n return (\n <Wrapper>\n <ColumnH1 label=\"髢｢騾｣繧ｳ繝ｩ繝�\" />\n <section>\n <ColumnBtnCard\n href={routeParam}\n imgId=\"c0025.jpg\"\n label=\"縺薙ｓ縺ｪ譎ゅ↓菴ｿ縺�◆縺�ｼ∵凾髢灘腰菴阪�譛臥ｵｦ莨第嚊縺ｮ豢ｻ逕ｨ莠倶ｾ九→豕ｨ諢丈ｺ矩��\"\n date=\"2022.04.15\"\n />\n </section>\n </Wrapper>\n )\n}\n\nexport default ColumnRelationCards0024\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 usefulFunctionLayout024 = () => (\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>\n 繧ｷ繝輔ヨ陦ｨ繧�共蜍呵｡ｨ縺ｮ謠仙�譛滄剞繧定ｨｭ縺代◆繧翫∝推遞ｮ逕ｳ隲九�莠句燕/莠句ｾ後�蛻､螳壼渕貅悶ｒ險ｭ螳壹〒縺阪∪縺吶�\n </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/f025.jpg\"\n alt=\"繧ｭ繝ｳ繧ｯ繝ｩ縺ｮ繧｢繝ｩ繝ｼ繝育ｮ｡逅�\"\n />\n </div>\n </section>\n </Wrapper>\n)\n\nexport default usefulFunctionLayout024\n","import { graphql } from 'gatsby'\nimport React, { useEffect, useState } 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 ColumnDetailInner0024 from '../../../components/molecules/columnDetailInner0024'\nimport ColumnRelationCards0024 from '../../../components/molecules/columnRelationCards0024'\nimport UsefulFunctionLayout024 from '../../../components/molecules/usefulFunctionLayout024'\nimport ColumnDetailsBody from '../../../components/organisms/columnDetailsBody'\nimport ColumnLayout from '../../../components/organisms/columnLayout'\nimport Conclusion001 from '../../../components/molecules/Conclusion001'\nimport Conclusion004 from '../../../components/molecules/Conclusion004'\nimport Conclusion007 from '../../../components/molecules/Conclusion007'\nimport Conclusion002 from '../../../components/molecules/Conclusion002'\nimport Conclusion005 from '../../../components/molecules/Conclusion005'\nimport Conclusion008 from '../../../components/molecules/Conclusion008'\nimport Conclusion003 from '../../../components/molecules/Conclusion003'\nimport Conclusion006 from '../../../components/molecules/Conclusion006'\nimport Conclusion009 from '../../../components/molecules/Conclusion009'\nimport PopupBanner from '../../../components/molecules/popupBanner'\nimport CarouselBanner from '../../../components/molecules/carouselBanner'\nimport useRouteParam from '../../../hooks/useRouteParam'\n\n/**\n * 繧ｳ繝ｩ繝�險倅ｺ玖ｩｳ邏ｰ逕ｻ髱｢\n * @constructor\n */\nconst C0024 = () => {\n const paths: ITopicPath[] = [\n { title: '繧ｭ繝ｳ繧ｯ繝ｩ繧ｳ繝ｩ繝�TOP', link: useRouteParam('/column') },\n { title: '繧ｳ繝ｩ繝�險倅ｺ倶ｸ隕ｧ', link: useRouteParam('/column/list') },\n {\n title: '譎る俣譛臥ｵｦ縺ｨ蜊贋ｼ代↓縺､縺�※縲∝渕譛ｬ遏･隴倥ｒ隗｣隱ｬ縺励∪縺呻ｼ�',\n },\n ]\n // 0~8繝ｩ繝ｳ繝繝�謨ｰ蟄励ｒ菫晏ｭ禄n const [no, setNo] = useState(-1)\n useEffect(() => {\n setNo(Math.floor(Math.random() * 9))\n }, [])\n\n return (\n <ColumnLayout paths={paths}>\n <SEO\n title=\"譎る俣蜊倅ｽ阪→蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｨ縺ｯ�溷宛蠎ｦ蜀�ｮｹ縺ｨ蟆主�譁ｹ豕輔ｒ隗｣隱ｬ\"\n description=\"譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｯ縲∵ｳ募ｾ倶ｸ翫�5譌･莉･蜀�↓莉倅ｸ弱☆繧九％縺ｨ縺後〒縺阪∪縺吶ょ宛蠎ｦ蛹悶☆繧九↓縺ｯ蜉ｴ菴ｿ蜊泌ｮ壹�邱�邨舌′蠢�ｦ√→縺ｪ繧翫∪縺吶ゅ％縺ｮ繝壹�繧ｸ縺ｧ縺ｯ蝓ｺ遉守衍隴倥ｒ隗｣隱ｬ縺励∪縺吶�\"\n ogUrl=\"https://kintaicloud.jp/column/details/C0024/\"\n ogType=\"article\"\n ogTitle=\"譎る俣蜊倅ｽ阪→蜊頑律蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｨ縺ｯ�溷宛蠎ｦ蜀�ｮｹ縺ｨ蟆主�譁ｹ豕輔ｒ隗｣隱ｬ\"\n ogDescription=\"譎る俣蜊倅ｽ阪�譛臥ｵｦ莨第嚊縺ｯ縲∵ｳ募ｾ倶ｸ翫�5譌･莉･蜀�↓莉倅ｸ弱☆繧九％縺ｨ縺後〒縺阪∪縺吶ょ宛蠎ｦ蛹悶☆繧九↓縺ｯ蜉ｴ菴ｿ蜊泌ｮ壹�邱�邨舌′蠢�ｦ√→縺ｪ繧翫∪縺吶ゅ％縺ｮ繝壹�繧ｸ縺ｧ縺ｯ蝓ｺ遉守衍隴倥ｒ隗｣隱ｬ縺励∪縺吶�\"\n ogSiteName=\"繧ｭ繝ｳ繧ｯ繝ｩ - 螳｢蜈亥ｸｸ鬧千音蛹門梛縺ｮ繧ｯ繝ｩ繧ｦ繝牙共諤�邂｡逅�す繧ｹ繝�Β\"\n ogImage=\"https://www.kintaicloud.jp/images/column/details/c0024.jpg\"\n />\n <ColumnDetailsBody>\n {/** 繝昴ャ繝励い繝��繝舌リ繝ｼ */}\n <PopupBanner />\n {/** 險倅ｺ区悽菴� */}\n <ColumnDetailInner0024 no={no} />\n {/** 繧ｪ繝ｼ繧ｵ諠��ｱ */}\n <ColumnAuthor001 />\n\n {/** 縺薙％縺ｫ9繝代ち繝ｼ繝ｳ縺ｮ蠎�相險ｭ螳壹☆繧� */}\n {no === 0 && <Conclusion001 />}\n {no === 1 && <Conclusion002 />}\n {no === 2 && <Conclusion003 />}\n {no === 3 && <Conclusion004 />}\n {no === 4 && <Conclusion005 />}\n {no === 5 && <Conclusion006 />}\n {no === 6 && <Conclusion007 />}\n {no === 7 && <Conclusion008 />}\n {no === 8 && <Conclusion009 />}\n\n {/** 縺雁ｽｹ遶九■讖溯� */}\n <UsefulFunctionLayout024 />\n {/** 蜑榊ｾ瑚ｨ倅ｺ九∈縺ｮ驕ｷ遘ｻ */}\n <ColumnBackAndForth />\n {/** 繧ｫ繝ｫ繝ｼ繧ｻ繝ｫ繝舌リ繝ｼ */}\n <CarouselBanner />\n {/** 髢｢騾｣險倅ｺ� */}\n <ColumnRelationCards0024 />\n </ColumnDetailsBody>\n </ColumnLayout>\n )\n}\n\nexport default C0024\n\nexport const pageQuery = graphql`\n query C0024 {\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","target","rel","routePram","useRouteParam","link","useState","show","setShow","changeShow","window","pageYOffset","visible","setVisible","useEffect","addEventListener","removeEventListener","no","setNo","Math","floor","random","routeParam","routeParam2","style","visibility","onClick","routePram2","routePram3","id","Introduction004","Introduction005","Introduction006","Introduction007","Introduction008","Introduction009","Introduction010","Introduction011","Introduction012","paths","title","description","ogUrl","ogType","ogTitle","ogDescription","ogSiteName","ogImage","Conclusion001","Conclusion002","Conclusion003","Conclusion004","Conclusion005","Conclusion006","Conclusion007","Conclusion008","Conclusion009"],"sourceRoot":""}