= [\n 'margin',\n 'marginTop',\n 'marginRight',\n 'marginBottom',\n 'marginLeft',\n 'm',\n 'mt',\n 'mr',\n 'mb',\n 'ml',\n 'mx',\n 'my',\n];\n\nexport const margin = (props: MarginProps) => ({\n margin: props.margin || props.m,\n marginTop: props.marginTop || props.mt,\n marginRight: props.marginRight || props.mr,\n marginBottom: props.marginBottom || props.mb,\n marginLeft: props.marginLeft || props.ml,\n ...(props.mx\n ? {\n marginRight: props.mx,\n marginLeft: props.mx,\n }\n : {}),\n ...(props.my\n ? {\n marginTop: props.my,\n marginBottom: props.my,\n }\n : {}),\n});\n\nconst isMarginProps = (key: any): key is typeof MARGIN_PROPS[number] =>\n MARGIN_PROPS.includes(key as any);\n\nexport const extractMarginProps = (props: P) =>\n Object.keys(props).reduce((_props, propName) => {\n if (isMarginProps(propName)) {\n return {\n ..._props,\n [propName]: props[propName],\n };\n }\n return _props;\n }, {});\n","import { darken, lighten } from 'polished';\nimport styled from 'styled-components';\nimport { margin, MarginProps } from '../../styles';\nimport { AppTheme } from '../../../styles/theme';\n\ntype Props = MarginProps & {\n size?: 's' | 'm' | 'l';\n wide?: 's' | 'm' | 'l' | 'ml' | 'xl' | 'head';\n color?:\n | 'primary'\n | 'secondary'\n | 'white'\n | 'green'\n | 'purple'\n | 'pink'\n | 'yellow'\n | 'yellow-cv'\n | 'transparent';\n radius?: 'square' | 'rounded';\n fill?: boolean;\n whiteSpace?: 'nowrap' | 'inherit';\n disabled?: boolean;\n shadow?: keyof AppTheme['boxShadow'];\n};\n\nexport const Button = styled.button\n .attrs((props) => {\n return {\n type: props.type || 'button',\n };\n })\n .withConfig({\n shouldForwardProp: (propName, defaultValidatorFn) => {\n return !['fill'].includes(propName) && defaultValidatorFn(propName);\n },\n })`\n position: relative;\n appearance: none;\n display: inline-flex;\n align-items: center;\n border: 1px solid;\n border-color: transparent;\n justify-content: center;\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n outline: 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n cursor: pointer;\n user-select: none;\n ${margin};\n\n ${({ theme, size = 'm' }) => {\n switch (size) {\n case 's':\n return {\n fontSize: theme.fontSizes.s,\n };\n case 'm':\n return {\n fontSize: theme.fontSizes.m,\n };\n case 'l':\n return {\n fontSize: theme.fontSizes.xl,\n };\n }\n }}\n\n ${({ theme, wide = 'm' }) => {\n switch (wide) {\n case 's':\n return {\n padding: `${theme.spaces.m} ${theme.spaces.l}`,\n };\n case 'm':\n return {\n padding: `${theme.spaces.m} ${theme.spaces.xl}`,\n };\n case 'ml':\n return {\n padding: `${theme.spaces.m} ${theme.spaces.xxxl}`,\n };\n case 'l':\n return {\n padding: `${theme.spaces.l} ${theme.spaces.xxxl}`,\n };\n case 'xl':\n return {\n padding: `${theme.spaces.xl} ${theme.spaces.xxxl}`,\n };\n case 'head':\n return {\n padding: `12px ${theme.spaces.xl}`,\n };\n }\n }}\n\n ${({ theme, color = 'primary' }) => {\n switch (color) {\n case 'primary':\n return {\n borderColor: theme.borderColors.primary,\n backgroundColor: theme.backgroundColors.primary,\n color: theme.fontColors.white,\n boxShadow: theme.boxShadow.blue,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.03, theme.backgroundColors.primary),\n },\n };\n case 'secondary':\n return {\n borderColor: theme.borderColors.white,\n backgroundColor: theme.backgroundColors.white,\n color: theme.fontColors.primary,\n boxShadow: theme.boxShadow.base,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: lighten(0.3, theme.backgroundColors.blue),\n },\n };\n case 'pink':\n return {\n borderColor: theme.borderColors.secondary,\n backgroundColor: theme.backgroundColors.secondary,\n color: theme.fontColors.white,\n boxShadow: theme.boxShadow.pink,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.03, theme.backgroundColors.secondary),\n },\n };\n case 'white':\n return {\n borderColor: theme.borderColors.default,\n backgroundColor: theme.backgroundColors.white,\n color: theme.fontColors.default,\n };\n case 'green':\n return {\n borderColor: theme.borderColors.green,\n backgroundColor: theme.backgroundColors.green,\n color: theme.fontColors.white,\n boxShadow: theme.boxShadow.green,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.03, theme.backgroundColors.green),\n },\n };\n case 'purple':\n return {\n borderColor: theme.borderColors.purple,\n backgroundColor: theme.backgroundColors.purple,\n color: theme.fontColors.white,\n boxShadow: theme.boxShadow.purple,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.03, theme.backgroundColors.purple),\n },\n };\n case 'yellow':\n return {\n borderColor: theme.borderColors.yellow,\n backgroundColor: theme.backgroundColors.yellow,\n color: theme.fontColors.brown,\n boxShadow: theme.boxShadow.base,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.05, theme.backgroundColors.yellow),\n },\n };\n case 'yellow-cv':\n return {\n border: `2px solid ${theme.borderColors.white}`,\n backgroundColor: theme.backgroundColors.yellow,\n color: theme.fontColors.brown,\n boxShadow: theme.boxShadow.base,\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.05, theme.backgroundColors.yellow),\n },\n };\n case 'transparent':\n return {\n border: 'none',\n backgroundColor: theme.backgroundColors.transparent,\n color: theme.fontColors.default,\n boxShadow: 'none',\n '&:hover, &:focus': {\n boxShadow: theme.boxShadow.hover,\n transform: 'translateY(1px)',\n backgroundColor: darken(0.05, theme.backgroundColors.default),\n },\n };\n }\n }}\n\n ${({ theme, radius = 'square' }) => {\n switch (radius) {\n case 'square':\n return {\n borderRadius: theme.radii.s,\n };\n case 'rounded':\n return {\n borderRadius: theme.radii.rounded,\n };\n }\n }}\n\n ${({ fill = false }) => {\n if (fill) {\n return {\n width: '100%',\n };\n }\n }}\n\n ${({ whiteSpace = 'inherit' }) => {\n if (whiteSpace) {\n return {\n whiteSpace: (whiteSpace = 'nowrap' ? 'nowrap' : 'inherit'),\n };\n }\n }}\n\n ${({ theme, disabled = false }) => {\n if (disabled) {\n return {\n backgroundColor: theme.backgroundColors.disabled,\n color: theme.fontColors.white,\n pointerEvents: 'none',\n boxShadow: 'none',\n borderColor: 'transparent',\n userSelect: 'none',\n };\n }\n }}\n\n box-shadow: ${({ theme, shadow }) => shadow && theme.boxShadow[shadow]};\n`;\n","import { CSSProperties } from 'styled-components';\n\nexport type PaddingProps = {\n padding?: CSSProperties['padding'];\n p?: CSSProperties['padding'];\n paddingTop?: CSSProperties['paddingTop'];\n pt?: CSSProperties['paddingTop'];\n paddingRight?: CSSProperties['paddingRight'];\n pr?: CSSProperties['paddingRight'];\n paddingBottom?: CSSProperties['paddingBottom'];\n pb?: CSSProperties['paddingBottom'];\n paddingLeft?: CSSProperties['paddingLeft'];\n pl?: CSSProperties['paddingLeft'];\n px?: CSSProperties['margin'];\n py?: CSSProperties['margin'];\n};\n\nconst PADDING_PROPS: ReadonlyArray = [\n 'padding',\n 'paddingTop',\n 'paddingRight',\n 'paddingBottom',\n 'paddingLeft',\n 'p',\n 'pt',\n 'pr',\n 'pb',\n 'pl',\n 'px',\n 'py',\n];\n\nexport const padding = (props: PaddingProps) => ({\n padding: props.padding || props.p,\n paddingTop: props.paddingTop || props.pt,\n paddingRight: props.paddingRight || props.pr,\n paddingBottom: props.paddingBottom || props.pb,\n paddingLeft: props.paddingLeft || props.pl,\n ...(props.px\n ? {\n paddingRight: props.px,\n paddingLeft: props.px,\n }\n : {}),\n ...(props.py\n ? {\n paddingTop: props.py,\n paddingBottom: props.py,\n }\n : {}),\n});\n\nconst isPaddingProps = (key: any): key is typeof PADDING_PROPS[number] =>\n PADDING_PROPS.includes(key as any);\n\nexport const extractPaddingProps = (props: P) =>\n Object.keys(props).reduce((_props, propName) => {\n if (isPaddingProps(propName)) {\n return {\n ..._props,\n [propName]: props[propName],\n };\n }\n return _props;\n }, {});\n","import { CSSProperties } from 'styled-components';\n\nexport type RectProps = {\n width?: CSSProperties['width'];\n minWidth?: CSSProperties['minWidth'];\n maxWidth?: CSSProperties['maxWidth'];\n height?: CSSProperties['height'];\n minHeight?: CSSProperties['minHeight'];\n maxHeight?: CSSProperties['maxHeight'];\n};\n\nexport const RECT_PROPS: ReadonlyArray = [\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n];\n\nexport const rect = (props: RectProps) => ({\n width: props.width,\n minWidth: props.minWidth,\n maxWidth: props.maxWidth,\n height: props.height,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n});\n\nconst isRectProps = (key: any): key is typeof RECT_PROPS[number] =>\n RECT_PROPS.includes(key as any);\n\nexport const extractRectProps = (props: P) =>\n Object.keys(props).reduce((_props, propName) => {\n if (isRectProps(propName)) {\n return {\n ..._props,\n [propName]: props[propName],\n };\n }\n return _props;\n }, {});\n","import { CSSProperties } from 'styled-components';\n\nexport type GapProps = {\n gap?: CSSProperties['gap'];\n rowGap?: CSSProperties['rowGap'];\n columnGap?: CSSProperties['columnGap'];\n};\n\nexport const gap = (props: GapProps) => ({\n gap: props.gap,\n rowGap: props.rowGap,\n columnGap: props.columnGap,\n});\n","import styled, { CSSProperties } from 'styled-components';\n\nimport {\n margin,\n MarginProps,\n gap,\n GapProps,\n padding,\n PaddingProps,\n rect,\n RectProps,\n} from '../../../components/styles';\nimport { AppTheme } from '../../../styles/theme';\n\nexport const Box = styled.div<\n MarginProps &\n GapProps &\n PaddingProps &\n RectProps & {\n flex?: CSSProperties['flex'];\n overflow?: CSSProperties['overflow'];\n order?: CSSProperties['order'];\n background?: keyof AppTheme['backgroundColors'];\n radii?: keyof AppTheme['radii'];\n }\n>`\n position: relative;\n flex: ${({ flex }) => flex};\n overflow: ${({ overflow }) => overflow};\n order: ${({ order }) => order};\n background: ${({ theme, background }) =>\n background && theme.backgroundColors[background]};\n border-radius: ${({ theme, radii }) => radii && theme.radii[radii]};\n ${margin};\n ${padding};\n ${rect};\n ${gap};\n`;\n\nBox.displayName = 'Box';\n","import styled from 'styled-components';\n\ntype Props = {\n sponly?: boolean;\n};\n\nexport const Br = styled.br`\n ${({ theme, sponly }) => {\n return {\n ...theme.screen.sp({\n display: sponly ? 'block' : 'none',\n }),\n ...theme.screen.pc({\n display: sponly ? 'none' : 'block',\n }),\n };\n }}\n`;\n","import { CSSProperties } from 'styled-components';\n\nexport type FlexProps = {\n alignItems?: CSSProperties['alignItems'];\n alignContent?: CSSProperties['alignContent'];\n justifyItems?: CSSProperties['justifyItems'];\n justifyContent?: CSSProperties['justifyContent'];\n flexWrap?: CSSProperties['flexWrap'];\n flexDirection?: CSSProperties['flexDirection'];\n flex?: CSSProperties['flex'];\n flexGrow?: CSSProperties['flexGrow'];\n flexShrink?: CSSProperties['flexShrink'];\n flexBasis?: CSSProperties['flexBasis'];\n justifySelf?: CSSProperties['justifySelf'];\n alignSelf?: CSSProperties['alignSelf'];\n order?: CSSProperties['order'];\n};\n\nexport const flex = (props: FlexProps) => ({\n alignItems: props.alignItems || 'center',\n alignContent: props.alignContent || 'flex-start',\n justifyItems: props.justifyItems,\n justifyContent: props.justifyContent,\n flexWrap: props.flexWrap,\n flexDirection: props.flexDirection,\n flex: props.flex,\n flexGrow: props.flexGrow,\n flexShrink: props.flexShrink,\n flexBasis: props.flexBasis,\n justifySelf: props.justifySelf,\n alignSelf: props.alignSelf,\n order: props.order,\n});\n","import styled, { CSSProperties } from 'styled-components';\n\nimport {\n flex,\n FlexProps,\n gap,\n GapProps,\n margin,\n MarginProps,\n padding,\n PaddingProps,\n rect,\n RectProps,\n} from '../../../components/styles';\n\ntype Props = FlexProps &\n MarginProps &\n PaddingProps &\n GapProps &\n RectProps & {\n overflow?: CSSProperties['overflow'];\n order?: CSSProperties['order'];\n sp?: 'column' | 'row';\n };\n\nexport const Flex = styled.div`\n display: flex;\n overflow: ${({ overflow }) => overflow};\n order: ${({ order }) => order};\n ${flex};\n ${margin};\n ${padding};\n ${gap};\n ${rect};\n\n ${({ theme, sp }) => {\n return {\n ...theme.screen.sp({\n flexDirection: sp == 'column' ? 'column' : sp == 'row' ? 'row' : null,\n }),\n };\n }})\n`;\n","import * as React from 'react';\nimport { Link } from 'gatsby';\nimport { ImgixGatsbyImage } from '@imgix/gatsby';\nimport styled, { useTheme } from 'styled-components';\n\nimport { margin, MarginProps } from '../../../components/styles';\nimport { Anchor, Flex, CardBox, Text, Tag } from '../../../components/blocks';\n\nimport { Blog } from '../../../@types/blog';\nimport Sample from '../../../images/sample.png';\n\ntype Props = MarginProps & {\n lists?: Blog.BlogData;\n title?: string;\n fill?: boolean;\n};\n\nconst CaseList = styled.div`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: 0 auto;\n gap: ${({ theme }) => theme.spaces.xl};\n\n ${({ theme }) =>\n theme.screen.min({\n gridTemplateColumns: '1fr',\n gap: theme.spaces.xxxl,\n })}\n`;\n\nconst CoverImg = styled(ImgixGatsbyImage)`\n width: 100%;\n height: auto;\n`;\n\nconst Root = styled(Flex)`\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.xxl};\n padding: ${({ theme, fill }) =>\n fill && `${theme.spaces.xxxl} ${theme.spaces.xl}`};\n background-color: ${({ theme, fill }) =>\n fill ? theme.backgroundColors.default : 'none'};\n ${margin}\n`;\n\nexport const Case: React.FC = ({ lists, title, fill }) => {\n const { allMicrocmsBlog } = lists;\n const theme = useTheme();\n\n return (\n \n \n {title}\n \n \n {allMicrocmsBlog.edges.map(\n ({ node }: { node: Blog.MicrocmsBlog }, i) => (\n \n \n \n {node.key_visual ? (\n \n ) : (\n \n )}\n \n \n \n \n {node.publishedAt}\n \n \n {node.title}\n \n \n {node.tags.map((tag: string) => (\n \n {tag}\n \n ))}\n {node.category_case.map((category: string, i) => (\n \n {category}\n \n ))}\n \n \n \n \n \n ),\n )}\n \n \n 他の導入事例を見る\n \n \n );\n};\n","import styled from 'styled-components';\nimport { Flex } from '../../../components/blocks';\nimport { AppTheme } from '../../../styles/theme';\n\ntype Props = {\n border?: keyof AppTheme['borderColors'];\n radii?: keyof AppTheme['radii'];\n bgColor?: keyof AppTheme['backgroundColors'];\n shadow?: keyof AppTheme['boxShadow'];\n};\n\nexport const Card = styled(Flex)`\n background: ${({ theme, bgColor }) =>\n bgColor && theme.backgroundColors[bgColor]};\n box-shadow: ${({ theme, shadow }) => shadow && theme.boxShadow[shadow]};\n border: 1px solid\n ${({ theme, border }) =>\n border ? theme.borderColors[border] : theme.borderColors.default};\n border-radius: ${({ theme, radii }) => radii && theme.radii[radii]};\n`;\n","import styled from 'styled-components';\nimport { Flex } from '../../../components/blocks';\n\ntype Props = {\n nolink?: boolean;\n};\n\nconst Img = styled.div`\n width: 100%;\n max-height: 194px;\n background: ${({ theme }) => theme.backgroundColors.primary};\n overflow: hidden;\n border-bottom: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => `${theme.radii.m} ${theme.radii.m}`} 0 0;\n\n ${({ theme }) =>\n theme.screen.min({\n maxHeight: '245px',\n })}\n\n img {\n object-fit: cover;\n border-radius: ${({ theme }) => `${theme.radii.m} ${theme.radii.m}`} 0 0;\n }\n`;\n\nconst Contents = styled.div`\n padding: ${({ theme }) => theme.spaces.l};\n`;\n\nconst Root = styled(Flex)`\n align-items: flex-start;\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.m};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n\n &:hover {\n transform: ${({ nolink }) => (nolink ? 'inherit' : 'translateY(-1px)')};\n }\n\n a {\n width: 100%;\n height: 100%;\n border-radius: ${({ theme }) => theme.radii.m};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n background-color: ${({ theme }) => theme.backgroundColors.white};\n\n &:hover {\n box-shadow: ${({ theme, nolink }) =>\n nolink ? 'inherit' : theme.boxShadow.hover2};\n }\n }\n`;\n\nexport const CardBox = Object.assign(Root, { Img, Contents });\n","import styled, { CSSProperties } from 'styled-components';\n\ntype Props = {\n color?: 'green' | 'primary' | 'purple' | 'pink';\n};\n\nexport const Check = styled.div`\n position: relative;\n display: block;\n justify-content: space-between;\n width: 20px;\n height: 20px;\n transform: rotate(-45deg) translateY(-3px) translateX(3px);\n\n &:before {\n content: '';\n display: inline-block;\n width: 2px;\n height: 10px;\n border-radius: ${({ theme }) => theme.radii.rounded};\n\n ${({ theme, color = 'primary' }) => {\n switch (color) {\n case 'green':\n return {\n backgroundColor: theme.backgroundColors.green,\n };\n case 'primary':\n return {\n backgroundColor: theme.backgroundColors.primary,\n };\n case 'purple':\n return {\n backgroundColor: theme.backgroundColors.purple,\n };\n case 'pink':\n return {\n backgroundColor: theme.backgroundColors.secondary,\n };\n }\n }}\n }\n\n &:after {\n content: '';\n display: inline-block;\n width: 14px;\n height: 2px;\n border-radius: ${({ theme }) =>\n `0 ${theme.radii.rounded} ${theme.radii.rounded} 0`};\n\n ${({ theme, color = 'primary' }) => {\n switch (color) {\n case 'green':\n return {\n backgroundColor: theme.backgroundColors.green,\n };\n case 'primary':\n return {\n backgroundColor: theme.backgroundColors.primary,\n };\n case 'purple':\n return {\n backgroundColor: theme.backgroundColors.purple,\n };\n case 'pink':\n return {\n backgroundColor: theme.backgroundColors.secondary,\n };\n }\n }}\n }\n`;\n","import styled, { CSSProperties } from 'styled-components';\n\ntype Props = {\n appearance?: 'border';\n};\n\nconst Root = styled.dl`\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: ${({ theme }) => `${theme.spaces.l} ${theme.spaces.m}`};\n border-bottom: ${({ theme, appearance }) =>\n appearance === 'border'\n ? `1px solid ${theme.borderColors.default}`\n : 'none'};\n`;\n\nconst Title = styled.dt``;\n\nconst Comment = styled.dd``;\n\nexport const CheckList = Object.assign(Root, { Title, Comment });\n","import styled, { CSSProperties } from 'styled-components';\n\nimport {\n margin,\n MarginProps,\n flex,\n FlexProps,\n gap,\n GapProps,\n rect,\n RectProps,\n} from '../../../components/styles';\n\ntype Props = {\n column?: 'two' | 'three';\n};\n\nconst Root = styled.div`\n display: grid;\n gap: ${({ theme }) => theme.spaces.xxl};\n grid-template-columns: ${({ column }) =>\n column == 'two' ? `repeat(2, 1fr)` : `repeat(3, 1fr)`};\n justify-content: space-between;\n flex-wrap: wrap;\n ${margin};\n ${flex};\n ${gap};\n ${rect};\n\n ${({ theme }) =>\n theme.screen.sp({\n gridTemplateColumns: '1fr',\n })}\n`;\n\nconst Item = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: ${({ theme }) => theme.spaces.l};\n`;\n\nexport const Columns = Object.assign(Root, { Item });\n","import styled, { CSSProperties } from 'styled-components';\n\ntype Props = {\n appearance?: 'blue' | 'green' | 'grey';\n};\n\nconst Title = styled.h3`\n margin: 0;\n padding: ${({ theme }) => theme.spaces.xl};\n color: ${({ theme }) => theme.fontColors.white};\n text-align: center;\n border-radius: ${({ theme }) => `${theme.radii.l} ${theme.radii.l}`} 0 0;\n`;\n\nconst Contents = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.l};\n padding: ${({ theme }) => theme.spaces.xl};\n border-radius: 0 0 ${({ theme }) => `${theme.radii.l} ${theme.radii.l}`};\n`;\n\nconst Root = styled.div`\n background: ${({ theme }) => theme.backgroundColors.default};\n border-radius: ${({ theme }) => theme.radii.l};\n box-shadow: ${({ theme }) => theme.boxShadow.base};\n height: 100%;\n\n ${Title} {\n background: ${({ theme, appearance }) =>\n appearance == 'blue'\n ? theme.backgroundColors.primary\n : appearance == 'green'\n ? theme.backgroundColors.green\n : theme.backgroundColors.lightgrey};\n }\n`;\n\nexport const Compare = Object.assign(Root, { Title, Contents });\n","import React from 'react';\nimport { darken } from 'polished';\nimport styled, { useTheme } from 'styled-components';\nimport scrollTo from 'gatsby-plugin-smoothscroll';\n\nimport { Anchor, Button, Flex, Text } from '../../../components/blocks';\n\nimport OnlineView from '../../../images/icon/online-view.svg';\nimport Mail from '../../../images/icon/mail.svg';\n\ntype Props = {\n green?: boolean;\n fill?: boolean;\n inquirytitle?: string;\n onlinetitle?: string;\n};\n\nconst Explanation = styled.div<{ green?: boolean }>`\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n top: -12px;\n width: fit-content;\n padding: ${({ theme }) => `${theme.spaces.xs} ${theme.spaces.l}`};\n background-color: ${({ theme, green }) =>\n green\n ? darken(0.08, theme.backgroundColors.green)\n : darken(0.15, theme.fontColors.yellow)};\n font-size: ${({ theme }) => theme.fontSizes.s};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme, green }) =>\n green ? theme.fontColors.white : theme.fontColors.white};\n border-radius: ${({ theme }) => theme.radii.rounded};\n box-shadow: ${({ theme, green }) =>\n green ? theme.boxShadow.base : theme.boxShadow.base};\n\n :after {\n position: absolute;\n bottom: -16px;\n content: '';\n border: 8px solid transparent;\n border-top: 8px solid\n ${({ theme, green }) =>\n green\n ? darken(0.08, theme.backgroundColors.green)\n : darken(0.15, theme.fontColors.yellow)};\n }\n`;\n\nconst Root = styled.div<{ fill?: boolean }>`\n display: flex;\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.xl};\n width: ${({ fill }) => (fill ? '100%' : 'auto')};\n`;\n\nexport const CVButton: React.FC = (props) => {\n const theme = useTheme();\n\n return (\n \n scrollTo('#inquiry')}\n >\n \n {props.inquirytitle ? props.inquirytitle : '3分でDentisがわかる'}\n \n \n \n \n 資料請求・お問い合わせ\n \n \n \n \n \n {props.onlinetitle ? props.onlinetitle : 'オンラインデモ実施中'}\n \n \n \n \n 無料オンラインデモ\n \n \n \n \n );\n};\n","import React, { useState, useEffect } from 'react';\nimport { rgba, darken } from 'polished';\nimport styled, { useTheme, keyframes } from 'styled-components';\nimport scrollTo from 'gatsby-plugin-smoothscroll';\n\nimport { Anchor, Button, Flex, Text } from '../../../components/blocks';\n\nimport OnlineView from '../../../images/icon/online-view.svg';\nimport Mail from '../../../images/icon/mail.svg';\n\ntype Props = {\n startY?: number;\n endY?: number | null;\n active?: boolean;\n green?: boolean;\n inquirytitle?: string;\n onlinetitle?: string;\n};\n\nconst Explanation = styled.div<{ green?: boolean }>`\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n top: -14px;\n width: fit-content;\n padding: ${({ theme }) => `${theme.spaces.s} ${theme.spaces.m}`};\n background-color: ${({ theme, green }) =>\n green\n ? darken(0.08, theme.backgroundColors.green)\n : darken(0.15, theme.fontColors.yellow)};\n font-size: ${({ theme }) => theme.fontSizes.xs};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme, green }) =>\n green ? theme.fontColors.white : theme.fontColors.white};\n border-radius: ${({ theme }) => theme.radii.rounded};\n box-shadow: ${({ theme, green }) =>\n green ? theme.boxShadow.base : theme.boxShadow.base};\n\n :after {\n position: absolute;\n bottom: -16px;\n content: '';\n border: 8px solid transparent;\n border-top: 8px solid\n ${({ theme, green }) =>\n green\n ? darken(0.08, theme.backgroundColors.green)\n : darken(0.15, theme.fontColors.yellow)};\n }\n`;\n\nconst SlideIn = keyframes`\n 0% {\n transform: translateY(100vh);\n }\n 100% {\n transform: translateY(0vh);\n }\n`;\n\nconst BottomButton = styled(Button)`\n flex: 1;\n padding-left: ${({ theme }) => theme.spaces.xs};\n padding-right: ${({ theme }) => theme.spaces.xs};\n`;\n\nconst BottomAnchor = styled(Anchor)`\n flex: 1;\n padding-left: ${({ theme }) => theme.spaces.xs};\n padding-right: ${({ theme }) => theme.spaces.xs};\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n gap: ${({ theme }) => theme.spaces.s};\n width: 100%;\n max-width: ${({ theme }) => theme.windowSizes.s};\n margin: auto;\n`;\n\nconst Root = styled.div`\n position: fixed;\n bottom: 0;\n width: 100%;\n padding: ${({ theme }) => `${theme.spaces.l} ${theme.spaces.s}`};\n background-color: ${({ theme }) =>\n rgba(theme.backgroundColors.jetblack, 0.2)};\n backdrop-filter: blur(2px);\n transform: translateY(100vh);\n\n &.active {\n animation: ${SlideIn} 1s ease-in-out 1;\n animation-fill-mode: forwards;\n animation-delay: 0.5s;\n }\n`;\n\nexport const CVButtonBottom: React.FC = (props) => {\n const theme = useTheme();\n\n // スクロール位置を管理するstate\n const [scrollPosition, setScrollPosition] = useState(0);\n // 特定の範囲内にスクロールしたかどうかを管理するstate\n const [isInScrollRange, setIsInScrollRange] = useState(false);\n // closeボタンがクリックされたかを管理するstate\n const [isClosed, setIsClosed] = useState(false);\n\n // スクロールイベントのリスナーを追加\n useEffect(() => {\n const handleScroll = () => {\n // closeボタンがクリックされたら何もしない\n if (isClosed) {\n return;\n }\n\n // 現在のスクロール位置を取得\n const currentPosition = window.scrollY;\n\n // 特定の範囲内にスクロールしたら状態を変更\n if (currentPosition >= props.startY && currentPosition <= props.endY) {\n setIsInScrollRange(true);\n } else {\n setIsInScrollRange(false);\n }\n\n // スクロール位置をstateに更新\n setScrollPosition(currentPosition);\n };\n\n // スクロールイベントをリスナーに追加\n window.addEventListener('scroll', handleScroll);\n\n // コンポーネントがアンマウントされるときにイベントリスナーを削除\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, [props.endY, isClosed]); // isClosedを依存配列に追加\n\n // closeボタンがクリックされたときの処理\n const handleCloseClick = () => {\n setIsClosed(true);\n };\n\n return (\n <>\n \n \n \n \n \n );\n};\n","import styled, { CSSProperties } from 'styled-components';\n\ntype Props = {\n fit?: boolean;\n};\n\nconst Root = styled.div`\n margin-bottom: ${({ theme, fit }) => (fit ? 0 : theme.spaces.xxl)};\n padding: ${({ theme }) =>\n `${theme.spaces.xxxxl} ${theme.spaces.xxl} ${theme.spaces.ex}`};\n border-radius: ${({ theme, fit }) =>\n fit ? `${theme.radii.m} ${theme.radii.m} 0 0` : theme.radii.m};\n\n background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2236%22%20height%3D%2230%22%20viewBox%3D%220%200%2036%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.0824%200H8.4519V8.61347H15.052V5.95765H19.0824C24.4658%205.95765%2028.1229%209.68657%2028.1229%2015.0018V15.0736C28.1229%2020.3924%2024.4801%2024.0459%2019.0824%2024.0459H15.052V21.3758H8.4519V29.9892H19.0824C28.5105%2029.9892%2035.0245%2023.4322%2035.0245%2014.991V14.9049C35.0245%206.4601%2028.5105%200%2019.0824%200Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M19.0824%200H8.4519V8.61347H15.052V5.95765H19.0824C24.4658%205.95765%2028.1229%209.68657%2028.1229%2015.0018V15.0736C28.1229%2020.3924%2024.4801%2024.0459%2019.0824%2024.0459H15.052V21.3758H8.4519V29.9892H19.0824C28.5105%2029.9892%2035.0245%2023.4322%2035.0245%2014.991V14.9049C35.0245%206.4601%2028.5105%200%2019.0824%200Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M15.052%2011.8579V18.1457H2.03489C1.4952%2018.1457%200.977602%2017.9313%200.595978%2017.5497C0.214354%2017.1681%20-4.03834e-05%2016.6505%20-4.03834e-05%2016.1108V13.8928C-4.03834e-05%2013.3531%200.214354%2012.8355%200.595978%2012.4539C0.977602%2012.0723%201.4952%2011.8579%202.03489%2011.8579H15.052V11.8579Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;\n\n background-size: 600px;\n background-position: right;\n background-color: ${({ theme }) => theme.backgroundColors.blue};\n background-blend-mode: soft-light;\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `${theme.spaces.xxxl} ${theme.spaces.xl}`,\n })}\n}\n`;\n\nconst Wrapper = styled.div`\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: 0 auto;\n`;\n\nconst Title = styled.h1`\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.xxxl};\n line-height: ${({ theme }) => theme.lineHeights.l};\n`;\n\nconst Description = styled.p`\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n line-height: ${({ theme }) => theme.lineHeights.m};\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: theme.fontSizes.s,\n })}\n`;\n\nexport const Heading = Object.assign(Root, { Wrapper, Title, Description });\n","import * as React from 'react';\nimport LogoColor from '../../../images/logo_white.svg';\nimport LogoWhite from '../../../images/logo.svg';\nimport { CSSProperties } from 'styled-components';\n\ntype Props = {\n color: 'default' | 'white';\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n};\n\nexport const Logo: React.VFC = (props) => {\n return props.color === 'white' ? (\n \n ) : (\n \n );\n};\n","import * as React from 'react';\nimport { rgba } from 'polished';\nimport styled, { CSSProperties, keyframes } from 'styled-components';\n\ntype RootProps = {\n width?: CSSProperties['width'];\n};\n\ntype Props = {\n isOpen: boolean;\n width?: CSSProperties['width'];\n onClose: () => void;\n children: React.ReactNode;\n};\n\n/* --- アニメーションの追加 --- */\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nconst slideUp = keyframes`\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n`;\n\nconst slideDown = keyframes`\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n`;\n\nconst Root = styled.div`\n position: relative;\n z-index: 2;\n background-color: ${({ theme }) => theme.backgroundColors.white};\n border-radius: ${({ theme }) => theme.radii.l};\n box-shadow: ${({ theme }) => theme.boxShadow.nav};\n animation: ${({ isClosing }) => (isClosing ? slideDown : slideUp)} 0.4s ease\n forwards;\n width: ${({ width }) => (width ? [width] : '640px')};\n max-width: calc(100vw - 48px);\n max-height: 90vh;\n max-height: 90svh;\n overscroll-behavior: none;\n overflow: auto;\n cursor: auto;\n`;\n\nconst Overlay = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n display: flex;\n z-index: 1000;\n align-items: center;\n justify-content: center;\n background-color: ${({ theme }) => rgba(theme.backgroundColors.black, 0.2)};\n backdrop-filter: blur(4px);\n animation: ${({ isClosing }) => (isClosing ? fadeOut : fadeIn)} 0.3s ease\n forwards;\n`;\n\nconst CloseButton = styled.button`\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n background-color: ${({ theme }) => theme.backgroundColors.white};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.circle};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n cursor: pointer;\n\n &:hover {\n background-color: ${({ theme }) => theme.backgroundColors.default};\n }\n`;\n\nconst CloseIcon = styled.i`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n rotate: 45deg;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n\n width: 16px;\n height: 2px;\n background-color: ${({ theme }) => theme.borderColors.black};\n }\n\n &:before {\n width: 2px;\n height: 16px;\n translate: 45deg;\n }\n &:after {\n translate: 135deg;\n }\n`;\n\nconst ModalHeader = styled.div`\n position: sticky;\n top: 0;\n width: 100%;\n`;\n\nexport const Modal: React.FC = (props) => {\n const [isClosing, setIsClosing] = React.useState(false);\n\n const handleClose = () => {\n setIsClosing(true);\n setTimeout(() => {\n setIsClosing(false);\n props.onClose();\n }, 400);\n };\n\n if (!props.isOpen && !isClosing) return null;\n\n return (\n \n e.stopPropagation()}\n >\n \n \n \n \n \n {props.children}\n \n \n );\n};\n","import styled, { CSSProperties } from 'styled-components';\n\nconst Root = styled.div`\n width: 100%;\n margin-bottom: ${({ theme }) => theme.spaces.xxl};\n background: ${({ theme }) => theme.backgroundColors.white};\n box-shadow: ${({ theme }) => theme.boxShadow.base};\n`;\n\nconst List = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n`;\n\nconst Item = styled.li`\n margin: 0;\n padding: ${({ theme }) => theme.spaces.xl};\n cursor: pointer;\n\n &:hover {\n box-shadow: inset 0 -2px 0 ${({ theme }) => theme.borderColors.primary};\n }\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: theme.fontSizes.xs,\n padding: `${theme.spaces.xl} ${theme.spaces.m}`,\n })}\n`;\n\nexport const Nav = Object.assign(Root, {\n List,\n Item,\n});\n","import styled from 'styled-components';\n\nimport {\n margin,\n MarginProps,\n padding,\n PaddingProps,\n rect,\n RectProps,\n} from '../../../components/styles';\nimport { AppTheme } from '../../../styles/theme';\n\nexport const Img = styled.img<\n MarginProps &\n PaddingProps &\n RectProps & {\n radii?: keyof AppTheme['radii'];\n boxShadow?: keyof AppTheme['boxShadow'];\n }\n>`\n border-radius: ${({ theme, radii }) => radii && theme.radii[radii]};\n box-shadow: ${({ theme, boxShadow }) =>\n boxShadow && theme.boxShadow[boxShadow]};\n ${margin};\n ${padding};\n ${rect};\n`;\n","import * as React from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport { Text } from '../../../components/blocks';\n\ntype Props = {\n img?: string;\n name?: string;\n description?: string;\n};\n\nconst Root = styled.div`\n display: flex;\n gap: ${({ theme }) => theme.spaces.l};\n padding: ${({ theme }) => theme.spaces.l};\n border: 2px solid ${({ theme }) => theme.borderColors.default};\n background-color: ${({ theme }) => theme.backgroundColors.white};\n margin-bottom: ${({ theme }) => theme.spaces.xl};\n`;\n\nconst Info = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: ${({ theme }) => theme.spaces.s};\n`;\n\nconst Img = styled.div`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 64px;\n height: 64px;\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.circle};\n`;\n\nexport const InfoBox: React.FC = (props) => {\n const theme = useTheme();\n\n return (\n \n ![]()
\n 
\n \n \n \n 記事監修\n \n {props.name}\n \n {props.description}\n \n \n \n );\n};\n","import styled from 'styled-components';\nimport { rect, RectProps } from '../../../components/styles';\n\ntype Props = RectProps & {\n error?: boolean;\n};\n\nexport const Input = styled.input`\n appearance: none;\n padding: ${({ theme }) => `${theme.spaces.m} ${theme.spaces.l}`};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.s};\n line-height: ${({ theme }) => theme.lineHeights.m};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n outline: 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n ${rect};\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: theme.fontSizes.l,\n })};\n\n &::placeholder {\n color: ${({ theme }) => theme.fontColors.placeholder};\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n }\n\n &:invalid:focus {\n background: ${({ theme }) => theme.backgroundColors.error};\n border-color: ${({ theme }) => theme.borderColors.secondary};\n color: ${({ theme }) => theme.fontColors.pink};\n }\n\n ${({ theme, error = false }) => {\n if (!error) {\n return {\n background: theme.backgroundColors.default,\n color: theme.fontColors.default,\n '&:hover, &:focus': {\n borderColor: theme.borderColors.primary,\n },\n };\n } else {\n return {\n background: theme.backgroundColors.error,\n borderColor: theme.borderColors.secondary,\n color: theme.fontColors.pink,\n };\n }\n }}\n`;\n","import styled, { CSSProperties } from 'styled-components';\nimport { margin, MarginProps } from '../../../components/styles';\n\ntype Props = MarginProps & {\n bgColor?: 'primary' | 'secondary';\n nowrap?: boolean;\n};\n\nconst Root = styled.div`\n background: ${({ theme, bgColor }) =>\n bgColor == 'secondary'\n ? theme.backgroundColors.green\n : theme.backgroundColors.primary};\n padding: ${({ theme }) => `${theme.spaces.xxxxl} ${theme.spaces.xxl}`};\n ${margin};\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `${theme.spaces.xxxl} ${theme.spaces.xxl} ${theme.spaces.xxxxl} `,\n })}\n`;\n\nconst Wrapper = styled.div`\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: 0 auto;\n display: grid;\n align-items: center;\n grid-template-columns: 0.7fr 1fr;\n gap: ${({ theme }) => theme.spaces.xxxxl};\n\n ${({ theme }) =>\n theme.screen.sp({\n gridTemplateColumns: '1fr',\n gap: theme.spaces.xxl,\n })}\n`;\n\nconst Grid = styled.div``;\n\nconst Image = styled.div``;\n\nconst Title = styled.h1`\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.s};\n`;\n\nconst Copy = styled.h2`\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.xxxxl};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n line-height: ${({ theme }) => theme.lineHeights.m};\n margin-bottom: ${({ theme }) => theme.spaces.xxl};\n white-space: ${({ nowrap }) => (nowrap ? 'nowrap' : 'inherit')};\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: '3.0rem',\n })}\n`;\n\nconst Description = styled.p`\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.m};\n line-height: ${({ theme }) => theme.lineHeights.l};\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: theme.fontSizes.s,\n })}\n`;\n\nexport const Keyvisual = Object.assign(Root, {\n Wrapper,\n Grid,\n Title,\n Image,\n Copy,\n Description,\n});\n","import * as React from 'react';\nimport { Link } from 'gatsby';\n\nimport styled from 'styled-components';\n\ntype Props = {\n totalCount?: number;\n current?: string;\n tag?: string;\n};\n\ntype ArrowProps = {\n prev?: boolean;\n};\n\nconst Arrow = styled.div`\n display: block;\n width: 10px;\n height: 10px;\n transform: ${({ prev }) =>\n prev\n ? `rotate(-45deg) translateY(2px) translateX(2px)`\n : `rotate(135deg) translateY(2px) translateX(2px)`};\n\n &:before {\n position: absolute;\n content: '';\n display: block;\n width: 2px;\n height: 100%;\n background-color: ${({ theme }) => theme.backgroundColors.black};\n }\n\n &:after {\n position: absolute;\n content: '';\n display: block;\n width: 100%;\n height: 2px;\n background-color: ${({ theme }) => theme.backgroundColors.black};\n }\n`;\n\nconst Count = styled(Link)`\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 42px;\n min-width: 42px;\n padding: ${({ theme }) => theme.spaces.m};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n transition-duration: ${({ theme }) => theme.transitions.fast};\n\n &.active,\n &:hover {\n background-color: ${({ theme }) => theme.backgroundColors.primary};\n color: ${({ theme }) => theme.fontColors.white};\n border-color: ${({ theme }) => theme.borderColors.primary};\n\n ${Arrow} {\n &:before,\n &:after {\n background-color: ${({ theme }) => theme.backgroundColors.white};\n }\n }\n }\n`;\n\nconst PagerList = styled.li`\n margin: 0;\n padding: 0;\n`;\n\nconst Root = styled.ul`\n width: 100%;\n display: flex;\n justify-content: center;\n gap: ${({ theme }) => theme.spaces.m};\n margin: ${({ theme }) => `0 0 ${theme.spaces.xxxl}`};\n padding: 0;\n list-style: none;\n`;\n\nexport const Pagination = (props: Props) => {\n const perPage = 12;\n const pagesToShow = 5;\n\n const range = (start: number, end: number) =>\n [...Array(end - start + 1)].map((_, i) => start + i);\n\n // 現在のページ番号を取得\n\n const currentPageNum = props.current.replace(/[^0-9]/g, '');\n const currentPage = parseInt(currentPageNum || '1'); // 現在のページ番号。デフォルトは1\n\n // 現在のページ番号を中心に、前後のページ番号を取得\n const startPage = Math.max(1, currentPage - Math.floor(pagesToShow / 2));\n const endPage = Math.min(\n startPage + pagesToShow - 1,\n Math.ceil(props.totalCount / perPage),\n );\n\n return (\n \n {currentPage == 2 ? (\n \n \n \n ) : (\n currentPage !== startPage && (\n \n \n \n )\n )}\n {range(startPage, endPage).map((number, index) => (\n \n \n {number}\n \n \n ))}\n {currentPage !== endPage && (\n \n \n \n )}\n \n );\n};\n","import styled from 'styled-components';\n\nimport {\n margin,\n MarginProps,\n flex,\n FlexProps,\n gap,\n GapProps,\n} from '../../../components/styles';\n\ntype Props = {\n column?: 'two' | 'three';\n reversal?: boolean;\n};\n\nconst Comment = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: ${({ theme }) => theme.spaces.l};\n order: ${({ reversal }) => reversal && '2'};\n\n ${({ theme }) =>\n theme.screen.sp({\n order: '1',\n })}\n`;\n\nconst Image = styled.div``;\n\nconst Root = styled.div`\n margin: ${({ theme }) => theme.spaces.xl} 0;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n align-items: center;\n gap: ${({ theme }) => theme.spaces.xxl};\n\n ${margin};\n ${flex};\n ${gap};\n\n ${({ theme }) =>\n theme.screen.sp({\n gridTemplateColumns: 'inherit',\n })};\n`;\n\nexport const Rows = Object.assign(Root, { Comment, Image });\n","import { rgba } from 'polished';\nimport styled from 'styled-components';\nimport { rect, RectProps } from '../../../components/styles';\n\ntype Props = RectProps & {\n error?: boolean;\n};\n\nexport const Radio = styled.input.attrs({ type: 'radio' })`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n &::before {\n display: inline-block;\n width: 24px;\n height: 24px;\n background: ${({ theme }) => theme.backgroundColors.white};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: 50%;\n content: '';\n flex-shrink: 0;\n }\n\n &::after {\n position: absolute;\n display: inline-block;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n transition: background-color 0.1s;\n content: '';\n flex-shrink: 0;\n }\n\n &:checked::before {\n border-color: ${({ theme }) => theme.borderColors.primary};\n box-shadow: 0 1px 8px\n ${({ theme }) => rgba(theme.backgroundColors.primary, 0.3)};\n }\n\n &:checked::after {\n background: ${({ theme }) => theme.backgroundColors.primary};\n }\n\n ${({ theme, error = false }) => {\n if (!error) {\n return {\n background: theme.backgroundColors.white,\n color: theme.fontColors.default,\n '&:hover, &:focus': {\n borderColor: theme.borderColors.primary,\n },\n };\n } else {\n return {\n background: theme.backgroundColors.error,\n borderColor: theme.borderColors.secondary,\n color: theme.fontColors.pink,\n };\n }\n }}\n`;\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport { ImgixGatsbyImage } from '@imgix/gatsby';\n\ntype Props = {\n num?: number;\n blogId?: string;\n img?: string;\n url?: string;\n title?: string;\n width?: number;\n height?: number;\n bottom?: boolean;\n children?: React.ReactNode;\n};\n\nconst RecommendItem = styled.li`\n display: block;\n width: 100%;\n counter-reset: number 0;\n margin-bottom: ${({ theme }) => theme.spaces.m};\n`;\n\nconst RecommendImgWrap = styled.div`\n width: 100%;\n height: auto;\n flex-shrink: 0;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-conten: center;\n border: 4px solid ${({ theme }) => theme.borderColors.default};\n`;\n\nconst RecommendImg = styled(ImgixGatsbyImage)`\n width: 100%;\n height: auto;\n flex-shrink: 0;\n vertical-align: bottom;\n`;\n\nconst RecommendLink = styled(Link)`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: ${({ theme }) => theme.spaces.m};\n width: 100%;\n margin: 0;\n font-weight: ${({ theme, bottom }) =>\n bottom ? theme.fontWeights.bold : theme.fontWeights.normal};\n background: ${({ theme, bottom }) =>\n bottom ? theme.backgroundColors.white : 'none'};\n padding: ${({ theme, bottom }) => (bottom ? theme.spaces.s : 0)};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n border: 1px solid transparent;\n border-radius: ${({ theme, bottom }) => (bottom ? theme.radii.s : 0)};\n\n ${RecommendImg}, ${RecommendImgWrap} {\n transition-duration: ${({ theme }) => theme.transitions.normal};\n }\n\n &:hover {\n text-decoration: ${({ bottom }) => (bottom ? 'normal' : 'underline')};\n background-color: ${({ theme, bottom }) =>\n bottom ? theme.borderColors.white : 'none'};\n border: 1px solid\n ${({ theme, bottom }) =>\n bottom ? theme.borderColors.primary : 'transparent'};\n\n ${RecommendImg} {\n transform: scale(1.1);\n }\n\n ${RecommendImgWrap} {\n border-color: ${({ theme }) => theme.borderColors.primary};\n }\n }\n`;\n\nconst RecommendTitle = styled.p`\n font-size: ${({ theme }) => theme.fontSizes.s};\n word-break: break-word;\n width: 100%;\n overflow: hidden;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n`;\n\nconst RecommendRank = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background-color: ${({ theme }) => theme.backgroundColors.primary};\n color: ${({ theme }) => theme.fontColors.white};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n`;\n\nexport const Recommend: React.FC = (props) => {\n return (\n \n \n {props.num}\n \n \n \n {props.title}\n \n \n );\n};\n","import styled from 'styled-components';\nimport { Flex } from '../../../components/blocks';\n\ntype Props = {\n nolink?: boolean;\n};\n\nconst Img = styled.div`\n width: 100%;\n height: 240px;\n background: ${({ theme }) => theme.backgroundColors.default};\n overflow: hidden;\n border-radius: ${({ theme }) => theme.radii.m};\n padding: ${({ theme }) => theme.spaces.l};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n border: 2px solid ${({ theme }) => theme.borderColors.default};\n\n ${({ theme }) =>\n theme.screen.min({\n maxHeight: '245px',\n })}\n\n &:hover {\n transform: ${({ nolink }) => (nolink ? 'inherit' : 'translateY(-2px)')};\n box-shadow: ${({ theme, nolink }) =>\n nolink ? 'inherit' : theme.boxShadow.base};\n }\n\n img {\n object-fit: contain;\n }\n`;\n\nconst Contents = styled(Flex)`\n flex-direction: column;\n width: 100%;\n gap: ${({ theme }) => theme.spaces.l};\n padding: ${({ theme }) => `${theme.spaces.l} ${theme.spaces.l} 0`};\n`;\n\nconst Root = styled(Flex)`\n align-items: flex-start;\n flex-direction: column;\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `0 ${theme.spaces.l}`,\n })}\n`;\n\nexport const ResourceBox = Object.assign(Root, { Img, Contents });\n","import * as React from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport { Link } from 'gatsby';\nimport { Flex, Tag, Text } from '../../../components/blocks';\n\ntype Props = {\n img?: string;\n url?: string;\n title?: string;\n tags?: string;\n};\n\nconst Img = styled.img`\n border-radius: ${({ theme }) => `${theme.radii.s} 0 0 ${theme.radii.s}`};\n`;\n\nconst Root = styled(Link)`\n display: grid;\n grid-template-columns: 160px 1fr;\n gap: ${({ theme }) => theme.spaces.m};\n align-items: center;\n border: 1px solid ${({ theme }) => theme.borderColors.transparent};\n padding: ${({ theme }) => theme.spaces.s};\n background-color: ${({ theme }) => theme.backgroundColors.white};\n border-radius: ${({ theme }) => theme.radii.s};\n transition-duration: ${({ theme }) => theme.transitions.fast};\n\n &:hover {\n border: 1px solid ${({ theme }) => theme.borderColors.primary};\n }\n`;\n\nexport const Related: React.FC = (props) => {\n const theme = useTheme();\n\n return (\n \n \n \n \n {props.title}\n \n {props.tags?.length > 0 && (\n \n {props.tags}\n \n )}\n \n \n );\n};\n","import styled from 'styled-components';\nimport { Flex } from '../../../components/blocks';\nimport { AppTheme } from '../../../styles/theme';\nimport { margin, MarginProps } from '../../../components/styles';\n\ntype Props = MarginProps & {\n gap?: keyof AppTheme['spaces'];\n};\n\nexport const Section = styled(Flex)`\n flex-direction: column;\n gap: ${({ theme, gap }) => (gap ? theme.spaces[gap] : theme.spaces.xxxxl)};\n align-items: flex-start;\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: 0 auto;\n padding: 0 ${({ theme }) => theme.spaces.l};\n ${margin}\n`;\n","import * as React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\n\ninterface Props {\n description?: string;\n lang?: string;\n title: string;\n keywords?: string;\n ogUrl?: string;\n ogImage?: string;\n meta?: object[];\n canonical?: string;\n}\n\nexport const Seo = ({\n description = '',\n lang = 'ja',\n title,\n meta = [],\n keywords = '',\n ogUrl,\n ogImage,\n canonical,\n}: Props) => {\n const { site } = useStaticQuery(\n graphql`\n query {\n site {\n siteMetadata {\n title\n description\n siteUrl\n }\n }\n }\n `,\n );\n const metaDescription = description || site.siteMetadata.description;\n const defaultTitle = site.siteMetadata?.title;\n const siteUrl = site.siteMetadata.siteUrl;\n const defaultOgImg = `${siteUrl}/images/ogp.jpg`;\n\n return (\n <>\n \n {title + ' | ' + defaultTitle}\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Seo;\n","import styled from 'styled-components';\nimport { rect, RectProps } from '../../../components/styles';\n\ntype Props = RectProps & {\n error?: boolean;\n fill?: boolean;\n};\n\nexport const Select = styled.select`\n appearance: none;\n outline: 0;\n padding: ${({ theme }) => `${theme.spaces.m} ${theme.spaces.l}`};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.default};\n line-height: ${({ theme }) => theme.lineHeights.m};\n background: url(\"data:image/svg+xml;utf8,\")\n no-repeat;\n background-position: calc(100% - 8px) calc(50% + 2px);\n background-size: 10px;\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.s};\n\n &:focus {\n border-color: ${({ theme }) => theme.borderColors.primary};\n }\n\n ${({ fill }) => (fill ? { width: '100%' } : rect)};\n\n ${({ theme, error }) =>\n error && {\n borderColor: theme.borderColors.error,\n color: theme.fontColors.pink,\n [`&:focus`]: {\n borderColor: theme.borderColors.error,\n },\n }}\n`;\n","import React, { useState } from 'react';\n\nimport styled, { keyframes, useTheme } from 'styled-components';\nimport { useKeenSlider } from 'keen-slider/react';\nimport 'keen-slider/keen-slider.min.css';\n\ntype Props = {\n children?: React.ReactNode;\n};\n\nconst Root = styled.div`\n width: 100%;\n height: auto;\n background: ${({ theme }) => theme.backgroundColors.default};\n border-top: 1px solid ${({ theme }) => theme.borderColors.default};\n border-bottom: 1px solid ${({ theme }) => theme.borderColors.default};\n\n .navigation-wrapper {\n position: relative;\n width: 100%;\n }\n\n .dots {\n display: flex;\n padding: 10px 0;\n justify-content: center;\n }\n\n .dot {\n border: none;\n width: 10px;\n height: 10px;\n background: ${({ theme }) => theme.backgroundColors.lightgrey};\n border-radius: 50%;\n margin: 0 5px;\n padding: 5px;\n cursor: pointer;\n }\n\n .dot:focus {\n outline: none;\n }\n\n .dot.active {\n background: ${({ theme }) => theme.backgroundColors.primary};\n }\n\n .arrow {\n width: 30px;\n height: 30px;\n position: absolute;\n top: calc(50% + 8px);\n transform: translateY(-50%);\n -webkit-transform: translateY(-50%);\n fill: ${({ theme }) => theme.backgroundColors.lightgrey};\n cursor: pointer;\n\n ${({ theme }) =>\n theme.screen.sp({\n display: 'none',\n })}\n }\n\n .arrow--left {\n left: 10px;\n }\n\n .arrow--right {\n left: auto;\n right: 10px;\n }\n\n .arrow--disabled {\n fill: rgba(255, 255, 255, 0.5);\n cursor: default;\n }\n`;\n\nexport const Slider: React.FC = (props) => {\n const [currentSlide, setCurrentSlide] = React.useState(0);\n const [loaded, setLoaded] = useState(false);\n\n const [sliderRef, instanceRef] = useKeenSlider(\n {\n // loop: true,\n slides: {\n perView: 1,\n },\n initial: 0,\n slideChanged(slider) {\n setCurrentSlide(slider.track.details.rel);\n },\n created() {\n setLoaded(true);\n },\n },\n [\n (slider) => {\n let timeout: ReturnType;\n let mouseOver = false;\n function clearNextTimeout() {\n clearTimeout(timeout);\n }\n function nextTimeout() {\n clearTimeout(timeout);\n if (mouseOver) return;\n timeout = setTimeout(() => {\n slider.next();\n }, 3000);\n }\n slider.on('created', () => {\n slider.container.addEventListener('mouseover', () => {\n mouseOver = false;\n clearNextTimeout();\n });\n slider.container.addEventListener('mouseout', () => {\n mouseOver = false;\n nextTimeout();\n });\n nextTimeout();\n });\n slider.on('dragStarted', clearNextTimeout);\n slider.on('animationEnded', nextTimeout);\n slider.on('updated', nextTimeout);\n },\n ],\n );\n\n return (\n \n \n
\n {props.children}\n
\n {loaded && instanceRef.current && (\n <>\n
\n e.stopPropagation() || instanceRef.current?.prev()\n }\n disabled={currentSlide === 0}\n />\n\n \n e.stopPropagation() || instanceRef.current?.next()\n }\n disabled={\n currentSlide ===\n instanceRef.current.track.details.slides.length - 1\n }\n />\n \n )}\n \n {[\n ...Array(instanceRef.current.track.details.slides.length).keys(),\n ].map((idx) => {\n return (\n {\n instanceRef.current?.moveToIdx(idx);\n }}\n className={'dot' + (currentSlide === idx ? ' active' : '')}\n >\n );\n })}\n
\n )}\n \n );\n};\n\nfunction Arrow(props: {\n disabled: boolean;\n left?: boolean;\n onClick: (e: any) => void;\n}) {\n const disabeld = props.disabled ? ' arrow--disabled' : '';\n return (\n \n {props.left && (\n \n )}\n {!props.left && (\n \n )}\n \n );\n}\n","import styled, { CSSProperties } from 'styled-components';\nimport {\n margin,\n MarginProps,\n rect,\n RectProps,\n} from '../../../components/styles';\n\ntype Props = {\n notdot?: boolean;\n textAlign?: CSSProperties['textAlign'];\n};\n\nconst Th = styled.th`\n font-size: ${({ theme }) => theme.fontSizes.s};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.grey};\n padding: ${({ theme }) => `${theme.spaces.s} ${theme.spaces.m}`};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n ${rect}\n`;\n\nconst Td = styled.td`\n padding: ${({ theme }) => `${theme.spaces.l} ${theme.spaces.l}`};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n background-color: ${({ theme }) => theme.backgroundColors.white};\n text-align: ${({ textAlign }) => textAlign};\n`;\n\nconst Tr = styled.tr``;\n\nconst Tbody = styled.tbody``;\n\nconst Thead = styled.thead``;\n\nconst Root = styled.table`\n margin: 0;\n padding: 0;\n border-collapse: collapse;\n ${margin};\n`;\n\nexport const Table = Object.assign(Root, { Thead, Tbody, Tr, Td, Th });\n","import { lighten } from 'polished';\nimport styled from 'styled-components';\n\ntype Props = {\n size?: 's' | 'm' | 'l';\n color?: 'default' | 'primary' | 'secondary' | 'green';\n nowrap?: boolean;\n};\n\nexport const Tag = styled.div`\n display: flex;\n align-items: center;\n border-radius: ${({ theme }) => theme.radii.s};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n white-space: ${({ nowrap }) => (nowrap ? 'nowrap' : 'normal')};\n\n ${({ theme, size = 's' }) => {\n switch (size) {\n case 's':\n return {\n fontSize: theme.fontSizes.xxs,\n padding: `${theme.spaces.xs} ${theme.spaces.m}`,\n };\n case 'm':\n return {\n fontSize: theme.fontSizes.xs,\n padding: `${theme.spaces.s} ${theme.spaces.m}`,\n };\n case 'l':\n return {\n fontSize: theme.fontSizes.s,\n padding: `${theme.spaces.s} ${theme.spaces.m}`,\n };\n }\n }}\n\n ${({ theme, color = 'default' }) => {\n switch (color) {\n case 'default':\n return {\n color: theme.fontColors.default,\n backgroundColor: lighten(0.4, theme.backgroundColors.lightgrey),\n };\n case 'primary':\n return {\n color: theme.fontColors.white,\n backgroundColor: theme.backgroundColors.primary,\n };\n case 'secondary':\n return {\n color: theme.fontColors.white,\n backgroundColor: theme.backgroundColors.secondary,\n };\n case 'green':\n return {\n color: theme.fontColors.white,\n backgroundColor: theme.backgroundColors.green,\n };\n }\n }}\n`;\n","import styled, { CSSProperties } from 'styled-components';\nimport {\n margin,\n MarginProps,\n padding,\n PaddingProps,\n} from '../../../components/styles';\nimport { AppTheme } from '../../../styles/theme';\n\ntype Props = MarginProps &\n PaddingProps & {\n display?: CSSProperties['display'];\n size?: keyof AppTheme['fontSizes'];\n color?: keyof AppTheme['fontColors'];\n fontWeight?: keyof AppTheme['fontWeights'];\n lineHeight?: keyof AppTheme['lineHeights'];\n whiteSpace?: CSSProperties['whiteSpace'];\n textAlign?: CSSProperties['textAlign'];\n wordBreak?: CSSProperties['wordBreak'];\n annotation?: boolean;\n };\n\nexport const Text = styled.p`\n display: ${({ display }) => (display ? [display] : 'inline-block')};\n font-size: ${({ theme, size }) =>\n size ? theme.fontSizes[size] : theme.fontSizes.m};\n font-weight: ${({ theme, fontWeight }) =>\n fontWeight ? theme.fontWeights[fontWeight] : theme.fontWeights.normal};\n color: ${({ theme, color }) =>\n color ? theme.fontColors[color] : theme.fontColors.default};\n line-height: ${({ theme, lineHeight }) =>\n lineHeight ? theme.lineHeights[lineHeight] : theme.lineHeights.default};\n white-space: ${({ whiteSpace }) => whiteSpace};\n text-align: ${({ textAlign }) => textAlign};\n word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'break-all')};\n\n ${({ annotation, theme }) =>\n annotation && {\n display: 'flex',\n fontSize: theme.fontSizes.s,\n gap: theme.spaces.s,\n color: theme.fontColors.grey,\n lineHeight: theme.lineHeights.m,\n [`&:before`]: {\n content: '\"※\"',\n },\n }}\n ${margin}\n ${padding}\n`;\n","import styled from 'styled-components';\nimport { rect, RectProps } from '../../../components/styles';\n\ntype Props = RectProps & {\n error?: boolean;\n};\n\nexport const Textarea = styled.textarea`\n appearance: none;\n padding: ${({ theme }) => `${theme.spaces.m} ${theme.spaces.l}`};\n border: 1px solid ${({ theme }) => theme.borderColors.default};\n border-radius: ${({ theme }) => theme.radii.s};\n line-height: ${({ theme }) => theme.lineHeights.m};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n outline: 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n ${rect};\n\n ${({ theme }) =>\n theme.screen.sp({\n fontSize: theme.fontSizes.l,\n })};\n\n &::placeholder {\n color: ${({ theme }) => theme.fontColors.placeholder};\n font-size: ${({ theme }) => theme.fontSizes.m};\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n }\n\n ${({ theme, error = false }) => {\n if (!error) {\n return {\n background: theme.backgroundColors.default,\n color: theme.fontColors.default,\n '&:hover, &:focus': {\n borderColor: theme.borderColors.primary,\n },\n };\n } else {\n return {\n background: theme.backgroundColors.error,\n borderColor: theme.borderColors.purple,\n color: theme.fontColors.pink,\n };\n }\n }}\n`;\n","import * as React from 'react';\nimport { useTheme } from 'styled-components';\n\ntype Props = {\n embed?: string;\n};\n\n//レンダリング前に処理が実行されないようにした\n//参考：https://www.gatsbyjs.com/docs/debugging-html-builds/\nconst isBrowser = typeof document !== `undefined`;\n\nexport const Timerex: React.FC = (props) => {\n const theme = useTheme();\n\n if (isBrowser) {\n let scriptEl = document.createElement('script');\n scriptEl.setAttribute('src', 'https://timerex.net/js/embed.js');\n document.body.appendChild(scriptEl);\n\n // アクセス時に読み込まれない場合があるので、タイムラグで発火するようにした\n setTimeout(function () {\n window.TimerexCalendar({\n primary_color: theme.backgroundColors.primary,\n disable_logo: true,\n });\n }, 500);\n }\n\n return ;\n};\n\n//参考 https://developers.timerex.net/docs/widget/ZG9jOjIxMDcxOTUz-\n","import styled from 'styled-components';\n\nimport { Button as ToggleButton } from '../../../components/blocks';\n\ntype Props = {\n open?: boolean;\n};\n\nconst Title = styled.p`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${({ theme }) => theme.spaces.m};\n font-size: ${({ theme }) => theme.fontSizes.xs};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.lightgrey};\n line-height: ${({ theme }) => theme.lineHeights.l};\n cursor: pointer;\n`;\n\nconst Item = styled.li`\n dislay: block;\n list-style: none;\n margin: 0;\n padding: 0;\n border-top: 1px solid ${({ theme }) => theme.borderColors.default};\n\n & > a {\n display: block;\n cursor: pointer;\n font-size: ${({ theme }) => theme.fontSizes.s};\n padding: ${({ theme }) => `${theme.spaces.m} ${theme.spaces.s}`};\n color: ${({ theme }) => theme.fontColors.grey};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n\n &:hover {\n color: ${({ theme }) => theme.fontColors.blue};\n padding-left: ${({ theme }) => theme.spaces.m};\n }\n }\n\n &.h3 {\n padding-left: ${({ theme }) => theme.spaces.xl};\n\n a {\n color: ${({ theme }) => theme.fontColors.lightgrey};\n }\n }\n`;\n\nconst Button = styled(ToggleButton)`\n background: none;\n border: 0;\n padding: ${({ theme }) => theme.spaces.m} 0;\n font-size: ${({ theme }) => theme.fontSizes.xs};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n\n &:hover {\n color: ${({ theme }) => theme.fontColors.primary};\n\n &:before {\n border-top-color: ${({ theme, open }) =>\n !open ? theme.borderColors.primary : 'transparent'};\n border-bottom-color: ${({ theme, open }) =>\n open ? theme.borderColors.primary : 'transparent'};\n }\n }\n\n &:before {\n content: '';\n width: 4px;\n height: 4px;\n border: 4px solid transparent;\n margin-right: 4px;\n border-top: ${({ theme, open }) =>\n !open ? `4px solid ${theme.fontColors.default}` : 0};\n border-bottom: ${({ theme, open }) =>\n open ? `4px solid ${theme.fontColors.default}` : 0};\n }\n`;\n\nconst List = styled.ul`\n margin: 0;\n padding: 0;\n`;\n\nconst Root = styled.div`\n position: relative;\n width: 100%;\n overflow: hidden;\n margin: ${({ theme }) => `${theme.spaces.m} 0 ${theme.spaces.l}`};\n padding: ${({ theme }) => `${theme.spaces.xl} ${theme.spaces.xl}`};\n background-color: ${({ theme }) => theme.backgroundColors.default};\n\n ${Item} {\n &.h3 {\n display: ${({ open }) => (open ? 'block' : 'none')};\n }\n }\n`;\n\nexport const Toc = Object.assign(Root, { Item, List, Title, Button });\n","import styled, { CSSProperties } from 'styled-components';\nimport { AppTheme } from '../../../styles/theme';\nimport { rect, RectProps } from '../../../components/styles';\n\ntype Props = {\n color?: keyof AppTheme['backgroundColors'];\n size?: keyof AppTheme['fontSizes'];\n display?: CSSProperties['display'];\n textAlign?: CSSProperties['textAlign'];\n};\n\nexport const Label = styled.div`\n display: ${({ display }) => (display ? [display] : 'inline-block')};\n text-align: ${({ textAlign }) => textAlign};\n padding: ${({ theme }) => `${theme.spaces.s} ${theme.spaces.l}`};\n font-size: ${({ theme, size }) => size && theme.fontSizes[size]};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.white};\n border-radius: ${({ theme }) => theme.radii.rounded};\n background: ${({ theme, color }) => color && theme.backgroundColors[color]};\n ${rect}\n`;\n","import { createGlobalStyle } from 'styled-components';\nimport { normalize } from 'polished';\n\nexport const GlobalStyles = createGlobalStyle`\n ${normalize()}\n\n html [type=button] {\n -webkit-appearance: unset;\n }\n [type=button] {\n -webkit-appearance: button;\n }\n\n html {\n box-sizing: border-box;\n font-size: 62.5%;\n }\n\n body {\n ${({ theme }) => ({\n fontFamily: theme.fontFamilys.jp,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.m,\n color: theme.fontColors.default,\n lineHeight: theme.lineHeights.default,\n })}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n img {\n vertical-align: bottom;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n /* mieruka */\n #mieruca_heatmap_popup .mieruca-hm-popup-inner{\n max-width:340px !important;\n }\n`;\n","import { darken, lighten, rgba } from 'polished';\nimport { CSSProperties } from 'styled-components';\n\nconst COLORS = {\n primary: '#587DFF',\n blue: '#3656FB',\n jetblack: '#112233',\n black: '#223344',\n grey: '#445566',\n green: '#30BA88',\n lightgrey: '#778899',\n white: '#FFFFFF',\n pink: '#EB507F',\n purple: '#C57CD1',\n yellow: '#FFC700',\n brown: '#462E00',\n royalblue: '#3656FB',\n} as const;\n\nexport const appTheme = {\n screen: {\n min: (styles: { [K in keyof CSSProperties]: CSSProperties[K] }) => {\n return {\n '@media screen and (max-width: 640px)': styles,\n };\n },\n sp: (styles: { [K in keyof CSSProperties]: CSSProperties[K] }) => {\n return {\n '@media screen and (max-width: 799px)': styles,\n };\n },\n tablet: (styles: { [K in keyof CSSProperties]: CSSProperties[K] }) => {\n return {\n '@media screen and (max-width: 1024px)': styles,\n };\n },\n pc: (styles: { [K in keyof CSSProperties]: CSSProperties[K] }) => {\n return {\n '@media screen and (min-width: 800px)': styles,\n };\n },\n },\n\n backgroundColors: {\n default: '#F7F9FB',\n primary: COLORS.primary,\n secondary: COLORS.pink,\n white: COLORS.white,\n grey: COLORS.grey,\n lightgrey: COLORS.lightgrey,\n black: COLORS.black,\n jetblack: COLORS.jetblack,\n green: COLORS.green,\n purple: COLORS.purple,\n blue: COLORS.primary,\n royalblue: COLORS.royalblue,\n yellow: COLORS.yellow,\n transparent: 'transparent',\n error: lighten(0.32, COLORS.pink),\n disabled: rgba(COLORS.lightgrey, 0.4),\n linearGreen: `linear-gradient(180deg, ${lighten(0.06, COLORS.green)} 0%, ${\n COLORS.green\n } 100%)`,\n linearBlue: `linear-gradient(180deg, ${lighten(0.06, COLORS.primary)} 0%, ${\n COLORS.primary\n } 100%)`,\n },\n\n borderColors: {\n default: '#DAE4EE',\n primary: COLORS.primary,\n secondary: COLORS.pink,\n white: COLORS.white,\n lightgrey: COLORS.lightgrey,\n green: COLORS.green,\n purple: COLORS.purple,\n black: COLORS.black,\n jetblack: COLORS.jetblack,\n yellow: COLORS.yellow,\n transparent: 'transparent',\n error: COLORS.pink,\n },\n\n fontFamilys: {\n jp: `YakuHanJPs, -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif`,\n },\n\n fontSizes: {\n // from https://min-max-calculator.9elements.com/\n xxxs: 'clamp(0.6rem, 0.527rem + 0.36vw, 0.8rem)',\n xxs: 'clamp(0.8rem, 0.727rem + 0.36vw, 1rem)',\n xs: 'clamp(1rem, 0.927rem + 0.36vw, 1.2rem)',\n s: 'clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem)',\n m: 'clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem)',\n l: 'clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem)',\n xl: 'clamp(1.8rem, 1.727rem + 0.36vw, 2rem)',\n xxl: 'clamp(2rem, 1.855rem + 0.73vw, 2.4rem)',\n xxxl: 'clamp(2.4rem, 2.109rem + 1.45vw, 3.2rem)',\n xxxxl: 'clamp(3.2rem, 2.909rem + 1.45vw, 4rem)',\n xxxxxl: 'clamp(4rem, 3.709rem + 1.45vw, 4.8rem)',\n ex: 'clamp(4.8rem, 2.873rem + 3.64vw, 5.6rem)',\n },\n\n fontColors: {\n default: COLORS.black,\n white: COLORS.white,\n primary: COLORS.primary,\n grey: COLORS.grey,\n lightgrey: COLORS.lightgrey,\n green: COLORS.green,\n purple: COLORS.purple,\n pink: COLORS.pink,\n blue: COLORS.blue,\n yellow: COLORS.yellow,\n placeholder: '#aabbcc',\n brown: COLORS.brown,\n },\n\n fontWeights: {\n light: 300,\n normal: 400,\n bold: 700,\n },\n\n lineHeights: {\n s: 1,\n default: 1.4,\n m: 1.6,\n l: 2,\n xl: 2.5,\n },\n\n spaces: {\n xs: '2px',\n s: '4px',\n m: '8px',\n l: '16px',\n xl: '24px',\n xxl: '32px',\n xxxl: '40px',\n xxxxl: '64px',\n ex: '80px',\n },\n\n transitions: {\n fast: '0.1s',\n normal: '0.2s',\n slow: '0.5s',\n },\n\n windowSizes: {\n s: '640px',\n m: '1080px',\n l: '1200px',\n xl: '1440px',\n },\n\n radii: {\n s: '4px',\n m: '8px',\n l: '16px',\n rounded: '9999px',\n circle: '50%',\n },\n\n boxShadow: {\n hover: `0 2px -14px ${rgba(COLORS.primary, 0.5)}, 4px -16px -24px ${rgba(\n COLORS.primary,\n 0.3,\n )}`,\n hover2: `0 2px 14px ${rgba(COLORS.primary, 0.5)}, 4px 16px 32px ${rgba(\n COLORS.primary,\n 0.3,\n )}`,\n nav: `0 1px 1px ${rgba(COLORS.primary, 0.1)}, 4px 16px 32px ${rgba(\n COLORS.black,\n 0.3,\n )}`,\n base: `0 16px 80px ${rgba(COLORS.primary, 0.1)}, 0px 2px 20px 0px ${rgba(\n COLORS.primary,\n 0.2,\n )}`,\n blue: `0 16px 10px ${rgba(COLORS.primary, 0.1)}, 0px 2px 10px 0px ${rgba(\n COLORS.primary,\n 0.5,\n )}`,\n pink: `0 16px 10px ${rgba(COLORS.pink, 0.1)}, 0px 2px 10px 0px ${rgba(\n COLORS.pink,\n 0.3,\n )}`,\n green: `0 16px 10px ${rgba(COLORS.green, 0.1)}, 0px 2px 10px 0px ${rgba(\n COLORS.green,\n 0.3,\n )}`,\n purple: `0 16px 10px ${rgba(COLORS.purple, 0.1)}, 0px 2px 10px 0px ${rgba(\n COLORS.purple,\n 0.3,\n )}`,\n yellow: `0 16px 10px ${rgba(COLORS.yellow, 0.1)}, 0px 2px 10px 0px ${rgba(\n COLORS.yellow,\n 0.3,\n )}`,\n },\n} as const;\n\nexport type AppTheme = typeof appTheme;\n\ndeclare module 'styled-components' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface DefaultTheme extends AppTheme {}\n}\n","import React, { useRef, useEffect, useState } from 'react';\nimport { rgba } from 'polished';\nimport styled, { useTheme } from 'styled-components';\nimport { Link } from 'gatsby';\nimport { Logo, Anchor, Flex } from '../../../components/blocks';\n\nconst Root = styled.header`\n position: sticky;\n z-index: 20;\n top: 0;\n width: 100%;\n\n &.open {\n ${({ theme }) =>\n theme.screen.tablet({\n position: 'fixed',\n })}\n }\n`;\n\nconst Wrap = styled.div`\n display: grid;\n grid-template-columns: min-content 1fr;\n grid-template-areas: 'logo menu';\n align-items: center;\n justify-content: space-between;\n column-gap: ${({ theme }) => theme.spaces.l};\n width: 100%;\n padding: ${({ theme }) => `${theme.spaces.m} ${theme.spaces.l}`};\n background: ${({ theme }) => rgba(theme.backgroundColors.white, 0.8)};\n backdrop-filter: blur(4px);\n\n ${({ theme }) =>\n theme.screen.tablet({\n gridTemplateColumns: '1fr',\n gridTemplateRows: 'auto',\n gridTemplateAreas: `\"logo ham\" \"menu menu\"`,\n gap: theme.spaces.s,\n })}\n`;\n\nconst LogoWrap = styled(Link)`\n display: flex;\n margin: 0;\n padding: 0;\n grid-area: logo;\n`;\n\nconst Menu = styled.div`\n display: flex;\n align-items: center;\n grid-area: menu;\n\n ${({ theme }) =>\n theme.screen.tablet({\n minHeight: '100vh',\n height: '100%',\n alignItems: 'flex-start',\n flexDirection: 'column',\n display: 'none',\n })}\n\n &.open {\n ${({ theme }) =>\n theme.screen.tablet({\n display: 'flex',\n })}\n }\n`;\n\nconst HambergerMenu = styled.div`\n grid-aream: ham;\n position: relative;\n display: none;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 40px;\n height: 40px;\n padding: ${({ theme }) => theme.spaces.s} 12px;\n border-radius: ${({ theme }) => theme.radii.circle};\n row-gap: ${({ theme }) => theme.spaces.s};\n flex-shrink: 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n user-select: none;\n\n &:hover {\n cursor: pointer;\n background-color: ${({ theme }) =>\n rgba(theme.backgroundColors.lightgrey, 0.2)};\n }\n\n ${({ theme }) =>\n theme.screen.tablet({\n display: 'flex',\n })}\n\n &:before, &:after {\n content: '';\n display: block;\n width: 100%;\n height: 2px;\n background: ${({ theme }) => theme.backgroundColors.black};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n }\n\n .open & {\n &:before {\n transform: rotate(-45deg) translate(-2px, 2px);\n }\n\n &:after {\n transform: rotate(45deg) translate(-2px, -2px);\n }\n }\n`;\n\nconst Nav = styled.ul`\n display: flex;\n margin: 0 0 0 auto;\n padding: 0;\n list-style-type: none;\n align-items: center;\n\n ${({ theme }) =>\n theme.screen.tablet({\n width: '100%',\n margin: `0 auto 0 0`,\n flexDirection: 'column',\n alignItems: 'flex-start',\n })}\n`;\n\nconst NavItem = styled.li`\n margin: 0;\n padding: 0;\n\n ${({ theme }) =>\n theme.screen.tablet({\n width: '100%',\n })}\n`;\n\nconst NavLink = styled(Link)`\n display: block;\n font-size: ${({ theme }) => theme.fontSizes.s};\n padding: ${({ theme }) => theme.spaces.l};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n user-select: none;\n\n ${({ theme }) =>\n theme.screen.tablet({\n width: '100%',\n padding: `${theme.spaces.xl} ${theme.spaces.m}`,\n whiteSpace: 'nowrap',\n })}\n\n &:hover,\n &.active {\n box-shadow: 0 2px ${({ theme }) => theme.backgroundColors.blue};\n\n ${({ theme }) =>\n theme.screen.tablet({\n boxShadow: 'none',\n backgroundColor: theme.backgroundColors.primary,\n color: theme.fontColors.white,\n })}\n }\n`;\n\nconst NavButton = styled.span<{ expand?: boolean }>`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n column-gap: 4px;\n font-size: ${({ theme }) => theme.fontSizes.s};\n padding: ${({ theme }) => theme.spaces.l};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n user-select: none;\n\n ${({ theme }) =>\n theme.screen.tablet({\n padding: `${theme.spaces.xl} ${theme.spaces.m}`,\n whiteSpace: 'nowrap',\n })}\n\n &:after {\n content: '';\n display: block;\n width: 8px;\n height: 8px;\n border: 1px solid transparent;\n border-top-color: ${({ theme }) => theme.backgroundColors.black};\n border-left-color: ${({ theme }) => theme.backgroundColors.black};\n transition: ${({ theme }) => theme.transitions.normal};\n transform: ${({ expand }) => (expand ? 'rotate(45deg)' : 'rotate(225deg)')};\n margin-bottom: ${({ theme, expand }) =>\n expand ? `-${theme.spaces.s}` : theme.spaces.s};\n }\n\n &:hover,\n &.active {\n color: ${({ theme }) => theme.fontColors.blue};\n\n ${({ theme }) =>\n theme.screen.tablet({\n boxShadow: 'none',\n color: theme.fontColors.primary,\n fontWeight: theme.fontWeights.bold,\n })}\n\n &:after {\n margin-bottom: -2px;\n border-top-color: ${({ theme }) => theme.backgroundColors.primary};\n border-left-color: ${({ theme }) => theme.backgroundColors.primary};\n\n ${({ theme }) =>\n theme.screen.tablet({\n borderTopColor: theme.backgroundColors.primary,\n })};\n }\n }\n`;\n\nconst SPInquiry = styled(Anchor)`\n display: none;\n\n ${({ theme }) =>\n theme.screen.tablet({\n display: 'block',\n })}\n`;\n\nconst ChildNav = styled.ul`\n position: absolute;\n display: flex;\n flex-direction: column;\n margin: 0 0 0 auto;\n padding: 0;\n list-style-type: none;\n background-color: ${({ theme }) => theme.backgroundColors.white};\n box-shadow: ${({ theme }) => theme.boxShadow.nav};\n border-radius: ${({ theme }) => theme.radii.l};\n outline: 0;\n\n ${({ theme }) =>\n theme.screen.tablet({\n position: 'relative',\n border: `1px solid ${theme.borderColors.default}`,\n borderRadius: theme.radii.m,\n backgroundColor: theme.backgroundColors.default,\n boxShadow: 'none',\n })}\n\n ${NavItem} {\n &:first-child {\n border-radius: ${({ theme }) => `${theme.radii.l} ${theme.radii.l} 0 0`};\n overflow: hidden;\n\n ${({ theme }) =>\n theme.screen.tablet({\n borderRadius: `${theme.radii.m} ${theme.radii.m} 0 0`,\n })}\n }\n\n &:last-child {\n border-radius: ${({ theme }) => `0 0 ${theme.radii.l} ${theme.radii.l}`};\n overflow: hidden;\n\n ${({ theme }) =>\n theme.screen.tablet({\n borderRadius: `0 0 ${theme.radii.m} ${theme.radii.m}`,\n })}\n }\n }\n\n ${NavLink} {\n padding: ${({ theme }) => theme.spaces.l};\n\n display: flex;\n align-items: center;\n column-gap: ${({ theme }) => theme.spaces.m};\n\n &:before {\n content: '';\n display: flex;\n align-items: center;\n width: 8px;\n height: 2px;\n background-color: ${({ theme }) => theme.borderColors.default};\n }\n\n &:hover,\n &.active {\n background: ${({ theme }) => theme.backgroundColors.primary};\n color: ${({ theme }) => theme.fontColors.white};\n box-shadow: none;\n }\n }\n`;\n\nconst InquiryButton = styled(Anchor)`\n ${({ theme }) =>\n theme.screen.tablet({\n marginTop: theme.spaces.xl,\n width: '100%',\n })}\n`;\n\nconst InquiryButtonWrap = styled(Flex)`\n gap: ${({ theme }) => theme.spaces.m};\n\n ${({ theme }) =>\n theme.screen.tablet({\n flexDirection: 'column',\n gap: 0,\n width: '100%',\n })}\n`;\n\nexport const Header: React.FC = () => {\n const theme = useTheme();\n /* TODO: refactoring */\n const [isOpen_1, setIsOpen_1] = useState(false);\n const [isOpen_2, setIsOpen_2] = useState(false);\n const menuRef_1: any = useRef();\n const menuRef_2: any = useRef();\n const [spOpen, setSpOpen] = useState(false);\n const spRef: any = useRef();\n\n useEffect(() => {\n isOpen_1 && menuRef_1.current.focus();\n }, [isOpen_1]);\n useEffect(() => {\n isOpen_2 && menuRef_2.current.focus();\n }, [isOpen_2]);\n useEffect(() => {\n spOpen && spRef.current.focus();\n }, [spOpen]);\n\n return (\n \n \n \n \n \n \n \n \n お問い合わせ\n \n setSpOpen(spOpen ? false : true)} />\n \n \n \n );\n};\n","import React from 'react';\nimport { rgba } from 'polished';\nimport styled from 'styled-components';\nimport { Link } from 'gatsby';\nimport { Logo } from '../../../components/blocks';\n\nconst Root = styled.header`\n z-index: 20;\n top: 0;\n width: 100%;\n`;\n\nconst Wrap = styled.div`\n display: grid;\n grid-template-columns: min-content 1fr;\n grid-template-areas: 'logo menu';\n align-items: center;\n justify-content: space-between;\n column-gap: ${({ theme }) => theme.spaces.l};\n width: 100%;\n padding: ${({ theme }) => `${theme.spaces.l} ${theme.spaces.l}`};\n background: ${({ theme }) => rgba(theme.backgroundColors.white, 0.8)};\n backdrop-filter: blur(4px);\n\n ${({ theme }) =>\n theme.screen.sp({\n gridTemplateColumns: '1fr',\n gridTemplateRows: 'auto',\n gridTemplateAreas: `\"logo ham\" \"menu menu\"`,\n gap: theme.spaces.s,\n })}\n`;\n\nconst LogoWrap = styled(Link)`\n display: flex;\n margin: 0;\n padding: 0;\n grid-area: logo;\n`;\n\nexport const HeaderSimple: React.FC = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n","import { createElement, PureComponent, createContext, useId, useState, Fragment } from 'react';\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (typeof call === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n\n return _assertThisInitialized(self);\n}\n\nfunction _createSuper(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nvar AccordionStore = /*#__PURE__*/_createClass(function AccordionStore(_ref) {\n var _this = this;\n\n var _ref$expanded = _ref.expanded,\n _expanded = _ref$expanded === void 0 ? [] : _ref$expanded,\n _ref$allowMultipleExp = _ref.allowMultipleExpanded,\n allowMultipleExpanded = _ref$allowMultipleExp === void 0 ? false : _ref$allowMultipleExp,\n _ref$allowZeroExpande = _ref.allowZeroExpanded,\n allowZeroExpanded = _ref$allowZeroExpande === void 0 ? false : _ref$allowZeroExpande;\n\n _classCallCheck(this, AccordionStore);\n\n _defineProperty(this, \"expanded\", void 0);\n\n _defineProperty(this, \"allowMultipleExpanded\", void 0);\n\n _defineProperty(this, \"allowZeroExpanded\", void 0);\n\n _defineProperty(this, \"toggleExpanded\", function (uuid) {\n if (_this.isItemDisabled(uuid)) {\n return _this;\n }\n\n var isExpanded = _this.isItemExpanded(uuid);\n\n if (!isExpanded) {\n return _this.augment({\n expanded: _this.allowMultipleExpanded ? [].concat(_toConsumableArray(_this.expanded), [uuid]) : [uuid]\n });\n } else {\n return _this.augment({\n expanded: _this.expanded.filter(function (expandedUuid) {\n return expandedUuid !== uuid;\n })\n });\n }\n });\n\n _defineProperty(this, \"isItemDisabled\", function (uuid) {\n var isExpanded = _this.isItemExpanded(uuid);\n\n var isOnlyOneExpanded = _this.expanded.length === 1;\n return Boolean(isExpanded && !_this.allowZeroExpanded && isOnlyOneExpanded);\n });\n\n _defineProperty(this, \"isItemExpanded\", function (uuid) {\n return _this.expanded.indexOf(uuid) !== -1;\n });\n\n _defineProperty(this, \"getPanelAttributes\", function (uuid, dangerouslySetExpanded) {\n var expanded = dangerouslySetExpanded !== null && dangerouslySetExpanded !== void 0 ? dangerouslySetExpanded : _this.isItemExpanded(uuid);\n return {\n role: _this.allowMultipleExpanded ? undefined : 'region',\n 'aria-hidden': _this.allowMultipleExpanded ? !expanded : undefined,\n 'aria-labelledby': _this.getButtonId(uuid),\n id: _this.getPanelId(uuid),\n hidden: expanded ? undefined : true\n };\n });\n\n _defineProperty(this, \"getHeadingAttributes\", function () {\n return {\n role: 'heading'\n };\n });\n\n _defineProperty(this, \"getButtonAttributes\", function (uuid, dangerouslySetExpanded) {\n var expanded = dangerouslySetExpanded !== null && dangerouslySetExpanded !== void 0 ? dangerouslySetExpanded : _this.isItemExpanded(uuid);\n\n var disabled = _this.isItemDisabled(uuid);\n\n return {\n id: _this.getButtonId(uuid),\n 'aria-disabled': disabled,\n 'aria-expanded': expanded,\n 'aria-controls': _this.getPanelId(uuid),\n role: 'button',\n tabIndex: 0\n };\n });\n\n _defineProperty(this, \"getPanelId\", function (id) {\n return \"accordion__panel-\".concat(id);\n });\n\n _defineProperty(this, \"getButtonId\", function (id) {\n return \"accordion__heading-\".concat(id);\n });\n\n _defineProperty(this, \"augment\", function (args) {\n return new AccordionStore(_objectSpread2({\n expanded: _this.expanded,\n allowMultipleExpanded: _this.allowMultipleExpanded,\n allowZeroExpanded: _this.allowZeroExpanded\n }, args));\n });\n\n this.expanded = _expanded;\n this.allowMultipleExpanded = allowMultipleExpanded;\n this.allowZeroExpanded = allowZeroExpanded;\n});\n\nvar Context = /*#__PURE__*/createContext(null);\nvar Provider = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(Provider, _React$PureComponent);\n\n var _super = _createSuper(Provider);\n\n function Provider() {\n var _this;\n\n _classCallCheck(this, Provider);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this), \"state\", new AccordionStore({\n expanded: _this.props.preExpanded,\n allowMultipleExpanded: _this.props.allowMultipleExpanded,\n allowZeroExpanded: _this.props.allowZeroExpanded\n }));\n\n _defineProperty(_assertThisInitialized(_this), \"toggleExpanded\", function (key) {\n _this.setState(function (state) {\n return state.toggleExpanded(key);\n }, function () {\n if (_this.props.onChange) {\n _this.props.onChange(_this.state.expanded);\n }\n });\n });\n\n _defineProperty(_assertThisInitialized(_this), \"isItemDisabled\", function (key) {\n return _this.state.isItemDisabled(key);\n });\n\n _defineProperty(_assertThisInitialized(_this), \"isItemExpanded\", function (key) {\n return _this.state.isItemExpanded(key);\n });\n\n _defineProperty(_assertThisInitialized(_this), \"getPanelAttributes\", function (key, dangerouslySetExpanded) {\n return _this.state.getPanelAttributes(key, dangerouslySetExpanded);\n });\n\n _defineProperty(_assertThisInitialized(_this), \"getHeadingAttributes\", function () {\n // uuid: UUID\n return _this.state.getHeadingAttributes();\n });\n\n _defineProperty(_assertThisInitialized(_this), \"getButtonAttributes\", function (key, dangerouslySetExpanded) {\n return _this.state.getButtonAttributes(key, dangerouslySetExpanded);\n });\n\n return _this;\n }\n\n _createClass(Provider, [{\n key: \"render\",\n value: function render() {\n var _this$state = this.state,\n allowZeroExpanded = _this$state.allowZeroExpanded,\n allowMultipleExpanded = _this$state.allowMultipleExpanded;\n return /*#__PURE__*/createElement(Context.Provider, {\n value: {\n allowMultipleExpanded: allowMultipleExpanded,\n allowZeroExpanded: allowZeroExpanded,\n toggleExpanded: this.toggleExpanded,\n isItemDisabled: this.isItemDisabled,\n isItemExpanded: this.isItemExpanded,\n getPanelAttributes: this.getPanelAttributes,\n getHeadingAttributes: this.getHeadingAttributes,\n getButtonAttributes: this.getButtonAttributes\n }\n }, this.props.children || null);\n }\n }]);\n\n return Provider;\n}(PureComponent);\n\n_defineProperty(Provider, \"defaultProps\", {\n allowMultipleExpanded: false,\n allowZeroExpanded: false\n});\n\nvar Consumer = /*#__PURE__*/function (_React$PureComponent2) {\n _inherits(Consumer, _React$PureComponent2);\n\n var _super2 = _createSuper(Consumer);\n\n function Consumer() {\n var _this2;\n\n _classCallCheck(this, Consumer);\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this2 = _super2.call.apply(_super2, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this2), \"renderChildren\", function (container) {\n return container ? _this2.props.children(container) : null;\n });\n\n return _this2;\n }\n\n _createClass(Consumer, [{\n key: \"render\",\n value: function render() {\n return /*#__PURE__*/createElement(Context.Consumer, null, this.renderChildren);\n }\n }]);\n\n return Consumer;\n}(PureComponent);\n\nvar _excluded = [\"className\", \"allowMultipleExpanded\", \"allowZeroExpanded\", \"onChange\", \"preExpanded\"];\n\nvar Accordion = function Accordion(_ref) {\n var _ref$className = _ref.className,\n className = _ref$className === void 0 ? 'accordion' : _ref$className,\n allowMultipleExpanded = _ref.allowMultipleExpanded,\n allowZeroExpanded = _ref.allowZeroExpanded,\n onChange = _ref.onChange,\n preExpanded = _ref.preExpanded,\n rest = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/createElement(Provider, {\n preExpanded: preExpanded,\n allowMultipleExpanded: allowMultipleExpanded,\n allowZeroExpanded: allowZeroExpanded,\n onChange: onChange\n }, /*#__PURE__*/createElement(\"div\", _extends({\n \"data-accordion-component\": \"Accordion\",\n className: className\n }, rest)));\n};\n\nvar DisplayName;\n\n(function (DisplayName) {\n DisplayName[\"Accordion\"] = \"Accordion\";\n DisplayName[\"AccordionItem\"] = \"AccordionItem\";\n DisplayName[\"AccordionItemButton\"] = \"AccordionItemButton\";\n DisplayName[\"AccordionItemHeading\"] = \"AccordionItemHeading\";\n DisplayName[\"AccordionItemPanel\"] = \"AccordionItemPanel\";\n})(DisplayName || (DisplayName = {}));\n\nvar DisplayName$1 = DisplayName;\n\n// @ts-ignore\nvar DEFAULT = 0;\nvar counter = 0;\nfunction useGlobalCounterId() {\n var current = counter;\n counter = counter + 1;\n return \"raa-\".concat(current);\n}\nfunction resetGlobalCounterId() {\n counter = DEFAULT;\n}\nvar useNextId = useId || useGlobalCounterId; // HTML5 ids allow all unicode characters, except for ASCII whitespaces\n// https://infra.spec.whatwg.org/#ascii-whitespace\n// eslint-disable-next-line no-control-regex\n\nvar idRegex = /[\\u0009\\u000a\\u000c\\u000d\\u0020]/g;\nfunction assertValidHtmlId(htmlId) {\n if (htmlId === '' || idRegex.test(htmlId)) {\n console.error(\"uuid must be a valid HTML5 id but was given \\\"\".concat(htmlId, \"\\\", ASCII whitespaces are forbidden\"));\n return false;\n }\n\n return true;\n}\n\nvar Context$1 = /*#__PURE__*/createContext(null);\n\nvar Provider$1 = function Provider(_ref) {\n var children = _ref.children,\n uuid = _ref.uuid,\n accordionContext = _ref.accordionContext,\n dangerouslySetExpanded = _ref.dangerouslySetExpanded;\n\n var toggleExpanded = function toggleExpanded() {\n accordionContext.toggleExpanded(uuid);\n };\n\n var renderChildren = function renderChildren(accordionContext) {\n var expanded = dangerouslySetExpanded !== null && dangerouslySetExpanded !== void 0 ? dangerouslySetExpanded : accordionContext.isItemExpanded(uuid);\n var disabled = accordionContext.isItemDisabled(uuid);\n var panelAttributes = accordionContext.getPanelAttributes(uuid, dangerouslySetExpanded);\n var headingAttributes = accordionContext.getHeadingAttributes(uuid);\n var buttonAttributes = accordionContext.getButtonAttributes(uuid, dangerouslySetExpanded);\n return /*#__PURE__*/createElement(Context$1.Provider, {\n value: {\n uuid: uuid,\n expanded: expanded,\n disabled: disabled,\n toggleExpanded: toggleExpanded,\n panelAttributes: panelAttributes,\n headingAttributes: headingAttributes,\n buttonAttributes: buttonAttributes\n }\n }, children);\n };\n\n return /*#__PURE__*/createElement(Consumer, null, renderChildren);\n};\n\nvar ProviderWrapper = function ProviderWrapper(props) {\n return /*#__PURE__*/createElement(Consumer, null, function (accordionContext) {\n return /*#__PURE__*/createElement(Provider$1, _extends({}, props, {\n accordionContext: accordionContext\n }));\n });\n};\nvar Consumer$1 = function Consumer(_ref2) {\n var children = _ref2.children;\n\n var renderChildren = function renderChildren(container) {\n return container ? children(container) : null;\n };\n\n return /*#__PURE__*/createElement(Context$1.Consumer, null, renderChildren);\n};\n\nvar _excluded$1 = [\"uuid\", \"dangerouslySetExpanded\", \"className\", \"activeClassName\"];\n\nvar AccordionItem = function AccordionItem(_ref) {\n var customUuid = _ref.uuid,\n dangerouslySetExpanded = _ref.dangerouslySetExpanded,\n _ref$className = _ref.className,\n className = _ref$className === void 0 ? 'accordion__item' : _ref$className,\n activeClassName = _ref.activeClassName,\n rest = _objectWithoutProperties(_ref, _excluded$1);\n\n var _useState = useState(useNextId()),\n _useState2 = _slicedToArray(_useState, 1),\n instanceUuid = _useState2[0];\n\n var uuid = customUuid !== null && customUuid !== void 0 ? customUuid : instanceUuid;\n\n var renderChildren = function renderChildren(itemContext) {\n var expanded = itemContext.expanded;\n var cx = expanded && activeClassName ? activeClassName : className;\n return /*#__PURE__*/createElement(\"div\", _extends({\n \"data-accordion-component\": \"AccordionItem\",\n className: cx\n }, rest));\n };\n\n assertValidHtmlId(uuid.toString());\n\n if (rest.id) {\n assertValidHtmlId(rest.id);\n }\n\n return /*#__PURE__*/createElement(ProviderWrapper, {\n uuid: uuid,\n dangerouslySetExpanded: dangerouslySetExpanded\n }, /*#__PURE__*/createElement(Consumer$1, null, renderChildren));\n};\n\nAccordionItem.displayName = DisplayName$1.AccordionItem;\n\nfunction getClosestAccordion(el) {\n return el && (el.matches('[data-accordion-component=\"Accordion\"]') ? el : getClosestAccordion(el.parentElement));\n}\nfunction getSiblingButtons(item) {\n var parentAccordion = getClosestAccordion(item);\n return parentAccordion && Array.from(parentAccordion.querySelectorAll('[data-accordion-component=\"AccordionItemButton\"]'));\n}\nfunction focusFirstSiblingOf(item) {\n var siblings = getSiblingButtons(item) || [];\n var first = siblings[0];\n\n if (first) {\n first.focus();\n }\n}\nfunction focusLastSiblingOf(item) {\n var siblings = getSiblingButtons(item) || [];\n var last = siblings[siblings.length - 1];\n\n if (last) {\n last.focus();\n }\n}\nfunction focusNextSiblingOf(item) {\n var siblings = getSiblingButtons(item) || [];\n var currentIndex = siblings.indexOf(item);\n\n if (currentIndex !== -1) {\n var next = siblings[currentIndex + 1];\n\n if (next) {\n next.focus();\n }\n }\n}\nfunction focusPreviousSiblingOf(item) {\n var siblings = getSiblingButtons(item) || [];\n var currentIndex = siblings.indexOf(item);\n\n if (currentIndex !== -1) {\n var previous = siblings[currentIndex - 1];\n\n if (previous) {\n previous.focus();\n }\n }\n}\n\nvar keycodes = {\n END: 'End',\n ENTER: 'Enter',\n HOME: 'Home',\n SPACE: ' ',\n SPACE_DEPRECATED: 'Spacebar',\n UP: 'ArrowUp',\n DOWN: 'ArrowDown',\n LEFT: 'ArrowLeft',\n RIGHT: 'ArrowRight'\n};\n\nvar _excluded$2 = [\"toggleExpanded\", \"className\"];\n\nvar AccordionItemButton = function AccordionItemButton(_ref) {\n var toggleExpanded = _ref.toggleExpanded,\n _ref$className = _ref.className,\n className = _ref$className === void 0 ? 'accordion__button' : _ref$className,\n rest = _objectWithoutProperties(_ref, _excluded$2);\n\n var handleKeyPress = function handleKeyPress(evt) {\n var keyCode = evt.key;\n\n if (keyCode === keycodes.ENTER || keyCode === keycodes.SPACE || keyCode === keycodes.SPACE_DEPRECATED) {\n evt.preventDefault();\n toggleExpanded();\n }\n /* The following block is ignored from test coverage because at time\n * time of writing Jest/react-testing-library can not assert 'focus'\n * functionality.\n */\n // istanbul ignore next\n\n\n if (evt.target instanceof HTMLElement) {\n switch (keyCode) {\n case keycodes.HOME:\n {\n evt.preventDefault();\n focusFirstSiblingOf(evt.target);\n break;\n }\n\n case keycodes.END:\n {\n evt.preventDefault();\n focusLastSiblingOf(evt.target);\n break;\n }\n\n case keycodes.LEFT:\n case keycodes.UP:\n {\n evt.preventDefault();\n focusPreviousSiblingOf(evt.target);\n break;\n }\n\n case keycodes.RIGHT:\n case keycodes.DOWN:\n {\n evt.preventDefault();\n focusNextSiblingOf(evt.target);\n break;\n }\n }\n }\n };\n\n if (rest.id) {\n assertValidHtmlId(rest.id);\n }\n\n return /*#__PURE__*/createElement(\"div\", _extends({\n className: className\n }, rest, {\n role: \"button\",\n tabIndex: 0,\n onClick: toggleExpanded,\n onKeyDown: handleKeyPress,\n \"data-accordion-component\": \"AccordionItemButton\"\n }));\n};\n\nvar AccordionItemButtonWrapper = function AccordionItemButtonWrapper(props) {\n return /*#__PURE__*/createElement(Consumer$1, null, function (itemContext) {\n var toggleExpanded = itemContext.toggleExpanded,\n buttonAttributes = itemContext.buttonAttributes;\n return /*#__PURE__*/createElement(AccordionItemButton, _extends({\n toggleExpanded: toggleExpanded\n }, props, buttonAttributes));\n });\n};\n\nvar defaultProps = {\n className: 'accordion__heading',\n 'aria-level': 3\n};\nvar SPEC_ERROR = \"AccordionItemButton may contain only one child element, which must be an instance of AccordionItemButton.\\n\\nFrom the WAI-ARIA spec (https://www.w3.org/TR/wai-aria-practices-1.1/#accordion):\\n\\n\\u201CThe button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.\\u201D\\n\\n\";\nvar AccordionItemHeading = /*#__PURE__*/function (_React$PureComponent) {\n _inherits(AccordionItemHeading, _React$PureComponent);\n\n var _super = _createSuper(AccordionItemHeading);\n\n function AccordionItemHeading() {\n var _this;\n\n _classCallCheck(this, AccordionItemHeading);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _super.call.apply(_super, [this].concat(args));\n\n _defineProperty(_assertThisInitialized(_this), \"ref\", void 0);\n\n _defineProperty(_assertThisInitialized(_this), \"setRef\", function (ref) {\n _this.ref = ref;\n });\n\n return _this;\n }\n\n _createClass(AccordionItemHeading, [{\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n AccordionItemHeading.VALIDATE(this.ref);\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n AccordionItemHeading.VALIDATE(this.ref);\n }\n }, {\n key: \"render\",\n value: function render() {\n return /*#__PURE__*/createElement(\"div\", _extends({\n \"data-accordion-component\": \"AccordionItemHeading\"\n }, this.props, {\n ref: this.setRef\n }));\n }\n }], [{\n key: \"VALIDATE\",\n value: function VALIDATE(ref) {\n if (ref === undefined) {\n throw new Error('ref is undefined');\n }\n\n if (!(ref.childElementCount === 1 && ref.firstElementChild && ref.firstElementChild.getAttribute('data-accordion-component') === 'AccordionItemButton')) {\n throw new Error(SPEC_ERROR);\n }\n }\n }]);\n\n return AccordionItemHeading;\n}(PureComponent);\n\n_defineProperty(AccordionItemHeading, \"defaultProps\", defaultProps);\n\nvar AccordionItemHeadingWrapper = function AccordionItemHeadingWrapper(props) {\n return /*#__PURE__*/createElement(Consumer$1, null, function (itemContext) {\n var headingAttributes = itemContext.headingAttributes;\n\n if (props.id) {\n assertValidHtmlId(props.id);\n }\n\n return /*#__PURE__*/createElement(AccordionItemHeading, _extends({}, props, headingAttributes));\n });\n};\n\nAccordionItemHeadingWrapper.displayName = DisplayName$1.AccordionItemHeading;\n\nvar _excluded$3 = [\"className\", \"region\", \"id\"];\n\nvar AccordionItemPanel = function AccordionItemPanel(_ref) {\n var _ref$className = _ref.className,\n className = _ref$className === void 0 ? 'accordion__panel' : _ref$className,\n region = _ref.region,\n id = _ref.id,\n rest = _objectWithoutProperties(_ref, _excluded$3);\n\n var renderChildren = function renderChildren(_ref2) {\n var panelAttributes = _ref2.panelAttributes;\n\n if (id) {\n assertValidHtmlId(id);\n }\n\n var attrs = _objectSpread2(_objectSpread2({}, panelAttributes), {}, {\n 'aria-labelledby': region ? panelAttributes['aria-labelledby'] : undefined\n });\n\n return /*#__PURE__*/createElement(\"div\", _extends({\n \"data-accordion-component\": \"AccordionItemPanel\",\n className: className\n }, rest, attrs, {\n role: region ? 'region' : undefined\n }));\n };\n\n return /*#__PURE__*/createElement(Consumer$1, null, renderChildren);\n};\n\nvar AccordionItemState = function AccordionItemState(_ref) {\n var children = _ref.children;\n\n var renderChildren = function renderChildren(itemContext) {\n var expanded = itemContext.expanded,\n disabled = itemContext.disabled;\n return /*#__PURE__*/createElement(Fragment, null, children({\n expanded: expanded,\n disabled: disabled\n }));\n };\n\n return /*#__PURE__*/createElement(Consumer$1, null, renderChildren);\n};\n\nexport { Accordion, AccordionItem, AccordionItemButtonWrapper as AccordionItemButton, AccordionItemHeadingWrapper as AccordionItemHeading, AccordionItemPanel, AccordionItemState, resetGlobalCounterId as resetNextUuid };\n","import { Link } from 'gatsby';\nimport { rgba } from 'polished';\nimport React, { useState } from 'react';\nimport {\n Accordion,\n AccordionItem,\n AccordionItemButton,\n AccordionItemHeading,\n AccordionItemPanel,\n} from 'react-accessible-accordion';\nimport styled from 'styled-components';\nimport { Logo, Text, Flex } from '../../../components/blocks';\nimport { useMedia } from '../../../utils/useMedia';\n\nconst Root = styled.footer`\n width: 100%;\n padding: ${({ theme }) => theme.spaces.l};\n background: ${({ theme }) => theme.backgroundColors.black};\n margin-top: auto;\n\n ${({ theme }) =>\n theme.screen.sp({\n paddingBottom: theme.spaces.ex,\n })}\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: space-between;\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: ${({ theme }) => `${theme.spaces.xl} auto ${theme.spaces.xxxl}`};\n gap: ${({ theme }) => theme.spaces.l};\n\n ${({ theme }) =>\n theme.screen.sp({\n flexDirection: 'column',\n gap: theme.spaces.xl,\n })}\n`;\n\nconst List = styled.ul`\n display: flex;\n flex-direction: column;\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `${theme.spaces.m} 0`,\n })}\n`;\n\nconst Items = styled.li`\n margin: 0;\n padding: ${({ theme }) => theme.spaces.m} 0;\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: 0,\n })}\n`;\n\nconst Links = styled(Link)`\n display: inline-block;\n color: ${({ theme }) => theme.fontColors.white};\n padding: ${({ theme }) => theme.spaces.xs} 0;\n font-size: ${({ theme }) => theme.fontSizes.xs};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n\n &:hover {\n box-shadow: 0 1px 0 ${({ theme }) => rgba(theme.borderColors.white, 0.5)};\n opacity: 0.8;\n\n ${({ theme }) =>\n theme.screen.sp({\n boxShadow: 'none',\n backgroundColor: rgba(theme.backgroundColors.white, 0.2),\n })}\n }\n\n ${({ theme }) =>\n theme.screen.sp({\n width: '100%',\n padding: `${theme.spaces.l} 0`,\n })}\n`;\n\nconst ExternalLinks = styled.a`\n display: inline-block;\n color: ${({ theme }) => theme.fontColors.white};\n padding: ${({ theme }) => theme.spaces.xs} 0;\n font-size: ${({ theme }) => theme.fontSizes.xs};\n transition-duration: ${({ theme }) => theme.transitions.normal};\n\n &:hover {\n box-shadow: 0 1px 0 ${({ theme }) => rgba(theme.borderColors.white, 0.5)};\n opacity: 0.8;\n\n ${({ theme }) =>\n theme.screen.sp({\n boxShadow: 'none',\n backgroundColor: rgba(theme.backgroundColors.white, 0.2),\n })}\n }\n\n ${({ theme }) =>\n theme.screen.sp({\n width: '100%',\n padding: `${theme.spaces.l} 0`,\n })}\n`;\n\nconst LogoWrap = styled(Link)`\n margin-top: ${({ theme }) => theme.spaces.l};\n`;\n\nconst Copyright = styled.address`\n margin-bottom: ${({ theme }) => theme.spaces.l};\n font-size: ${({ theme }) => theme.fontSizes.xs};\n color: ${({ theme }) => theme.fontColors.white};\n font-style: normal;\n text-align: center;\n`;\n\ntype ArrowProps = {\n expand?: boolean;\n};\n\nconst Arrow = styled.div`\n display: block;\n width: 8px;\n height: 8px;\n border: 1px solid transparent;\n border-top-color: ${({ theme }) => theme.backgroundColors.white};\n border-left-color: ${({ theme }) => theme.backgroundColors.white};\n transition: ${({ theme }) => theme.transitions.normal};\n transform: ${({ expand }) => (expand ? 'rotate(45deg)' : 'rotate(225deg)')};\n`;\n\nconst OverrideAccordion = styled(Accordion)`\n [hidden] {\n display: none;\n }\n\n .accordion__button {\n ${Flex} {\n padding: ${({ theme }) => theme.spaces.m} 0;\n }\n }\n\n .accordion__panel {\n padding: ${({ theme }) => theme.spaces.l};\n }\n`;\n\nexport const Footer: React.FC = () => {\n const [isAbout, setIsAbout] = useState(false);\n const [isFunction, setIsFunction] = useState(false);\n const [isProducts, setIsProducts] = useState(false);\n\n const expandIsAbout = () => {\n setIsAbout(!isAbout);\n };\n const expandIsFunction = () => {\n setIsFunction(!isFunction);\n };\n const expandIsProducts = () => {\n setIsProducts(!isProducts);\n };\n\n return (\n \n \n \n \n \n {useMedia(`(max-width: 799px)`) ? (\n \n \n \n \n \n \n \n \n Dentisとは\n \n \n \n \n \n \n \n \n Dentisの特長\n \n \n 歯科DXの業務\n \n \n 機能一覧\n \n \n セキュリティの取り組み\n \n \n 充実のサポート\n \n \n Dentisの想い\n \n \n
\n \n \n \n \n \n \n \n \n 便利な機能\n \n \n \n \n \n \n \n \n 予約システム\n \n \n オンライン診療\n \n \n Web問診\n \n \n メッセージ配信\n \n \n 訪問歯科\n \n \n サブカルテ\n \n \n カルテ・レセコン\n \n \n 分析・物販\n \n \n
\n \n \n \n 導入事例\n \n \n 料金\n \n \n お知らせ・イベント\n \n \n ブログ\n \n \n お問い合わせ\n \n \n \n 運営会社\n \n \n
\n \n \n \n \n \n \n \n メドレーのプロダクト\n \n \n \n \n \n \n \n \n \n クラウド診療支援システム「CLINICS」\n \n \n \n \n かかりつけ薬局支援システム「Pharms」\n \n \n \n \n オンライン診療・服薬指導アプリ「CLINICS」\n \n \n \n \n 医師たちがつくるオンライン医療事典「MEDLEY」\n \n \n \n \n 日本最大級の医療介護求人サイト「ジョブメドレー」\n \n \n \n \n 納得できる老人ホーム探し「介護のほんね」\n \n \n \n \n 女性向け生理予測・妊活アプリ「Lalune(ラルーン)」\n \n \n \n
\n \n \n ) : (\n <>\n \n \n \n Dentisとは\n \n \n \n Dentisの特長\n \n \n 歯科DXの業務\n \n \n 機能一覧\n \n \n セキュリティの取り組み\n \n \n 充実のサポート\n \n \n Dentisの想い\n \n
\n \n \n \n 便利な機能\n \n \n \n 予約システム\n \n \n オンライン診療\n \n \n Web問診\n \n \n メッセージ配信\n \n \n 訪問歯科\n \n \n サブカルテ\n \n \n カルテ・レセコン\n \n \n 分析・物販\n \n
\n \n \n 導入事例\n \n \n 料金\n \n \n お知らせ・イベント\n \n \n ブログ\n \n \n お問い合わせ\n \n \n \n 運営会社\n \n \n
\n \n \n \n メドレーのプロダクト\n \n \n \n \n クラウド診療支援システム「CLINICS」\n \n \n \n \n かかりつけ薬局支援システム「Pharms」\n \n \n \n \n オンライン診療・服薬指導アプリ「CLINICS」\n \n \n \n \n 医師たちがつくるオンライン医療事典「MEDLEY」\n \n \n \n \n 日本最大級の医療介護求人サイト「ジョブメドレー」\n \n \n \n \n 納得できる老人ホーム探し「介護のほんね」\n \n \n \n \n 女性向け生理予測・妊活アプリ「Lalune(ラルーン)」\n \n \n
\n \n )}\n \n ©2022 MEDLEY, INC.\n \n );\n};\n","import { Link } from 'gatsby';\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport { Logo } from '../../../components/blocks';\n\nconst Root = styled.footer`\n width: 100%;\n padding: ${({ theme }) => theme.spaces.l};\n background: ${({ theme }) => theme.backgroundColors.black};\n margin-top: auto;\n\n ${({ theme }) =>\n theme.screen.sp({\n paddingBottom: theme.spaces.ex,\n })}\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n max-width: ${({ theme }) => theme.windowSizes.m};\n margin: ${({ theme }) => `${theme.spaces.xl} auto ${theme.spaces.xxxl}`};\n gap: ${({ theme }) => theme.spaces.l};\n\n ${({ theme }) =>\n theme.screen.sp({\n flexDirection: 'column',\n gap: theme.spaces.xl,\n })}\n`;\n\nconst LogoWrap = styled(Link)`\n margin-top: ${({ theme }) => theme.spaces.l};\n`;\n\nconst Copyright = styled.address`\n margin-bottom: ${({ theme }) => theme.spaces.l};\n font-size: ${({ theme }) => theme.fontSizes.xs};\n color: ${({ theme }) => theme.fontColors.white};\n font-style: normal;\n text-align: center;\n`;\n\nexport const FooterSimple: React.FC = () => {\n return (\n \n \n \n \n \n \n ©2022 MEDLEY, INC.\n \n );\n};\n","import * as React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { GlobalStyles } from '../../../styles/GlobalStyles';\n\nimport { appTheme } from '../../../styles/theme';\nimport { HeaderSimple, Header, Footer, FooterSimple } from '../../navigations';\nimport { Flex } from '../../../components/blocks';\nimport styled from 'styled-components';\n\nimport '@fontsource/yakuhanjps';\n\ntype Props = {\n slim?: boolean;\n children: React.ReactNode;\n location?: string;\n};\n\nconst Main = styled.main`\n width: 100%;\n`;\n\nexport const Layout = (props: Props) => {\n return (\n \n \n {props.slim === true ? : }\n {props.children}\n {props.slim === true ? : }\n \n \n \n );\n};\n","import styled, { CSSProperties } from 'styled-components';\nimport { AppTheme } from '../../src/styles/theme';\n\ntype Props = {\n color?: keyof AppTheme['fontColors'];\n size?: keyof AppTheme['fontSizes'];\n notdot?: boolean;\n};\n\nconst Item = styled.li`\n display: flex;\n margin: 0;\n padding: ${({ theme }) => theme.spaces.s};\n\n &:before {\n content: ${({ notdot }) => (notdot ? 'initial' : '\"・\"')};\n }\n`;\n\nconst Root = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n color: ${({ theme, color }) =>\n color ? theme.fontColors[color] : theme.fontColors.default};\n\n & > ${Item} {\n font-size: ${({ theme, size }) => size && theme.fontSizes[size]};\n\n &:before {\n font-size: ${({ theme, size }) => size && theme.fontSizes[size]};\n }\n }\n`;\n\nexport const List = Object.assign(Root, { Item });\n","import styled, { keyframes } from 'styled-components';\nimport { rgba } from 'polished';\nimport { margin, MarginProps } from '../../../components/styles';\n\nconst Loading = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const Loader = styled.div`\n border-radius: ${({ theme }) => theme.radii.circle};\n width: 24px;\n height: 24px;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n border: 4px solid ${({ theme }) => rgba(theme.backgroundColors.white, 0.2)};\n border-left: 4px solid ${({ theme }) => theme.backgroundColors.white};\n transform: translateZ(0);\n animation: ${Loading} 1.1s infinite linear;\n ${margin}\n\n &:after {\n border-radius: ${({ theme }) => theme.radii.circle};\n width: 10rem;\n height: 10rem;\n }\n`;\n","var __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\n\n// src/YouTube.tsx\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport isEqual from \"fast-deep-equal\";\nimport youTubePlayer from \"youtube-player\";\nfunction shouldUpdateVideo(prevProps, props) {\n var _a, _b;\n if (prevProps.videoId !== props.videoId) {\n return true;\n }\n const prevVars = ((_a = prevProps.opts) == null ? void 0 : _a.playerVars) || {};\n const vars = ((_b = props.opts) == null ? void 0 : _b.playerVars) || {};\n return prevVars.start !== vars.start || prevVars.end !== vars.end;\n}\nfunction filterResetOptions(opts = {}) {\n return __spreadProps(__spreadValues({}, opts), {\n height: 0,\n width: 0,\n playerVars: __spreadProps(__spreadValues({}, opts.playerVars), {\n autoplay: 0,\n start: 0,\n end: 0\n })\n });\n}\nfunction shouldResetPlayer(prevProps, props) {\n return prevProps.videoId !== props.videoId || !isEqual(filterResetOptions(prevProps.opts), filterResetOptions(props.opts));\n}\nfunction shouldUpdatePlayer(prevProps, props) {\n var _a, _b, _c, _d;\n return prevProps.id !== props.id || prevProps.className !== props.className || ((_a = prevProps.opts) == null ? void 0 : _a.width) !== ((_b = props.opts) == null ? void 0 : _b.width) || ((_c = prevProps.opts) == null ? void 0 : _c.height) !== ((_d = props.opts) == null ? void 0 : _d.height) || prevProps.iframeClassName !== props.iframeClassName || prevProps.title !== props.title;\n}\nvar defaultProps = {\n videoId: \"\",\n id: \"\",\n className: \"\",\n iframeClassName: \"\",\n style: {},\n title: \"\",\n loading: void 0,\n opts: {},\n onReady: () => {\n },\n onError: () => {\n },\n onPlay: () => {\n },\n onPause: () => {\n },\n onEnd: () => {\n },\n onStateChange: () => {\n },\n onPlaybackRateChange: () => {\n },\n onPlaybackQualityChange: () => {\n }\n};\nvar propTypes = {\n videoId: PropTypes.string,\n id: PropTypes.string,\n className: PropTypes.string,\n iframeClassName: PropTypes.string,\n style: PropTypes.object,\n title: PropTypes.string,\n loading: PropTypes.oneOf([\"lazy\", \"eager\"]),\n opts: PropTypes.objectOf(PropTypes.any),\n onReady: PropTypes.func,\n onError: PropTypes.func,\n onPlay: PropTypes.func,\n onPause: PropTypes.func,\n onEnd: PropTypes.func,\n onStateChange: PropTypes.func,\n onPlaybackRateChange: PropTypes.func,\n onPlaybackQualityChange: PropTypes.func\n};\nvar _YouTube = class extends React.Component {\n constructor(props) {\n super(props);\n this.destroyPlayerPromise = void 0;\n this.onPlayerReady = (event) => {\n var _a, _b;\n return (_b = (_a = this.props).onReady) == null ? void 0 : _b.call(_a, event);\n };\n this.onPlayerError = (event) => {\n var _a, _b;\n return (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, event);\n };\n this.onPlayerStateChange = (event) => {\n var _a, _b, _c, _d, _e, _f, _g, _h;\n (_b = (_a = this.props).onStateChange) == null ? void 0 : _b.call(_a, event);\n switch (event.data) {\n case _YouTube.PlayerState.ENDED:\n (_d = (_c = this.props).onEnd) == null ? void 0 : _d.call(_c, event);\n break;\n case _YouTube.PlayerState.PLAYING:\n (_f = (_e = this.props).onPlay) == null ? void 0 : _f.call(_e, event);\n break;\n case _YouTube.PlayerState.PAUSED:\n (_h = (_g = this.props).onPause) == null ? void 0 : _h.call(_g, event);\n break;\n default:\n }\n };\n this.onPlayerPlaybackRateChange = (event) => {\n var _a, _b;\n return (_b = (_a = this.props).onPlaybackRateChange) == null ? void 0 : _b.call(_a, event);\n };\n this.onPlayerPlaybackQualityChange = (event) => {\n var _a, _b;\n return (_b = (_a = this.props).onPlaybackQualityChange) == null ? void 0 : _b.call(_a, event);\n };\n this.destroyPlayer = () => {\n if (this.internalPlayer) {\n this.destroyPlayerPromise = this.internalPlayer.destroy().then(() => this.destroyPlayerPromise = void 0);\n return this.destroyPlayerPromise;\n }\n return Promise.resolve();\n };\n this.createPlayer = () => {\n if (typeof document === \"undefined\")\n return;\n if (this.destroyPlayerPromise) {\n this.destroyPlayerPromise.then(this.createPlayer);\n return;\n }\n const playerOpts = __spreadProps(__spreadValues({}, this.props.opts), {\n videoId: this.props.videoId\n });\n this.internalPlayer = youTubePlayer(this.container, playerOpts);\n this.internalPlayer.on(\"ready\", this.onPlayerReady);\n this.internalPlayer.on(\"error\", this.onPlayerError);\n this.internalPlayer.on(\"stateChange\", this.onPlayerStateChange);\n this.internalPlayer.on(\"playbackRateChange\", this.onPlayerPlaybackRateChange);\n this.internalPlayer.on(\"playbackQualityChange\", this.onPlayerPlaybackQualityChange);\n if (this.props.title || this.props.loading) {\n this.internalPlayer.getIframe().then((iframe) => {\n if (this.props.title)\n iframe.setAttribute(\"title\", this.props.title);\n if (this.props.loading)\n iframe.setAttribute(\"loading\", this.props.loading);\n });\n }\n };\n this.resetPlayer = () => this.destroyPlayer().then(this.createPlayer);\n this.updatePlayer = () => {\n var _a;\n (_a = this.internalPlayer) == null ? void 0 : _a.getIframe().then((iframe) => {\n if (this.props.id)\n iframe.setAttribute(\"id\", this.props.id);\n else\n iframe.removeAttribute(\"id\");\n if (this.props.iframeClassName)\n iframe.setAttribute(\"class\", this.props.iframeClassName);\n else\n iframe.removeAttribute(\"class\");\n if (this.props.opts && this.props.opts.width)\n iframe.setAttribute(\"width\", this.props.opts.width.toString());\n else\n iframe.removeAttribute(\"width\");\n if (this.props.opts && this.props.opts.height)\n iframe.setAttribute(\"height\", this.props.opts.height.toString());\n else\n iframe.removeAttribute(\"height\");\n if (this.props.title)\n iframe.setAttribute(\"title\", this.props.title);\n else\n iframe.setAttribute(\"title\", \"YouTube video player\");\n if (this.props.loading)\n iframe.setAttribute(\"loading\", this.props.loading);\n else\n iframe.removeAttribute(\"loading\");\n });\n };\n this.getInternalPlayer = () => {\n return this.internalPlayer;\n };\n this.updateVideo = () => {\n var _a, _b, _c, _d;\n if (typeof this.props.videoId === \"undefined\" || this.props.videoId === null) {\n (_a = this.internalPlayer) == null ? void 0 : _a.stopVideo();\n return;\n }\n let autoplay = false;\n const opts = {\n videoId: this.props.videoId\n };\n if ((_b = this.props.opts) == null ? void 0 : _b.playerVars) {\n autoplay = this.props.opts.playerVars.autoplay === 1;\n if (\"start\" in this.props.opts.playerVars) {\n opts.startSeconds = this.props.opts.playerVars.start;\n }\n if (\"end\" in this.props.opts.playerVars) {\n opts.endSeconds = this.props.opts.playerVars.end;\n }\n }\n if (autoplay) {\n (_c = this.internalPlayer) == null ? void 0 : _c.loadVideoById(opts);\n return;\n }\n (_d = this.internalPlayer) == null ? void 0 : _d.cueVideoById(opts);\n };\n this.refContainer = (container) => {\n this.container = container;\n };\n this.container = null;\n this.internalPlayer = null;\n }\n componentDidMount() {\n this.createPlayer();\n }\n async componentDidUpdate(prevProps) {\n if (shouldUpdatePlayer(prevProps, this.props)) {\n this.updatePlayer();\n }\n if (shouldResetPlayer(prevProps, this.props)) {\n await this.resetPlayer();\n }\n if (shouldUpdateVideo(prevProps, this.props)) {\n this.updateVideo();\n }\n }\n componentWillUnmount() {\n this.destroyPlayer();\n }\n render() {\n return /* @__PURE__ */ React.createElement(\"div\", {\n className: this.props.className,\n style: this.props.style\n }, /* @__PURE__ */ React.createElement(\"div\", {\n id: this.props.id,\n className: this.props.iframeClassName,\n ref: this.refContainer\n }));\n }\n};\nvar YouTube = _YouTube;\nYouTube.propTypes = propTypes;\nYouTube.defaultProps = defaultProps;\nYouTube.PlayerState = {\n UNSTARTED: -1,\n ENDED: 0,\n PLAYING: 1,\n PAUSED: 2,\n BUFFERING: 3,\n CUED: 5\n};\nvar YouTube_default = YouTube;\nexport {\n YouTube_default as default\n};\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport YouTube, { YouTubeProps } from 'react-youtube';\n\ntype Props = {\n videoId: string;\n autoplay?: boolean;\n};\n\nconst Root = styled(YouTube)`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 0;\n padding-bottom: 56.25%;\n background: ${({ theme }) => theme.backgroundColors.black};\n color: ${({ theme }) => theme.fontColors.white};\n border-radius: ${({ theme }) => theme.radii.m};\n overflow: hidden;\n\n iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const Videos: React.FC = (props) => {\n const opts: YouTubeProps['opts'] = {\n playerVars: {\n // https://developers.google.com/youtube/player_parameters\n autoplay: props.autoplay ? 1 : 0,\n playlist: 'GmL0zU4-YyU,h1HphsdKBjU,TMOIXyj12ec',\n rel: 0,\n modestbranding: 1,\n playsinline: 0,\n },\n };\n\n return ;\n};\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { Input } from '../../../components/blocks';\n\n// SPAM-honeypot\n// https://help.salesforce.com/s/articleView?id=sf.pardot_forms_add_honeypot.htm&type=5\n\nconst Label = styled.label`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: ${({ theme }) => theme.fontSizes.xs};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.lightgrey};\n`;\n\nconst Root = styled.div`\n position: absolute;\n top: -9999px;\n left: -9999px;\n`;\n\nexport const HoneyPod: React.FC = () => {\n return (\n \n \n \n \n );\n};\n","export const companyPositions = [\n { value: '', label: '選択してください' },\n { value: '理事長', label: '理事長' },\n { value: '理事', label: '理事' },\n { value: '院長', label: '院長' },\n { value: '副院長', label: '副院長' },\n { value: '事務長', label: '事務長' },\n { value: '勤務医', label: '勤務医' },\n { value: '歯科衛生士', label: '歯科衛生士' },\n { value: '歯科助手', label: '歯科助手' },\n { value: '受付・事務', label: '受付・事務' },\n { value: 'その他の医療従事者', label: 'その他の医療従事者' },\n { value: '医療関係企業従事者', label: '医療関係企業従事者' },\n];\n\nexport const startPrace = [\n { value: '', label: '選択してください' },\n {\n value: '新規開業（分院開業）予定はない',\n label: '新規開業（分院開業）予定はない',\n },\n {\n value: '新規開業を検討している',\n label: '新規開業を検討している',\n },\n {\n value: '分院開業を検討している',\n label: '分院開業を検討している',\n },\n {\n value: '家族継承を検討している',\n label: '家族継承を検討している',\n },\n];\n\nexport const statusVisit = [\n { value: '', label: '選択してください' },\n {\n value: '実施してない (今後予定なし)',\n label: '実施してない (今後予定なし)',\n },\n {\n value: '実施してない (今後予定あり)',\n label: '実施してない (今後予定あり)',\n },\n {\n value: '実施している (月5名未満)',\n label: '実施している (月5名未満)',\n },\n {\n value: '実施している (月5名以上)',\n label: '実施している (月5名以上)',\n },\n];\n","import React, { useState, useCallback } from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport {\n Button,\n Flex,\n Input,\n Loader,\n Select,\n Tag,\n Text,\n Textarea,\n} from '../index';\nimport { HoneyPod } from './honeypod';\nimport { Formik } from 'formik';\nimport * as Yup from 'yup';\n\nimport { companyPositions, startPrace, statusVisit } from './values';\n\ntype OptionProps = {\n companyName?: boolean; //医療機関名\n companyPosition?: boolean; //役職\n receiptComputer?: boolean; //レセコンメーカー任意\n inquiry?: boolean; // お問い合わせ内容任意\n inquiryRequired?: boolean; // お問い合わせ内容必須\n opening?: boolean; // 開業状況\n visit?: boolean; // 訪問診療可否\n policy?: string; //独自プライバシーポリシー設定\n utmSource?: string; //参照元\n utmMedium?: string; //メディア識別\n utmCampaign?: string; //プロモーションコード\n};\n\ntype Props = {\n url?: string;\n title?: string;\n html?: React.ReactNode;\n nontitle?: boolean;\n id?: string;\n size?: 's' | 'm';\n children?: React.ReactNode;\n download?: boolean; //submitボタンの文言をダウンロードに\n position?: React.RefObject; // サイドバナーの隠れる・表示されるスクロール量の計測\n} & OptionProps;\n\nconst Root = styled.section`\n width: 100%;\n max-width: ${({ theme }) => theme.windowSizes.s};\n margin: 0 auto 80px;\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `${theme.spaces.xxl} 0 0`,\n })}\n`;\n\nconst FormList = styled(Flex)`\n width: 100%;\n max-width: 640px;\n margin: 0 auto;\n padding: ${({ theme }) =>\n `${theme.spaces.xxl} ${theme.spaces.xxl} ${theme.spaces.l}`};\n align-items: flex-start;\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.l};\n box-shadow: ${({ theme }) => theme.boxShadow.base};\n border-radius: ${({ theme }) => theme.radii.l};\n\n ${({ theme }) =>\n theme.screen.sp({\n padding: `${theme.spaces.xxl} ${theme.spaces.l} 0`,\n })}\n`;\n\nconst FormItem = styled(Flex)`\n gap: ${({ theme }) => theme.spaces.m};\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormInput = styled(Flex)`\n width: 100%;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.s};\n`;\n\nconst Label = styled.label`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: ${({ theme }) => theme.fontSizes.xs};\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n color: ${({ theme }) => theme.fontColors.lightgrey};\n`;\n\nconst FormBottom = styled(Flex)`\n padding: ${({ theme }) => `${theme.spaces.s} 0 ${theme.spaces.xl}`};\n width: 100%;\n flex-direction: column;\n gap: ${({ theme }) => theme.spaces.l};\n`;\n\nconst Links = styled.a`\n display: inline-block;\n padding: ${({ theme }) => theme.spaces.xs} 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n box-shadow: 0 1px 0 ${({ theme }) => theme.borderColors.black};\n\n &:hover {\n box-shadow: 0 1px 0 ${({ theme }) => theme.borderColors.default};\n }\n`;\n\nconst Names = styled(Flex)`\n ${({ theme }) =>\n theme.screen.sp({\n flexDirection: 'column',\n })}\n`;\n\nconst PolicyText = styled(Text)`\n a {\n display: inline-block;\n padding: ${({ theme }) => theme.spaces.xs} 0;\n transition-duration: ${({ theme }) => theme.transitions.normal};\n box-shadow: 0 1px 0 ${({ theme }) => theme.borderColors.black};\n\n &:hover {\n box-shadow: 0 1px 0 ${({ theme }) => theme.borderColors.default};\n }\n }\n`;\n\nexport const Form: React.FC = (props) => {\n const theme = useTheme();\n const [Submitting, setSubmitting] = useState(false);\n\n const HandleSubmit = useCallback(() => {\n setSubmitting(true);\n }, []);\n\n return (\n \n {props.html && props.html && props.html}\n {props.title && (\n \n {props.title && props.title}\n \n )}\n {/* これはバナーを表示したいときなど */}\n {props.children}\n {}}\n validationSchema={Yup.object().shape({\n familyName: Yup.string().required('姓を入力してください'),\n givenName: Yup.string().required('名を入力してください'),\n companyName: Yup.string().required('医療機関名を入力してください'),\n companyPosition: Yup.string().required('役職を選択してください'),\n tel: Yup.number()\n .required('携帯電話番号を入力してください')\n .typeError('半角数字を入力してください'),\n email: Yup.string()\n .email('メールアドレスの形式に誤りがあります。')\n .required('メールアドレスを入力してください'),\n })}\n >\n {({\n // handleSubmit,\n handleChange,\n handleBlur,\n values,\n errors,\n touched,\n }) => (\n