[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"targets\": {\n \"browsers\": [\n \"last 2 Chrome versions\",\n \"last 2 Firefox versions\",\n \"Firefox ESR\",\n \"last 3 Safari versions\",\n \"last 2 Edge versions\",\n \"last 3 iOS versions\",\n \"last 2 ChromeAndroid versions\",\n \"last 2 FirefoxAndroid versions\"\n ]\n }\n }\n ],\n \"@babel/preset-flow\",\n \"@babel/preset-react\",\n \"@babel/preset-typescript\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-class-properties\",\n \"@babel/plugin-transform-flow-strip-types\"\n ]\n}\n" }, { "path": ".circleci/config.yml", "content": "version: 2.1\nexecutors:\n node:\n docker:\n - image: cimg/node:18.16.1\n\ndefaults: &defaults\n working_directory: ~/repo\n parallelism: 1\n executor:\n name: node\n\naliases:\n - &restore_npm_cache\n restore_cache:\n keys:\n - npm-v7-dependency-{{ checksum \"package-lock.json\" }}\n - npm-v7-dependency-\n\njobs:\n build:\n <<: *defaults\n\n steps:\n - checkout\n\n - persist_to_workspace:\n root: ~/\n paths:\n - repo\n\n - *restore_npm_cache\n\n - run:\n name: install node dependencies\n command: |\n npm install\n\n - run:\n name: build package\n command: |\n npm run build\n\n - save_cache:\n paths:\n - ./node_modules\n key: npm-v7-dependency-{{ checksum \"package-lock.json\" }}\n\n eslint_flow:\n <<: *defaults\n\n steps:\n - attach_workspace:\n at: ~/\n\n - *restore_npm_cache\n\n - run:\n name: lint check for javascript\n command: |\n npm run lint --max-warnings=0\n\n - store_test_results:\n path: ./tmp/eslint\n\n stylelint:\n <<: *defaults\n\n steps:\n - attach_workspace:\n at: ~/\n\n - *restore_npm_cache\n\n - run:\n name: stylelint\n command: |\n npm run stylelint\n\n - store_test_results:\n path: ./tmp/stylelint\n\n build_storybook:\n <<: *defaults\n resource_class: medium+\n\n steps:\n - attach_workspace:\n at: ~/\n\n - *restore_npm_cache\n\n - run:\n name: build\n command: |\n mkdir -p /tmp/storybook\n npm run build-storybook -- -o /tmp/storybook\n\n - store_artifacts:\n path: /tmp/storybook\n\n - run:\n name: comment to pr\n command: |\n # PR トリガーではない場合はスキップ\n if [ -z \"$CIRCLE_PR_NUMBER\" ]; then exit 0; fi\n\n # https://support.circleci.com/hc/en-us/articles/5034956515355-How-to-Programmatically-Construct-the-URLs-for-Artifacts\n index_html_url=\"https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/${CIRCLE_NODE_INDEX}/tmp/storybook/index.html\"\n\n # https://docs.github.com/en/rest/issues/comments?apiVersion=2022-11-28#create-an-issue-comment\n curl \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer $GITHUB_TOKEN\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/issues/${CIRCLE_PR_NUMBER}/comments \\\n -d '{\"body\":\"### Storybook\\n'${index_html_url}'\"}'\n\n test:\n <<: *defaults\n\n steps:\n - attach_workspace:\n at: ~/\n\n - *restore_npm_cache\n\n - run:\n name: test\n command: npm test\n\n - store_test_results:\n path: ./tmp/test\n\nworkflows:\n version: 2\n integration:\n jobs:\n - build\n - eslint_flow:\n requires:\n - build\n - stylelint:\n requires:\n - build\n - build_storybook:\n context:\n - github_token_sushi_bot\n requires:\n - build\n - test:\n requires:\n - build\n" }, { "path": ".dockerignore", "content": "node_modules/\n\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[Makefile]\nindent_style = tab\n" }, { "path": ".eslintignore", "content": "/dist/\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n parser: '@babel/eslint-parser',\n env: {\n browser: true,\n jest: true,\n node: true\n },\n plugins: ['react-hooks'],\n globals: {},\n extends: ['eslint:recommended', 'plugin:compat/recommended', 'plugin:import/recommended', 'plugin:jsx-a11y/recommended', 'plugin:react/recommended', 'plugin:storybook/recommended'],\n settings: {\n react: {\n version: 'detect'\n },\n 'import/resolver': {\n node: {\n extensions: ['.js', '.ts', '.tsx']\n }\n },\n // TODO: browserslist を設定するか各 polyfill に対応\n polyfills: ['window.scrollX', 'window.scrollY', 'Array.from']\n },\n rules: {\n 'no-unused-vars': ['error', {\n vars: 'all',\n args: 'all',\n argsIgnorePattern: '^_'\n }],\n // TODO: ログインなどの要素に使えるようオフにしているが、要検討\n 'jsx-a11y/no-autofocus': 'off',\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': 'error'\n },\n overrides: [{\n plugins: ['ft-flow'],\n files: ['*.js', '*.js.flow'],\n extends: ['plugin:ft-flow/recommended'],\n rules: {\n 'ft-flow/generic-spacing': 'off',\n 'ft-flow/space-after-type-colon': 'off'\n }\n }, {\n files: ['*.ts', '*.tsx'],\n extends: ['eslint-config-freee-typescript'],\n rules: {\n '@typescript-eslint/no-explicit-any': 'off',\n 'jsx-a11y/no-autofocus': 'off',\n '@typescript-eslint/naming-convention': ['error', {\n selector: 'default',\n format: ['camelCase', 'PascalCase']\n }, {\n selector: 'variable',\n format: ['camelCase', 'UPPER_CASE', 'PascalCase']\n }, {\n selector: 'parameter',\n format: ['camelCase', 'snake_case', 'UPPER_CASE', 'PascalCase'],\n leadingUnderscore: 'allow'\n }, {\n selector: 'property',\n format: null\n }, {\n selector: 'memberLike',\n modifiers: ['private'],\n format: ['camelCase'],\n leadingUnderscore: 'require'\n }, {\n selector: 'typeLike',\n format: ['PascalCase']\n }]\n },\n settings: {\n 'import/resolver': {\n node: {\n extensions: ['.js', '.ts', '.tsx']\n }\n }\n }\n }]\n};" }, { "path": ".flowconfig", "content": "[ignore]\n.*/__tests__/types/.*\nlv1/.*\nlv2/.*\nutilities/.*\nhooks/.*\n\n\n[include]\n\n[libs]\n\n[lints]\n\n[options]\nserver.max_workers=4\nmodule.name_mapper='^vibes\\(.*\\)$' -> '\\1'\nsharedmemory.hash_table_pow=21\n\n[strict]\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n\n## :memo: 概要\n\n\n## :stuck_out_tongue: やってないこと\n\n\n## :heavy_check_mark: 動作確認\n\n- [ ] Storybook で 〇〇 が XX できるのを確認\n\n" }, { "path": ".github/workflows/publish_package_to_npmjs.yml", "content": "name: Publish Package to npmjs\n\non:\n release:\n types: [published]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n\n - uses: actions/setup-node@v3\n with:\n node-version-file: .node-version\n cache: 'npm'\n registry-url: 'https://registry.npmjs.org'\n\n - name: Install dependencies\n run: npm ci\n\n - run: npm publish --access public\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".github/workflows/publish_storybook.yml", "content": "name: publish Storybook\non:\n push:\n branches:\n - 'main'\njobs:\n publish:\n if: github.repository == 'freee/vibes'\n runs-on: ubuntu-latest\n permissions:\n id-token: write\n contents: read\n steps:\n - uses: actions/checkout@v4\n - uses: aws-actions/configure-aws-credentials@v4\n with:\n aws-region: 'ap-northeast-1'\n role-to-assume: ${{ secrets.PROD_AWS_ROLE_TO_ASSUME }}\n - uses: actions/setup-node@v3\n with:\n node-version-file: .node-version\n cache: 'npm'\n - name: Install Dependencies\n run: npm install\n - name: Build Storybook\n run: npm run build-storybook\n - name: Publish to S3\n env:\n AWS_BUCKET: ${{ secrets.PROD_AWS_S3_BUCKET }}\n run: aws s3 sync --delete ${GITHUB_WORKSPACE}/storybook-static/ s3://${AWS_BUCKET}/ --quiet\n" }, { "path": ".github/workflows/pull_request_test_and_lint.yml", "content": "name: Pull Request Test and Lint\n\non:\n pull_request:\n branches:\n - main\n\njobs:\n test_and_lint:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n\n - uses: actions/setup-node@v3\n with:\n node-version-file: .node-version\n cache: 'npm'\n\n - name: Install dependencies\n run: npm ci\n\n - run: npm run lint\n\n - run: npm run test\n" }, { "path": ".gitignore", "content": "node_modules\n*.log\n.DS_Store\n.idea/\n.cache\n.vscode\nstorybook-static/\ndist/\n\n# docker\ndocker/.build_timestamp\n\n# direnv / dotenv\n.envrc\n.env\n\n# eslint cache\n.eslintcache\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n" }, { "path": ".jest/Mock.js", "content": "" }, { "path": ".jest/setup.js", "content": "" }, { "path": ".node-version", "content": "18.16.1\n" }, { "path": ".npmrc", "content": "save-exact = true\n" }, { "path": ".prettierignore", "content": "/dist/\n" }, { "path": ".storybook/main.ts", "content": "import type { StorybookConfig } from '@storybook/react-webpack5';\n\nconst config: StorybookConfig = {\n addons: [\n '@storybook/addon-knobs',\n '@storybook/addon-essentials',\n '@storybook/addon-links',\n '@storybook/addon-a11y',\n '@storybook/addon-interactions',\n '@storybook/addon-storysource',\n 'storybook-addon-pseudo-states',\n '@kemuridama/storybook-addon-github',\n '@storybook/addon-styling-webpack',\n {\n name: '@storybook/addon-styling-webpack',\n options: {\n rules: [\n // Replaces any existing Sass rules with given rules\n {\n test: /\\.s[ac]ss$/i,\n use: [\n 'style-loader',\n 'css-loader',\n {\n loader: 'sass-loader',\n options: { implementation: require.resolve('sass') },\n },\n ],\n },\n ],\n },\n },\n ],\n stories: [\n '../docs/**/*.stories.mdx',\n '../src/**/*.stories.tsx',\n '../examples/**/*.stories.tsx',\n ],\n typescript: {\n check: true,\n },\n webpackFinal: (config) => ({\n ...config,\n module: {\n ...config.module,\n rules: [\n ...(config.module?.rules ?? []),\n {\n test: /\\.stories\\.tsx?$/,\n use: [require.resolve('@storybook/source-loader')],\n enforce: 'pre',\n },\n ],\n },\n }),\n framework: {\n name: '@storybook/react-webpack5',\n options: {},\n },\n docs: {\n autodocs: true,\n },\n};\n\nexport default config;\n" }, { "path": ".storybook/manager.js", "content": "import { addons } from '@storybook/addons';\nimport { create } from '@storybook/theming';\nimport logo from './logo-vibes.svg';\n\naddons.setConfig({\n theme: create({\n base: 'light',\n brandTitle: 'vibes',\n brandImage: logo,\n }),\n});\n" }, { "path": ".storybook/preview.tsx", "content": "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DocsContainer } from '@storybook/addon-docs';\nimport { Decorator, Parameters } from '@storybook/react';\nimport { VibesProvider, useLang } from '../src/utilities/VibesProvider';\nimport '../stylesheets/vibes_2021.scss';\n\nconst LanguagePortal = React.forwardRef(\n ({ lang }, ref) =>\n ReactDOM.createPortal(
, document.body)\n);\n\nexport const decorators: Decorator[] = [\n (Story, context) => {\n const portalParentRef = React.useRef(null);\n return (\n \n
\n \n
\n \n \n );\n },\n];\n\nexport const parameters: Parameters = {\n viewMode: 'docs',\n docs: {\n container: ({ children, context }) => (\n
\n {children}\n
\n ),\n },\n options: {\n storySort: {\n order: ['doc', ['Readme'], 'examples', 'lv2', 'lv1', 'deprecated'],\n },\n },\n github: {\n repository: 'freee/vibes',\n branch: 'main',\n },\n};\n\nexport const globalTypes = {\n responsive: {\n description: 'Responsive',\n defaultValue: 'Off',\n toolbar: {\n title: 'Responsive',\n icon: 'circlehollow',\n items: [\n { value: true, title: 'On' },\n { value: false, title: 'Off' },\n ],\n },\n },\n lang: {\n description: 'Language',\n defaultValue: 'ja',\n toolbar: {\n title: 'Language',\n icon: 'globe',\n items: [\n { value: 'ja', title: '日本語 (ja)' },\n { value: 'en', title: 'English (en)' },\n ],\n },\n },\n};\n" }, { "path": "Dockerfile", "content": "FROM node:14.15.4\nARG github_username\nARG github_token\n\nENV GITHUB_USERNAME $github_username\nENV GITHUB_TOKEN $github_token\n\nWORKDIR /usr/src/app\n\nCOPY docker/git-credential-github-token /usr/local/bin\nRUN apt-get update && apt-get install -y curl git\nRUN mkdir /root/.ssh/ && \\\n git config --global url.\"https://github.com\".insteadOf ssh://git@github.com && \\\n git config --global --add url.\"https://github.com\".insteadOf git://git@github.com && \\\n git config --global --add url.\"https://github.com/\".insteadOf git@github.com: && \\\n git config --global credential.helper github-token\n\nCOPY package.json ./\nCOPY package-lock.json ./\nRUN npm install\n\nCOPY . .\n\nEXPOSE 6006\n\nCMD [\"npm\", \"run\", \"storybook\"]\n" }, { "path": "LICENSE.txt", "content": "\n Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2023 freee K.K.\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "Makefile", "content": "APP_NAME := vibes\nVERSION_TAG ?= latest\nIMAGE_NAME := $(APP_NAME):$(VERSION_TAG)\n\n.DEFAULT_GOAL = help # display usage when there is no argument.\n\nDOCKER_DIR := docker\nDOCKER_BUILD_TIMESTAMP := docker/.build_timestamp\n\n$(DOCKER_BUILD_TIMESTAMP): $(shell find ./docker -not -name .build_timestamp)\n\t@docker build -t $(IMAGE_NAME) --build-arg github_username=$(GITHUB_USERNAME) --build-arg github_token=$(GITHUB_TOKEN) .\n\ttouch $(DOCKER_BUILD_TIMESTAMP)\n\n.PHONY: help\nhelp: ## show options\n\t@grep -E '^[a-zA-Z_-{\\.}]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = \":.*?## \"}; {printf \"\\033[36m%-15s\\033[0m %s\\n\", $$1, $$2}'\n\n.PHONY: docker.build\ndocker.build: $(DOCKER_BUILD_TIMESTAMP) ## build docker image\n\n.PHONY: docker.rebuild\ndocker.rebuild: ## rebuild docker image\n\t-rm $(DOCKER_BUILD_TIMESTAMP)\n\tmake docker.build\n\n.PHONY: docker.run\ndocker.run: $(DOCKER_BUILD_TIMESTAMP) ## run storybook on docker\n\tdocker run -it -p 6006:6006 --rm --name $(APP_NAME) $(IMAGE_NAME)\n" }, { "path": "README.md", "content": "[世界を変えるためのデザインシステム](https://speakerdeck.com/ymrl/shi-jie-wobian-erutamefalsedezainsisutemu)です\n\n# Getting started\n\n## Install\n\nTBD\n\n## Usage\n\nスタイルを適用するため node_modules/vibes/vibes.css を読み込んでください。\n\nfrom Sass:\n\n```\n@import 'node_modules/vibes/vibes_2021';\n```\n\nfrom JavaScript with CSS Modules:\n\n```js\nimport '@freee_jp/vibes/css';\n```\n\nスタイルを読み込んだら、vibes の React Component を次のように使うだけです。\n\n```js\nimport * as React from 'react';\nimport { Breadcrumbs } from '@freee_jp/vibes';\nimport { CompanyLogoT } from 'somewhere';\n\nexport default function App() {\n return (\n
\n \n \n
\n );\n}\n```\n\n# Contribution\n\n[こちらのガイドライン](https://github.com/freee/vibes/blob/master/docs/Contribution.stories.mdx)を参照してください。\n" }, { "path": "__tests__/types/flow/.flowconfig", "content": "[ignore]\n\n[include]\n./../../../index.js\n./../../../lv1.js\n./../../../lv2.js\n./../../../utilities.js\n./../../../node_modules/lottie-web/.*\n./../../../node_modules/react/.*\n./../../../node_modules/react-dom/.*\n./../../../node_modules/react-icons/.*\n./../../../node_modules/react-modal/.*\n./../../../node_modules/react-dnd/.*\n./../../../node_modules/react-dnd-html5-backend/.*\n\n[libs]\n\n[lints]\n\n[options]\nserver.max_workers=4\nmodule.name_mapper='^vibes\\(.*\\)$' -> '/../../..\\1'\ninclude_warnings=true\nsuppress_comment= \\\\(.\\\\|\\n\\\\)*\\\\$FlowExpectedError\n\n[strict]\n" }, { "path": "__tests__/types/flow/lv1.js", "content": "// @flow\n\nimport * as React from 'react';\nimport {\n FocusHighlight,\n VisuallyHidden,\n Balloon,\n ColumnBase,\n Container,\n ContentsBase,\n DialogBase,\n FloatingBase,\n MarginBase,\n NegativeMarginBase,\n PopupBase,\n CardBase,\n ScrimBase,\n ScrollableBase,\n ZebraBase,\n Button,\n GlobalNaviButton,\n IconOnlyButton,\n IconOnlyJumpButton,\n IconOnlyBackwardButton,\n InlineLink,\n JumpButton,\n BackwardButton,\n LeftIconButton,\n ListButton,\n PagerButton,\n RightIconButton,\n TabButton,\n TextButton,\n CheckBox,\n RadioButton,\n SearchField,\n SelectBox,\n TextArea,\n TextField,\n ToggleButton,\n OptionButton,\n FormControlLabel,\n GridBlock,\n GridWrapper,\n Note,\n PageTitle,\n Paragraph,\n SectionTitle,\n SubSectionTitle,\n Text,\n Avatar,\n MaterialIcon,\n RequiredIcon,\n StatusIcon,\n AlertSwallow,\n AppStoreBadge,\n CloudSkeletonIllust,\n CloudUploadIllust,\n CsvUploadIllust,\n FileUploadIllust,\n GooglePlayBadge,\n ImageUploadIllust,\n NotFoundSwallow,\n CalendarDate,\n SegmentControlButton,\n StepNumber,\n StepBlock,\n StepBorder,\n Tab,\n WithDescriptionContent,\n WithSideContent,\n Stack,\n BorderTableListCell,\n CheckBoxCell,\n DescriptionListCell,\n DescriptionListHeadCell,\n TableListCell,\n TableListHead,\n TableListHeadCell,\n TableListRow,\n Message,\n ProgressBar,\n Loading,\n InlineSpinner,\n // eslint-disable-next-line import/no-unresolved\n} from 'vibes/index';\n\nconst marginProps = {\n marginLeft: true,\n marginRight: true,\n marginBottom: true,\n marginTop: true,\n marginSize: 'large',\n};\n\nconst commonProps = {\n 'data-guide': 'guide',\n 'data-test': 'test',\n 'data-tracking': 'tracking',\n 'data-masking': true,\n ma: 1,\n mt: 1,\n mb: 1,\n mr: 1,\n ml: 1,\n};\n\nconst inputHandlers = {\n onChange: (_e: SyntheticInputEvent) => {},\n onInput: (_e: SyntheticInputEvent) => {},\n onFocus: (_e: SyntheticFocusEvent) => {},\n onBlur: (_e: SyntheticFocusEvent) => {},\n onKeyDown: (_e: SyntheticKeyboardEvent) => {},\n onKeyUp: (_e: SyntheticKeyboardEvent) => {},\n};\n\nconst buttonAriaProps = {\n 'aria-expanded': true,\n 'aria-pressed': true,\n 'aria-controls': 'hoge',\n 'aria-owns': 'hoge',\n 'aria-haspopup': true,\n 'aria-describedby': 'hoge',\n};\nconst linkAriaProps = {\n 'aria-expanded': true,\n 'aria-controls': 'hoge',\n 'aria-owns': 'hoge',\n 'aria-haspopup': true,\n 'aria-describedby': 'hoge',\n};\nconst numberInputAriaProps = {\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n 'aria-valuenow': 10,\n};\nconst numberInputProps = {\n min: 0,\n max: 100,\n step: 10,\n};\n\nconst tableRowAriaProps = {\n 'aria-level': 1,\n 'aria-setsize': 1,\n 'aria-posinset': 1,\n 'aria-expanded': false,\n};\n\n// a11y\n// $FlowExpectedError\n;\n\n
\n;\n\n
\n;\n\n
\n;\n\nexport default function App() {\n return (\n
\n {/* bases */}\n \n balloon\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 onSelfWindowNavigation={() => {}}\n {...commonProps}\n {...marginProps}\n >\n
\n \n \n
\n \n \n \n
\n \n {/* buttons */}\n ()}\n onClick={(_e: SyntheticMouseEvent<>) => {}}\n onKeyDown={(\n _e: SyntheticKeyboardEvent\n ) => {}}\n onSelfWindowNavigation={() => {}}\n iconPosition=\"left\"\n IconComponent={StatusIcon}\n width=\"full\"\n {...marginProps}\n {...commonProps}\n {...buttonAriaProps}\n {...linkAriaProps}\n >\n
\n \n {}}\n {...marginProps}\n {...commonProps}\n >\n
\n \n {}}\n onClick={(\n _e: SyntheticEvent\n ) => {}}\n onKeyDown={(\n _e: SyntheticKeyboardEvent\n ) => {}}\n {...marginProps}\n {...commonProps}\n {...buttonAriaProps}\n {...linkAriaProps}\n />\n ) => {}}\n onSelfWindowNavigation={() => {}}\n rel=\"test\"\n {...commonProps}\n />\n ) => {}}\n onSelfWindowNavigation={() => {}}\n rel=\"test\"\n {...commonProps}\n />\n {}}\n onClick={(\n _e: SyntheticEvent\n ) => {}}\n {...buttonAriaProps}\n {...linkAriaProps}\n {...commonProps}\n >\n
\n \n ) => {}}\n onSelfWindowNavigation={() => {}}\n rel=\"test\"\n {...marginProps}\n {...commonProps}\n >\n
\n \n ) => {}}\n onSelfWindowNavigation={() => {}}\n rel=\"test\"\n {...marginProps}\n {...commonProps}\n >\n
\n \n ) => {}}\n {...marginProps}\n {...commonProps}\n >\n
\n \n \n ) => {}}\n onKeyDown={(\n _e: SyntheticKeyboardEvent\n ) => {}}\n selectableItemRef={React.createRef<\n HTMLAnchorElement | HTMLButtonElement\n >()}\n {...marginProps}\n {...commonProps}\n >\n
\n \n ) => {}}\n small\n {...marginProps}\n {...commonProps}\n >\n
\n \n ) => {}}\n {...marginProps}\n {...commonProps}\n >\n
\n \n \n
\n \n \n ) => {}}\n {...buttonAriaProps}\n {...marginProps}\n {...commonProps}\n >\n
\n \n {/* forms */}\n \n
\n \n \n
\n \n \n ) => {}}\n onInput={(_e: SyntheticInputEvent) => {}}\n onFocus={(_e: SyntheticFocusEvent) => {}}\n onBlur={(_e: SyntheticFocusEvent) => {}}\n onKeyDown={(_e: SyntheticKeyboardEvent) => {}}\n onKeyUp={(_e: SyntheticKeyboardEvent) => {}}\n {...marginProps}\n {...commonProps}\n />\n ) => {}}\n onInput={(_e: SyntheticInputEvent) => {}}\n onFocus={(_e: SyntheticFocusEvent) => {}}\n onBlur={(_e: SyntheticFocusEvent) => {}}\n onKeyDown={(_e: SyntheticKeyboardEvent) => {}}\n onKeyUp={(_e: SyntheticKeyboardEvent) => {}}\n {...marginProps}\n {...commonProps}\n />\n ()}\n IconComponent={() =>
}\n onIconClick={(_e) => {}}\n onIconFocus={(_e) => {}}\n onIconBlur={(_e) => {}}\n iconLabel=\"iconlabel\"\n iconAriaProps={buttonAriaProps}\n {...inputHandlers}\n {...numberInputProps}\n {...numberInputAriaProps}\n {...marginProps}\n {...commonProps}\n />\n {/* grids */}\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n あああ\n \n {/* headlines */}\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n {/* icons */}\n \n \n \n \n
\n \n {/* images */}\n \n \n \n \n \n \n \n \n \n {/* interactiveParts */}\n {}}\n selectableDateRef={(_el: HTMLDivElement) => {}}\n onKeyDown={(\n _e: SyntheticKeyboardEvent,\n _date: string,\n _onClickDate?: (date: string) => void | Promise\n ) => {}}\n {...commonProps}\n />\n ) => {}}\n {...commonProps}\n >\n
\n \n \n \n
\n \n \n ) => {}}\n onBlur={(_e: SyntheticEvent) => {}}\n {...marginProps}\n {...commonProps}\n >\n
\n \n\n {/* layouts */}\n
}\n renderDescriptionContent={() =>
}\n {...commonProps}\n />\n }\n verticalAlign=\"top\"\n {...commonProps}\n >\n
\n \n \n
\n \n\n {/* lists */}\n {}}\n {...commonProps}\n >\n
\n \n ) => {}}\n {...commonProps}\n />\n \n
\n \n \n
\n \n {}}\n colSpan={2}\n indentLevel={2}\n {...commonProps}\n >\n
\n \n \n
\n \n {}}\n minWidth={1}\n {...commonProps}\n >\n
\n \n {}}\n url=\"/hoge/fuga\"\n onSelfWindowNavigation={() => {}}\n {...tableRowAriaProps}\n {...commonProps}\n >\n
\n \n\n {/* messages */}\n \n test\n \n\n {/* ProgressBar */}\n \n\n {/* Loading */}\n children\n children\n \n \n\n {/* InlineSpinner */}\n \n
\n );\n}\n" }, { "path": "__tests__/types/flow/lv2.js", "content": "// @flow\n\nimport * as React from 'react';\nimport {\n TextField,\n RadioButton,\n CheckBox,\n CardNavigation,\n SelectBox,\n TextArea,\n StatusIcon,\n AccordionPanel,\n BasicTable,\n Breadcrumbs,\n BulletedList,\n ButtonGroup,\n Calendar,\n DatePicker,\n SingleComboBox,\n MultiComboBox,\n DescriptionList,\n MessageDialog,\n MessageDialogConfirm,\n TaskDialog,\n GuideDialog,\n Dropdown,\n DropdownMenuContent,\n DropdownButton,\n NoDataCreated,\n NoSearchResults,\n FileUploader,\n FileDropArea,\n FilterableDropdownButton,\n Footer,\n DateField,\n FormActions,\n FormControl,\n FormControlGroup,\n PhoneNumberField,\n NameField,\n DigitsInput,\n DateInput,\n NumeralCodeInput,\n PasswordField,\n GlobalNavi,\n Header,\n HeadlineArea,\n LineSeparatedList,\n ListButtons,\n ListButtonSelector,\n ListCard,\n ListTable,\n GroupedListTable,\n MessageBlock,\n FloatingMessageBlock,\n MessageIcon,\n NumericTable,\n Pagination,\n Pager,\n PageSelector,\n Paragraph,\n PopupProgressBar,\n StackedBarChart,\n Stepper,\n VerticalSteps,\n TabBar,\n TagBox,\n MiniTag,\n WithAccordionContent,\n WithBalloon,\n WithDropdown,\n WithFilterableDropdown,\n WithPopup,\n SkeletonPageTitle,\n SkeletonSectionTitle,\n SkeletonParagraph,\n SkeletonRectangle,\n SkeletonBlock,\n SkeletonIcon,\n SkeletonCircle,\n SkeletonListTable,\n SkeltonPageTitle,\n SkeltonSectionTitle,\n SkeltonParagraph,\n SkeltonRectangle,\n SkeltonBlock,\n SkeltonIcon,\n SkeltonCircle,\n SkeltonListTable,\n SkeletonDescriptionList,\n SkeletonStackedBarChart,\n WithTOC,\n // eslint-disable-next-line import/no-unresolved\n} from 'vibes/index';\nimport type {\n ComboBoxOption,\n SingleComboBoxOption,\n MultiComboBoxOption,\n} from 'vibes/index';\n\nconst marginProps = {\n marginLeft: true,\n marginRight: true,\n marginBottom: true,\n marginTop: true,\n marginSize: 'large',\n};\n\nconst commonProps = {\n 'data-guide': 'guide',\n 'data-test': 'test',\n 'data-tracking': 'tracking',\n 'data-masking': true,\n ma: 1,\n mt: 1,\n mb: 1,\n mr: 1,\n ml: 1,\n};\n\nconst formHandlers = {\n onChange: (_e: SyntheticInputEvent<*>) => {},\n onInput: (_e: SyntheticInputEvent<*>) => {},\n onFocus: (_e: SyntheticFocusEvent<*>) => {},\n onBlur: (_e: SyntheticFocusEvent<*>) => {},\n onKeyDown: (_e: SyntheticKeyboardEvent<*>) => {},\n};\n\nconst comboBoxOptions: ComboBoxOption[] = [\n { label: 'hoge', id: 1, keywords: ['hoge', 'fuga'] },\n { label: 'foo', id: 2 },\n];\n\nconst singleComboBoxOptions: SingleComboBoxOption[] = [\n { label: 'hoge', id: 1, keywords: ['hoge', 'fuga'], subLabel: 'bar' },\n { label: 'foo', id: 2 },\n];\n\nexport default function App() {\n return (\n
\n {/* lv2/accordionPanel */}\n {}}\n >\n
\n \n {/* lv2/basicTable */}\n {},\n minWidth: 1,\n },\n { value: test },\n ]}\n rows={[\n {\n onClick: (_rowIndex: number) => {},\n onSelfWindowNavigation: () => {},\n cells: [\n {\n value: 1,\n alignCenter: true,\n alignRight: true,\n small: true,\n },\n { value: '2' },\n ],\n },\n {\n cells: [{ value: 'link' }],\n url: 'http://example.com',\n },\n ]}\n {...commonProps}\n />\n\n {/* lv2/breadcrumbs */}\n {} }]}\n label=\"breadcrumbs\"\n {...marginProps}\n {...commonProps}\n />\n\n {/* lv2/bulletedList */}\n \n\n {/* lv2/buttonGroup */}\n \n
\n \n\n {/* lv2/calendar */}\n {}}\n {...commonProps}\n />\n {}}\n minDate=\"2012-07-09\"\n maxDate=\"2019-12-17\"\n {...commonProps}\n />\n\n {/* lv2/comboBox */}\n }\n borderless\n trailingItem={{\n onSelect: (_fieldValue: string) => {},\n isVisible: (_fieledValue: string): boolean => {\n return true;\n },\n render: (_fieldValue: string): React.Node =>
,\n }}\n {...{ ...formHandlers, onChange: (_val?: ComboBoxOption) => {} }}\n {...marginProps}\n {...commonProps}\n />\n }\n borderless\n trailingItem={{\n onSelect: (_fieldValue: string) => {},\n isVisible: (_fieledValue: string): boolean => {\n return true;\n },\n render: (_fieldValue: string): React.Node =>
,\n }}\n {...{ ...formHandlers, onChange: (_val?: ComboBoxOption) => {} }}\n {...marginProps}\n {...commonProps}\n />\n }\n borderless\n {...{ ...formHandlers, onChange: (_val: MultiComboBoxOption[]) => {} }}\n {...commonProps}\n />\n\n {/* lv2/cardNavigation */}\n \n\n {/* lv2/descriptionList */}\n ,\n value:
,\n },\n ]}\n headCellMinWidth={1}\n {...marginProps}\n {...commonProps}\n />\n\n {/* lv2/dialogs */}\n ) => {}}\n closeButtonLabel=\"test\"\n id=\"test\"\n contentAlign=\"left\"\n {...commonProps}\n >\n
\n \n ) => {}}\n onRequestClose={(_e: SyntheticEvent<*>) => {}}\n confirmButtonLabel=\"test\"\n closeButtonLabel=\"test\"\n confirmButtonHref=\"https://example.com\"\n confirmButtonTarget=\"_blank\"\n confirmButtonIconPosition=\"left\"\n confirmButtonIconComponent={StatusIcon}\n danger\n disabled\n suspend\n id=\"test\"\n contentAlign=\"left\"\n {...commonProps}\n >\n
\n \n ) => {}}\n onRequestClose={(_e: SyntheticEvent<*>) => {}}\n primaryButtonLabel=\"test\"\n closeButtonLabel=\"test\"\n danger\n disabled\n id=\"test\"\n headerSideContent={
}\n contentLabel=\"test\"\n {...commonProps}\n >\n
\n \n ) => {}}\n backwardButtonLabel=\"test\"\n onRequestForward={(_e: SyntheticMouseEvent<>) => {}}\n forwardButtonLabel=\"test\"\n onRequestClose={(_e: SyntheticMouseEvent<>) => {}}\n closeButtonLabel=\"test\"\n image={{\n src: 'test',\n width: 'test',\n height: 'test',\n alt: 'test',\n }}\n id=\"test\"\n {...commonProps}\n >\n
\n \n\n {/* lv2/dropdown */}\n ) => {},\n checked: true,\n disabled: true,\n },\n {\n type: 'selectable',\n text: 'test',\n ariaLabel: 'test',\n onClick: (_e: SyntheticEvent<>) => {},\n target: '_blank',\n rel: 'test',\n },\n ]}\n firstSelectableItemRef={(\n _el: ?React.ElementRef<'button' | 'a' | 'input'>\n ) => {}}\n onRequestClose={() => {}}\n align=\"right\"\n positionRelative\n {...commonProps}\n />\n\n ) => {},\n checked: true,\n disabled: true,\n },\n {\n type: 'selectable',\n text: 'test',\n ariaLabel: 'test',\n onClick: (_e: SyntheticEvent<>) => {},\n target: '_blank',\n rel: 'test',\n },\n ]}\n firstSelectableItemRef={(\n _el: ?React.ElementRef<'button' | 'a' | 'input'>\n ) => {}}\n onRequestClose={() => {}}\n onFocusOut={(_direction: 'upward' | 'downward') => {}}\n {...commonProps}\n />\n\n {/* lv2/dropdownButton */}\n ) => {},\n },\n ]}\n {...marginProps}\n {...commonProps}\n />\n\n {/* lv2/emptyStates} */}\n \n
\n \n\n \n\n {/* lv2/fileUploader */}\n {}}\n acceptFileTypes={['text/csv']}\n isUploading\n fileLabel=\"test\"\n multiple\n {...marginProps}\n {...commonProps}\n />\n\n {/* lv2/fileDropArea */}\n {}}\n acceptFileTypes={['text/csv']}\n isUploading\n fileLabel=\"test\"\n multiple\n {...commonProps}\n >\n
\n \n\n {/* lv2/filterableDropdownButton */}\n ) => {},\n keywords: ['aaa'],\n },\n {\n type: 'checkbox',\n text: 'test',\n onChange: (_e: SyntheticEvent<>) => {},\n keywords: ['aaa'],\n },\n ]}\n iconPosition=\"left\"\n IconComponent={StatusIcon}\n {...commonProps}\n />\n\n {/* lv2/footer */}\n \n\n {/* lv2/formBlock */}\n {}}\n onInput={(_date: string | null) => {}}\n onFocus={(_date: string | null) => {}}\n onBlur={(_date: string | null) => {}}\n onKeyDown={(_date: string | null) => {}}\n {...marginProps}\n {...commonProps}\n />\n \n
\n \n \n
\n \n \n \n \n \n \n \n );\n};\n\nconst TextArea = React.forwardRef(TextAreaInner);\nexport default TextArea;\n" }, { "path": "src/lv1/forms/TextField.stories.tsx", "content": "import * as React from 'react';\n\nimport { MdDateRange, MdExpandMore, MdFavorite } from 'react-icons/md';\nimport { action, actions } from '@storybook/addon-actions';\nimport { boolean, number, select, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TextField from './TextField';\nimport ColumnBase from '../bases/ColumnBase';\nimport { FocusHighlight } from '../a11y/FocusHighlight';\nimport CheckBox from './CheckBox';\nimport Paragraph from '../typography/Paragraph';\n\nconst handlers = actions({\n onChange: 'change',\n onInput: 'input',\n onFocus: 'focus',\n onBlur: 'blur',\n onKeyDown: 'keydown',\n onKeyUp: 'keyup',\n});\n\nexport default {\n component: TextField,\n};\n\nexport const TextFieldComponent = () => {\n const ref = React.createRef();\n return (\n \n );\n};\n\nexport const Widths = () => (\n <>\n \n \n \n \n \n \n);\n\nexport const Default = () => (\n <>\n \n \n \n \n);\n\nexport const Small = () => (\n <>\n \n \n \n \n);\n\nexport const Large = () => (\n <>\n \n \n \n \n);\n\nexport const MaxWidth = () => (\n
\n \n \n \n
\n);\n\nexport const Suffix = () => (\n <>\n \n \n \n \n);\n\nexport const Borderless = () => (\n <>\n \n \n \n \n \n);\n\nexport const WithIcon = () => (\n <>\n \n テキストフィールドの右脇にアイコンを表示できますが、これはコンボボックス等の動作を示すためのものです。\n 通常のフィールドには使用しないでください。\n \n \n \n \n \n \n \n \n);\n\nexport const WithLoading = () => {\n const [loading, setLoading] = React.useState(true);\n return (\n <>\n \n setLoading(e.target.checked)}\n checked={loading}\n >\n Loading\n \n \n );\n};\n\nexport const DeprecatedMarginProps = () => (\n \n);\n" }, { "path": "src/lv1/forms/TextField.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, {\n CommonProps,\n pickCommonDataProps,\n} from '../../utilities/commonProps';\nimport vbClassNames from '../../utilities/vbClassNames';\nimport functionalMarginClasses from '../../utilities/functionalMarginClasses';\nimport { FormHandlers, AutocompleteAttribute } from './types';\nimport {\n filterTextBoxAriaProps,\n TextBoxAriaProps,\n filterNumberInputAriaProps,\n NumberInputAriaProps,\n ButtonAriaProps,\n} from '../../utilities/AriaProps';\nimport InlineSpinner from '../InlineSpinner';\nimport { useResponsive } from '../../utilities/VibesProvider';\n\nexport type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel';\nexport type TextFieldWidth = 'xSmall' | 'small' | 'medium' | 'large' | 'full';\n\ntype NumberInputProps = {\n min?: number;\n max?: number;\n step?: number;\n /**\n * type=\"number\" 時に右側に表示される spinner を非表示にします\n * @default false\n */\n hideSpinner?: boolean;\n};\n\ntype Props = {\n /**\n * input id を指定します\n */\n id?: string;\n /**\n * input type を指定します。\n *\n * `tel` は電話番号の入力欄以外に使用しないでください（IMEをオフにするために使用しないでください）\n */\n type?: TextFieldType;\n /**\n * input要素のaria-label を指定します。 `
\n );\n}\n" }, { "path": "src/lv1/grids/Grids.stories.tsx", "content": "import * as React from 'react';\n\nimport { select } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport GridBlock, { GridSize } from '../grids/GridBlock';\nimport GridWrapper from '../grids/GridWrapper';\n\nexport default {\n component: GridWrapper,\n};\n\nconst Column = ({ children }: { children?: React.ReactNode }) => {\n return (\n \n {children}\n
\n );\n};\n\nexport const Grids = () => {\n const columns = select('Columns', [2, 3, 4], 2, 'Grids');\n\n const size = {\n 2: 'half',\n 3: 'oneThird',\n 4: 'oneQuarter',\n }[columns] as GridSize;\n\n return (\n <>\n \n {Array(columns)\n .fill(1)\n .map((_, index) => (\n \n {`${index + 1} of ${columns}`}\n \n ))}\n \n \n );\n};\n\nexport const TwoColumns = () => {\n return (\n <>\n \n \n {'size=\"half\"'}\n \n \n {'size=\"half\"'}\n \n \n \n \n {'size=\"oneThird\"'}\n \n \n {'size=\"twoThirds\"'}\n \n \n \n \n {'size=\"oneQuarter\"'}\n \n \n {'size=\"threeQuarters\"'}\n \n \n \n );\n};\n\nexport const ThreeColumns = () => {\n return (\n <>\n \n \n {'size=\"half\"'}\n \n \n {'size=\"oneQuarter\"'}\n \n \n {'size=\"oneQuarter\"'}\n \n \n \n \n {'size=\"oneThird\"'}\n \n \n {'size=\"oneThird\"'}\n \n \n {'size=\"oneThird\"'}\n \n \n \n );\n};\n\nexport const FourColumns = () => {\n return (\n <>\n \n \n {'size=\"oneQuarter\"'}\n \n \n {'size=\"oneQuarter\"'}\n \n \n {'size=\"oneQuarter\"'}\n \n \n {'size=\"oneQuarter\"'}\n \n \n \n );\n};\n" }, { "path": "src/lv1/icons/Avatar.stories.tsx", "content": "import * as React from 'react';\nimport Avatar from './Avatar';\n\nimport { commonKnobs } from '../../../stories';\nimport { select, text } from '@storybook/addon-knobs';\nimport dsSquare from './storyAssets/ds_square.jpeg';\nimport dsLandscape from './storyAssets/ds_landscape.jpeg';\nimport dsPortlait from './storyAssets/ds_portlait.jpeg';\n\nexport default {\n component: Avatar,\n};\n\nexport const AvatarComponent = () => (\n \n);\n\nexport const ImageCropping = () => (\n <>\n \n \n \n \n \n);\n\nexport const Size = () => (\n <>\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n \n);\n" }, { "path": "src/lv1/icons/Avatar.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n imageUrl?: string;\n size?: 'small' | 'medium' | 'large' | 'xLarge';\n /**\n * 画像のprefetchでのチェックを有効にします、falseの場合は描画の際に一度だけ画像のfetchが行われます(キャッシュの効かない画像に対して有効です)\n */\n prefetch?: boolean;\n} & CommonProps;\n\n/**\n * 人のアバターを表現するためのコンポーネントです。\n *\n * - imageUrlが指定されない場合または画像の読み込みに失敗した場合はMdPersonアイコンが表示されます、prefetchがfalseの場合は画像の読み込みチェックを行わないため、画像が取得できなかった場合にMdPersonアイコンは出ません\n * - サイズは `small` (1.5rem = 24px), `medium` (2rem = 32px), `large` (3rem = 48px), XLarge (6rem = 96px) が用意されています\n */\nconst Avatar: React.FC = (props: Props) => {\n const { imageUrl, size, prefetch = true } = props;\n\n const classModifiers = {\n small: size === 'small',\n large: size === 'large',\n xLarge: size === 'xLarge',\n };\n\n const [imageLoaded, setImageLoaded] = React.useState(false);\n\n // 画像の読み込みに失敗してなんも出なくなるとマズいので、img要素を作って読み込み、imageLoadedフラグが立つのを待ってから表示する\n React.useEffect(() => {\n if (!prefetch) {\n return;\n }\n setImageLoaded(false);\n if (imageUrl) {\n const img = document.createElement('img');\n img.src = imageUrl;\n img.addEventListener('load', () => setImageLoaded(true));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [imageUrl]);\n\n return (\n \n \n \n \n\n {imageUrl && (imageLoaded || !prefetch) ? (\n \n ) : (\n \n \n \n \n )}\n \n \n \n );\n};\n\nexport default Avatar;\n" }, { "path": "src/lv1/icons/MaterialIcon.stories.tsx", "content": "import * as React from 'react';\n\nimport { MdInfo } from 'react-icons/md';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport MaterialIcon from './MaterialIcon';\nimport MarginBase from '../bases/MarginBase';\nimport { Text } from '../typography/Text';\n\nexport default {\n component: MaterialIcon,\n};\n\nexport const MaterialIconComponent = () => (\n \n);\n\nexport const Default = () => (\n <>\n \n \n \n \n \n);\n\nexport const Colors = () => (\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 \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\nexport const Small = () => (\n <>\n \n \n \n \n \n);\n\nexport const PointerEvent = () => (\n <>\n \n \n \n);\n" }, { "path": "src/lv1/icons/MaterialIcon.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * aria-label を設定します\n */\n label?: string;\n /**\n * サイズを小さくします\n */\n small?: boolean;\n /**\n * error color にします\n */\n error?: boolean;\n /**\n * notice color にします\n */\n notice?: boolean;\n /**\n * success color にします\n */\n success?: boolean;\n /**\n * SVG のアイコンに対して pointer-events の指定を与えます\n */\n pointerEvents?: 'auto' | 'none';\n /**\n * icon component を指定します\n */\n IconComponent: React.ElementType;\n /**\n * アイコンの色を指定します。 `success` `error` `notice` を表現するために使用する場合はこちらのpropではなく、`success` `error` `notice` propを使用してください。\n */\n color?:\n | 'inherit'\n | 'white'\n | 'P1'\n | 'P2'\n | 'P3'\n | 'P4'\n | 'P5'\n | 'P6'\n | 'P7'\n | 'P8'\n | 'P9'\n | 'P10'\n | 'S1'\n | 'S2'\n | 'S3'\n | 'S4'\n | 'S5'\n | 'S6'\n | 'S7'\n | 'S8'\n | 'S9'\n | 'S10'\n | 'RE2'\n | 'RE4'\n | 'RE5'\n | 'RE7'\n | 'RE10'\n | 'OR2'\n | 'OR4'\n | 'OR5'\n | 'OR7'\n | 'OR10'\n | 'YE2'\n | 'YE4'\n | 'YE5'\n | 'YE7'\n | 'YE10'\n | 'YG2'\n | 'YG4'\n | 'YG5'\n | 'YG7'\n | 'YG10'\n | 'GR2'\n | 'GR4'\n | 'GR5'\n | 'GR7'\n | 'GR10'\n | 'BG2'\n | 'BG4'\n | 'BG5'\n | 'BG7'\n | 'BG10'\n | 'PU2'\n | 'PU4'\n | 'PU5'\n | 'PU7'\n | 'PU10'\n | 'GY1'\n | 'GY2'\n | 'GY4'\n | 'GY5'\n | 'GY7'\n | 'GY10';\n} & MarginClassProps &\n CommonProps;\n\n/**\n * Material Design Iconsを表示するためのコンポーネントです。\n *\n * - [react-icons](https://react-icons.github.io/react-icons/) の Material Design iconsのアイコンを使う想定です\n * - UIの統一感を損なわないよう、Material Design icons 以外を使用しないでください。\n * - freeeのブランドカラーを使用することができます\n * - `success` `error` `notice` の状態を表現する場合は、`color` propを使用せず、 `success` `error` `notice` のpropを使用してください。\n * - アイコンを単体で使用する（近くにアイコンの内容を説明するテキストがない）場合には、\n * - 代替テキストを `label` propに指定してください\n * - 背景色と 3:1 以上のコントラスト比をもつ色を使用してください\n */\nconst MaterialIcon: React.FC = (props: Props) => {\n const {\n label,\n small,\n error,\n notice,\n success,\n color,\n pointerEvents,\n IconComponent,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n\n const colorClass = success\n ? 'P7'\n : notice\n ? 'YE7'\n : error\n ? 'RE5'\n : color === 'inherit'\n ? 'Inherit'\n : color === 'white'\n ? 'White'\n : color;\n\n const classModifier = {\n small,\n error,\n notice,\n success,\n pointerEventsNone: pointerEvents === 'none',\n [`color${colorClass}`]: !!colorClass,\n };\n\n return (\n \n );\n};\n\nexport default MaterialIcon;\n" }, { "path": "src/lv1/icons/RequiredIcon.stories.tsx", "content": "import * as React from 'react';\n\nimport { RequiredIcon } from './RequiredIcon';\nimport { commonKnobs } from '../../../stories';\nimport { Text, Paragraph, Note } from '..';\n\nexport default {\n component: RequiredIcon,\n};\n\nexport const RequiredIconComponent = () => ;\nexport const VerticalAlignment = () => (\n <>\n \n 日本語の文字と並べたときの位置が自然になるように調整してあります。\n \n \n \n FontSize=0.75(12px) 日本語の文字\n \n \n \n \n \n FontSize=0.875(14px) 日本語の文字\n \n \n \n \n \n FontSize=1(16px) 日本語の文字\n \n \n \n \n \n FontSize=1.5(24px) 日本語の文字\n \n \n \n \n);\n" }, { "path": "src/lv1/icons/RequiredIcon.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { useLang } from '../../utilities/VibesProvider';\n\ntype Props = CommonProps;\n/**\n * フォームのフィールドが必須項目であることを表現するマークを提供するコンポーネントです。\n *\n * このコンポーネントは、そのフィールドの入力を行わないとフォームを送信できないことを予期できるようになることを目的としています。\n * 下に示す目安を参考に、それぞれのフィールドについて必須マークが必要かどうかを判断してください。\n *\n * ## 必須マークを使用する目安\n *\n * - ユーザーが「未入力」または「未選択」のまま送信できないフィールドには、必須マークを付ける\n * - 空欄状態で送信するとエラーとなるテキストフィールド\n * - デフォルトで0が表示されているが、0のまま送信しようとするとエラーとなる数値フィールド\n * - 未選択状態で送信するとエラーとなるラジオボタンやセレクトボックス\n * - 未チェック状態で送信するとエラーとなるチェックボックス\n * - 「未入力」や「未選択」の状態にすることができないフィールドには、必須マークを付けない\n * - 「未選択」の選択肢が存在しないセレクトボックス\n * - デフォルトでどれか一つの選択肢が選択状態になっているラジオボタン\n *\n * 必須マークが目立ちすぎている場合など、フォームの突破率やユーザーの感情面へのネガティブな影響がみられる場合には、「必須フィールドであること」の表示方式について個別に工夫をしても問題ありません。\n * ただし、必須マークを表示する目的は必須項目を事前に明示してエラーとなりづらくなることです。表示方式の変更は突破率やエモーショナルな部分だけでなく、フォームのエラー率やその内訳も計測しながら進めてください。\n *\n */\nexport const RequiredIcon: React.VFC = ({ ...props }: Props) => (\n \n \n {useLang() === 'en' ? 'Required' : '必須'}\n \n \n);\n" }, { "path": "src/lv1/icons/StatusIcon.stories.tsx", "content": "import * as React from 'react';\n\nimport { select, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport StatusIcon from './StatusIcon';\n\nexport default {\n component: StatusIcon,\n};\n\nexport const StatusIconComponent = () => (\n \n {text('Children', 'ラベル', 'StatusIcon')}\n \n);\n\nexport const Samples = () => (\n
\n \n done\n \n \n success\n \n \n progress\n \n \n required\n \n \n disabled\n \n \n emphasis\n \n \n warning\n \n \n error\n \n
\n);\n" }, { "path": "src/lv1/icons/StatusIcon.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\nexport type StatusType =\n | 'done'\n | 'success'\n | 'progress'\n | 'required'\n | 'disabled'\n | 'emphasis'\n | 'warning'\n | 'error';\ntype Props = {\n children?: React.ReactNode;\n /**\n * color type を指定します\n */\n type?: StatusType;\n} & MarginClassProps &\n CommonProps;\n\n/**\n * オブジェクトのステータスを表示するためのコンポーネントです。\n *\n * ## 用途\n * - ユーザーの操作やシステムによる処理の進捗などによって変わっていくステータス表示に使用することを想定しています。\n * - そのオブジェクトの属性（例：取引における収入か支出）を示す場合は別の方法を検討してください。\n * - たとえば、あるフォームが入力必須であることを示す場合は `RequiredIcon` を使用してください。\n * - ボタンとして使うことは想定していません。\n * - 「ステータスを変更するためのボタン」が必要な場合は、`StatusSelector` コンポーネントを使用してください。\n *\n * ## type の使い分け\n * - filled 系か outlined 系かの使い分け\n * - ユーザーが何かしらの操作をしなければならないステータスの場合は、他のステータスと比べてユーザーの注意を引けるよう filled 系を使用してください。\n * - 例：ワークフローが自分の承認待ちである場合、何かしらの修正を必要としている場合\n * - そうではない場合は基本的に outlined 系を使用してください。\n * - 色の使い分け\n * - type 名が意味をもった名称になっていますが、それにとらわれなくてOKです（type名変更したほうがいいかもしれない）。\n * - そのオブジェクトのステータスとして異常であるためユーザーの注意を喚起しておきたい場合は、赤系の色（`error`, `required`）を使ってください。\n * - ユーザーがそのオブジェクトのステータスに注意を払う必要がなくなった場合は、グレー系の色（`done`, `disabled`）を使ってください。\n *\n */\nconst StatusIcon: React.FC = (props: Props) => {\n const {\n children,\n type,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n\n const statusIconBaseClass = 'vb-statusIcon';\n\n const classModifier = [\n 'done',\n 'success',\n 'progress',\n 'required',\n 'disabled',\n 'emphasis',\n 'warning',\n 'error',\n ].reduce((acm, mod) => ({ ...acm, [mod]: type === mod }), {});\n\n return (\n \n {children}\n \n );\n};\nexport default StatusIcon;\n" }, { "path": "src/lv1/images/AlertSwallow.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { Vibes2021BackgroundColor } from '../../constants';\nimport AlertSwallow from './AlertSwallow';\n\nexport default {\n component: AlertSwallow,\n};\n\nexport const AlertSwallowComponent = () => ;\n\nexport const FitWidth = () => (\n <>\n \n \n
\n \n \n
\n \n \n
\n \n);\n\nexport const FitHeight = () => (\n <>\n \n \n
\n \n \n
\n \n \n
\n \n);\n" }, { "path": "src/lv1/images/AlertSwallow.tsx", "content": "import * as React from 'react';\nimport { SwallowProps, SwallowContainer } from './SwallowContainer';\n\ntype Props = SwallowProps;\n\nconst AlertSwallow: React.FC = (props: Props) => {\n return (\n (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n />\n );\n};\n\nexport default AlertSwallow;\n" }, { "path": "src/lv1/images/AppStoreBadge.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport AppStoreBadge from './AppStoreBadge';\n\nexport default {\n component: AppStoreBadge,\n};\n\nexport const AppStoreBadgeComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/AppStoreBadge.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport useUniqueId from '../../hooks/useUniqueId';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst AppStoreBadge: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const labelId = useUniqueId('vb-storeBadge--appStore');\n\n return (\n \n \n AppStoreからダウンロード\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\nexport default AppStoreBadge;\n" }, { "path": "src/lv1/images/CloudSkeletonIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport CloudSkeletonIllust from './CloudSkeletonIllust';\n\nexport default {\n component: CloudSkeletonIllust,\n};\n\nexport const CloudSkeletonIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/CloudSkeletonIllust.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst CloudSkeletonIllust: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const illustBaseClass = 'vb-illust';\n\n return (\n \n \n アップロード中\n \n \n \n \n \n );\n};\n\nexport default CloudSkeletonIllust;\n" }, { "path": "src/lv1/images/CloudUploadIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport CloudUploadIllust from './CloudUploadIllust';\n\nexport default {\n component: CloudUploadIllust,\n};\n\nexport const CloudUploadIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/CloudUploadIllust.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst CloudUploadIllust: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const illustBaseClass = 'vb-illust';\n\n return (\n \n \n アップロード\n \n \n \n \n \n );\n};\n\nexport default CloudUploadIllust;\n" }, { "path": "src/lv1/images/CsvUploadIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport CsvUploadIllust from './CsvUploadIllust';\n\nexport default {\n component: CsvUploadIllust,\n};\n\nexport const CsvUploadIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/CsvUploadIllust.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst CsvUploadIllust: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const illustBaseClass = 'vb-illust';\n\n return (\n \n \n CSVをアップロード\n \n \n \n \n \n \n \n \n );\n};\n\nexport default CsvUploadIllust;\n" }, { "path": "src/lv1/images/DiscoveryIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport DiscoveryIllust from './DiscoveryIllust';\nimport { commonKnobs } from '../../../stories';\nimport { number } from '@storybook/addon-knobs';\n\nexport default {\n component: DiscoveryIllust,\n};\n\nexport const DiscoveryIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/DiscoveryIllust.tsx", "content": "import lottie from 'lottie-web';\nimport * as React from 'react';\n\nimport animDiscoveryIllust from './discovery-illust.json';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * アニメーションの開始を遅らせたいときに使います。単位はミリ秒です。\n */\n animationDelay?: number;\n} & CommonProps;\n\nconst DiscoveryIllust: React.FC = ({\n animationDelay = 0,\n ...otherProps\n}) => {\n const lottieRef = React.useRef(null);\n React.useEffect(() => {\n if (lottieRef.current == null) return;\n\n const anim = lottie.loadAnimation({\n animationData: animDiscoveryIllust,\n autoplay: false,\n container: lottieRef.current,\n loop: true,\n renderer: 'svg',\n });\n\n const timer = setTimeout(() => {\n anim.play();\n }, animationDelay);\n\n return () => {\n clearTimeout(timer);\n anim.destroy();\n };\n }, [lottieRef, animationDelay]);\n\n return (\n \n );\n};\n\nexport default DiscoveryIllust;\n" }, { "path": "src/lv1/images/FileUploadIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport FileUploadIllust from './FileUploadIllust';\n\nexport default {\n component: FileUploadIllust,\n};\n\nexport const FileUploadIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/FileUploadIllust.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst FileUploadIllust: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const illustBaseClass = 'vb-illust';\n\n return (\n \n \n ファイルをアップロード\n \n \n \n \n \n \n );\n};\n\nexport default FileUploadIllust;\n" }, { "path": "src/lv1/images/FinishTaskIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport FinishTaskIllust from './FinishTaskIllust';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: FinishTaskIllust,\n};\n\nexport const FinishTaskIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/FinishTaskIllust.tsx", "content": "import lottie from 'lottie-web';\nimport * as React from 'react';\n\nimport animFinishTaskIllust from './finish-task-illust.json';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = CommonProps;\n\nconst FinishTaskIllust: React.FC = (props: Props) => {\n const lottieRef = React.useRef(null);\n React.useEffect(() => {\n if (lottieRef.current != null) {\n const anim = lottie.loadAnimation({\n animationData: animFinishTaskIllust,\n autoplay: true,\n container: lottieRef.current,\n loop: false,\n renderer: 'svg',\n });\n return (): void => anim.destroy();\n }\n }, [lottieRef]);\n\n return (\n
\n );\n};\n\nexport default FinishTaskIllust;\n" }, { "path": "src/lv1/images/GooglePlayBadge.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport GooglePlayBadge from './GooglePlayBadge';\n\nexport default {\n component: GooglePlayBadge,\n};\n\nexport const GooglePlayBadgeComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/GooglePlayBadge.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport useUniqueId from '../../hooks/useUniqueId';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst GooglePlayBadge: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const baseBadgeClass = 'vb-storeBadge vb-storeBadge--googlePlayStore';\n const labelId = useUniqueId('vb-storeBadge--googlePlayStore');\n\n return (\n \n \n GooglePlayで手に入れよう\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\nexport default GooglePlayBadge;\n" }, { "path": "src/lv1/images/ImageUploadIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport ImageUploadIllust from './ImageUploadIllust';\n\nexport default {\n component: ImageUploadIllust,\n};\n\nexport const ImageUploadIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/ImageUploadIllust.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = MarginClassProps & CommonProps;\n\nconst ImageUploadIllust: React.FC = (props: Props) => {\n const { marginTop, marginLeft, marginRight, marginBottom, marginSize } =\n props;\n\n const illustBaseClass = 'vb-illust';\n\n return (\n \n \n 画像をアップロード\n \n \n \n \n \n \n );\n};\n\nexport default ImageUploadIllust;\n" }, { "path": "src/lv1/images/NoDataIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { select } from '@storybook/addon-knobs';\nimport NoDataIllust from './NoDataIllust';\n\nexport default {\n component: NoDataIllust,\n};\n\nexport const NoDataIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/NoDataIllust.tsx", "content": "import * as React from 'react';\nimport { SwallowProps, SwallowContainer } from './SwallowContainer';\n\ntype Props = SwallowProps;\n\nconst NoDataIllust: React.FC = (props: Props) => {\n return (\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\nexport default NoDataIllust;\n" }, { "path": "src/lv1/images/NoSearchResultsIllust.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { select } from '@storybook/addon-knobs';\nimport NoSearchResultsIllust from './NoSearchResultsIllust';\n\nexport default {\n component: NoSearchResultsIllust,\n};\n\nexport const NoSearchResultsIllustComponent = () => (\n \n);\n" }, { "path": "src/lv1/images/NoSearchResultsIllust.tsx", "content": "import * as React from 'react';\nimport { SwallowProps, SwallowContainer } from './SwallowContainer';\n\ntype Props = SwallowProps;\n\nconst NoSearchResultsIllust: React.FC = (props: Props) => {\n return (\n (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n />\n );\n};\n\nexport default NoSearchResultsIllust;\n" }, { "path": "src/lv1/images/NotFoundSwallow.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { Vibes2021BackgroundColor } from '../../constants';\nimport NotFoundSwallow from './NotFoundSwallow';\n\nexport default {\n component: NotFoundSwallow,\n};\n\nexport const NotFoundSwallowComponent = () => (\n \n);\n\nexport const FitWidth = () => (\n <>\n \n \n
\n \n \n
\n \n \n
\n \n);\n\nexport const FitHeight = () => (\n <>\n \n \n
\n \n \n
\n \n \n
\n \n);\n" }, { "path": "src/lv1/images/NotFoundSwallow.tsx", "content": "import * as React from 'react';\nimport { SwallowProps, SwallowContainer } from './SwallowContainer';\n\ntype Props = SwallowProps;\n\nconst NotFoundSwallow: React.FC = (props: Props) => {\n return (\n (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n />\n );\n};\n\nexport default NotFoundSwallow;\n" }, { "path": "src/lv1/images/SwallowContainer.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\nexport type SwallowProps = {\n /**\n * ロゴの大きさを指定します。`fit-width` と `fit-height` でそれぞれ親要素に対して100%となるよう表示します。\n */\n size?: 'medium' | 'fit-width' | 'fit-height';\n} & CommonProps &\n MarginClassProps;\n\ntype Props = SwallowProps & {\n /**\n * サイズ無指定で配置した場合の高さを指定します。\n */\n mediumHeightRem: number;\n renderSVG: (props: {\n className: string;\n styles: React.CSSProperties;\n }) => React.ReactNode;\n};\n\nexport const SwallowContainer: React.FC = (props: Props) => {\n const {\n size,\n mediumHeightRem,\n renderSVG,\n marginTop,\n marginRight,\n marginLeft,\n marginBottom,\n marginSize,\n } = props;\n\n const className = 'vb-swallow';\n\n const width = size === 'fit-width' ? '100%' : 'auto';\n const height =\n size === 'fit-height'\n ? '100%'\n : size === 'fit-width'\n ? 'auto'\n : `${mediumHeightRem}rem`;\n\n const styles: React.CSSProperties = {\n width: size === 'fit-width' ? '100%' : 'auto',\n height: size === 'fit-width' ? 'auto' : '100%',\n };\n\n return (\n \n {renderSVG({ className: `${className}__svg`, styles })}\n
\n );\n};\n" }, { "path": "src/lv1/images/discovery-illust.json", "content": "{\"v\":\"5.7.4\",\"fr\":29.9700012207031,\"ip\":0,\"op\":150.000006109625,\"w\":800,\"h\":800,\"nm\":\"InitialSetting\",\"ddd\":0,\"assets\":[],\"layers\":[{\"ddd\":0,\"ind\":1,\"ty\":4,\"nm\":\"Huttアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.594],\"y\":[1]},\"o\":{\"x\":[0.569],\"y\":[0]},\"t\":0,\"s\":[-10]},{\"i\":{\"x\":[0.282],\"y\":[1.173]},\"o\":{\"x\":[0.425],\"y\":[0]},\"t\":10,\"s\":[-4.477]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.493],\"y\":[3.847]},\"t\":19,\"s\":[-10]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.589],\"y\":[0]},\"t\":38,\"s\":[-10]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[1],\"y\":[0]},\"t\":64,\"s\":[0]},{\"i\":{\"x\":[0.833],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":102,\"s\":[24]},{\"t\":145.000005905971,\"s\":[-10]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":11,\"s\":[155.932,580.658,0],\"to\":[-11,-5.583,0],\"ti\":[62.682,4.158,0]},{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":37,\"s\":[89.932,547.158,0],\"to\":[-62.682,-4.158,0],\"ti\":[-81.568,-15.092,0]},{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":93,\"s\":[198.432,487.658,0],\"to\":[81.568,15.092,0],\"ti\":[7.083,-15.5,0]},{\"t\":145.000005905971,\"s\":[155.932,580.658,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[37.78,77.44,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.833,0.833,0.833],\"y\":[0.833,0.833,0.833]},\"o\":{\"x\":[0.167,0.167,0.167],\"y\":[0.167,0.167,0.167]},\"t\":8,\"s\":[100,100,100]},{\"i\":{\"x\":[0.833,0.833,0.833],\"y\":[0.833,0.833,0.833]},\"o\":{\"x\":[0.167,0.167,0.167],\"y\":[0.167,0.167,0.167]},\"t\":74,\"s\":[82,82,100]},{\"t\":129.000005254278,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-5.895,-3.541],[15.559,-4.963],[20.461,7.446],[-4.859,1.703],[-37.875,10.014],[0,0]],\"o\":[[-11.163,14.765],[-27.499,8.771],[0.718,-6.701],[0,0],[39.495,-10.443],[5.321,-1.483]],\"v\":[[68.78,-20.892],[13.59,8.087],[-68.78,18.513],[-51.764,2.086],[-1.133,-5.255],[44.788,-24.476]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[73.78,61.921],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[4.732,-3.123],[4.876,-2.243],[4.751,-1.725],[4.236,-1.351],[5.528,-1.562],[5.456,-1.226],[5.401,-0.725],[5.284,0.117],[4.83,1.758],[-4.858,1.703],[-12.323,1.503],[-6.755,1.412],[-6.214,1.643],[-4.626,1.51],[-4.035,1.785],[-7.08,4.459],[-5.895,-3.541]],\"o\":[[-2.913,3.852],[-4.233,2.795],[-4.877,2.245],[-5.538,2.011],[-5.177,1.651],[-5.383,1.522],[-5.599,1.258],[-5.859,0.786],[-6.11,-0.136],[0.719,-6.7],[8.545,-0.627],[4.55,-0.554],[4.916,-1.027],[6.111,-1.616],[6.491,-2.118],[11.675,-5.164],[5.321,-1.483],[0,0]],\"v\":[[68.658,-18.679],[56.974,-8.35],[43.824,0.589],[28.383,4.596],[13.521,9.831],[-2.73,14.184],[-18.721,19.525],[-35.228,23.018],[-52.073,22.942],[-68.658,20.939],[-51.57,5.163],[-34.685,2.814],[-17.4,2.35],[-0.889,-2.467],[14.889,-8.092],[30.365,-14.243],[44.77,-22.321],[68.621,-17.97]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[71.634,60.505],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-5.895,-3.541],[15.559,-4.963],[20.461,7.446],[-4.859,1.703],[-37.875,10.014],[0,0]],\"o\":[[-11.163,14.765],[-27.499,8.771],[0.718,-6.701],[0,0],[39.495,-10.443],[5.321,-1.483]],\"v\":[[68.78,-20.892],[13.59,8.087],[-68.78,18.513],[-51.764,2.086],[-1.133,-5.255],[44.788,-24.476]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[73.78,61.921],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[22.524,-6.277],[-6.508,-23.351],[-25.223,5.766]],\"o\":[[-6.508,-23.35],[-22.623,6.306],[0,0],[25.224,-5.766]],\"v\":[[51.837,0.976],[-8.53,-27.763],[-45.329,28.058],[1.857,28.274]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.321,39.04],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-23.983,5.63],[-3.34,2.809],[0,0],[35.635,-8.988]],\"o\":[[0,0],[0,0],[33.848,-7.947],[1.224,-1.03],[0,0],[-17.633,4.447]],\"v\":[[-49.494,9.224],[-48.991,16.92],[-3.253,11.276],[48.27,-9.443],[44.583,-16.92],[-2.863,2.961]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[71.572,48.869],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[4.767,-6.234],[-2.507,-2.929],[-9.278,0.836],[-5.614,0.878],[-5.209,1.223],[-5.262,1.67],[-4.662,2.083],[-1.787,1.503],[4.133,1.214],[10.702,-4.958],[6.499,-2.176],[6.231,-1.572],[5.434,-0.817],[4.787,-0.499]],\"o\":[[-2.342,3.063],[5.004,5.846],[4.458,-0.402],[4.798,-0.75],[6.742,-1.583],[7.018,-2.228],[9.388,-4.195],[1.225,-1.03],[-8.28,-2.433],[-4.258,1.973],[-4.838,1.619],[-4.603,1.161],[-5.37,0.807],[-8.926,0.931]],\"v\":[[-47.291,8.156],[-48.074,15.794],[-32.093,15.027],[-16.854,12.723],[-1.571,10.488],[16.323,5.111],[33.539,-2.053],[49.356,-11.535],[46.268,-19.207],[31.128,-10.052],[14.89,-4.39],[-1.451,1.046],[-16.906,3.524],[-32.278,7.148]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.085,52.484],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-23.983,5.63],[-3.34,2.809],[0,0],[35.635,-8.988]],\"o\":[[0,0],[0,0],[33.848,-7.947],[1.224,-1.03],[0,0],[-17.633,4.447]],\"v\":[[-49.494,9.224],[-48.991,16.92],[-3.253,11.276],[48.27,-9.443],[44.583,-16.92],[-2.863,2.961]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[71.572,48.869],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[22.524,-6.277],[-6.508,-23.351],[-25.223,5.766]],\"o\":[[-6.508,-23.35],[-22.623,6.306],[0,0],[25.224,-5.766]],\"v\":[[51.837,0.976],[-8.53,-27.763],[-45.329,28.058],[1.857,28.274]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.321,39.04],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.507,8.908],[4.361,4.343],[5.718,2.476],[6.036,0.577],[5.678,-1.582],[5.043,-3.739],[3.532,-4.964],[1.437,-5.799],[-1.669,-5.987],[-9.517,-0.724],[-5.861,0.389],[-5.443,1.244],[-5.732,2.733],[-4.831,3.165]],\"o\":[[-1.668,-5.983],[-4.232,-4.214],[-5.592,-2.421],[-6.258,-0.597],[-5.691,1.587],[-4.877,3.615],[-3.614,5.078],[-1.48,5.974],[5.661,5.552],[4.597,0.349],[4.952,-0.328],[6.137,-1.403],[6.115,-2.915],[9.252,-6.06]],\"v\":[[49.193,-1.429],[40.809,-17.199],[25.137,-26.713],[7.464,-30.877],[-10.628,-29.848],[-26.486,-21.155],[-38.973,-8.208],[-47.438,7.746],[-47.523,25.922],[-31.857,28.994],[-15.947,28.513],[-0.432,25.374],[17.93,20.069],[33.869,9.441]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[66.452,45.243],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 9\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":9,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[22.524,-6.277],[-6.508,-23.351],[-25.223,5.766]],\"o\":[[-6.508,-23.35],[-22.623,6.306],[0,0],[25.224,-5.766]],\"v\":[[51.837,0.976],[-8.53,-27.763],[-45.329,28.058],[1.857,28.274]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.321,39.04],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 10\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":10,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":3,\"ty\":4,\"nm\":\"OnigiriGroupアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[491.412,716.19,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[53.367,41.886,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.381],[5.499,10.107],[8.166,-0.517],[-0.11,-2.29],[2.981,-10.176],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[4.298,-11.112],[-2.044,-3.094],[0,0],[1.782,10.291],[3.507,0.286],[0,0]],\"v\":[[2.548,19.174],[10.447,18.076],[7.382,-16.406],[-14.727,-16.206],[-14.635,-12.526],[-14.402,18.836],[-4.049,19.5]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[67.816,59.272],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.382],[0.603,5.944],[2.761,5.074],[8.166,-0.517],[-0.111,-2.29],[-0.21,-5.273],[1.493,-5.097],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[2.141,-5.533],[-0.609,-5.994],[-2.044,-3.094],[-1.793,0.418],[0.889,5.136],[0.211,5.292],[3.506,0.286],[3.299,0.014]],\"v\":[[4.347,18.905],[12.262,17.969],[14.137,0.455],[9.361,-16.607],[-12.946,-16.467],[-13.095,-12.594],[-10.575,3.051],[-12.596,18.735],[-2.234,19.687]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[63,62.377],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.381],[5.499,10.107],[8.166,-0.517],[-0.11,-2.29],[2.981,-10.176],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[4.298,-11.112],[-2.044,-3.094],[0,0],[1.782,10.291],[3.507,0.286],[0,0]],\"v\":[[2.548,19.174],[10.447,18.076],[7.382,-16.406],[-14.727,-16.206],[-14.635,-12.526],[-14.402,18.836],[-4.049,19.5]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[67.816,59.272],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[6.219,9.772],[-5.774,10.217],[-11.105,-3.109],[3.109,-22.654],[10.054,-1.881]],\"o\":[[-12.222,-0.922],[-6.219,-8.884],[5.775,-10.66],[23.542,6.219],[-0.889,8.44],[-3.913,0.34]],\"v\":[[0.895,34.886],[-32.648,24.192],[-24.653,-9.123],[1.999,-31.777],[35.758,23.303],[7.492,34.512]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[62.867,43.886],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.381],[5.499,10.107],[8.166,-0.517],[-0.11,-2.29],[2.981,-10.176],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[4.298,-11.112],[-2.044,-3.094],[0,0],[1.782,10.291],[3.507,0.286],[0,0]],\"v\":[[2.548,19.174],[10.447,18.076],[7.382,-16.406],[-14.727,-16.206],[-14.635,-12.526],[-14.402,18.836],[-4.049,19.5]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[48.816,55.272],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.382],[0.603,5.944],[2.761,5.074],[8.166,-0.517],[-0.111,-2.29],[-0.21,-5.273],[1.493,-5.097],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[2.141,-5.533],[-0.609,-5.994],[-2.044,-3.094],[-1.793,0.418],[0.889,5.136],[0.211,5.292],[3.506,0.286],[3.299,0.014]],\"v\":[[4.347,18.905],[12.262,17.969],[14.137,0.455],[9.361,-16.607],[-12.946,-16.467],[-13.095,-12.594],[-10.576,3.051],[-12.596,18.735],[-2.234,19.687]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[44,58.377],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.913,0.297],[-2.827,0.381],[5.499,10.107],[8.166,-0.517],[-0.11,-2.29],[2.981,-10.176],[-3.317,-0.218]],\"o\":[[2.339,-0.381],[4.298,-11.112],[-2.044,-3.094],[0,0],[1.782,10.291],[3.507,0.286],[0,0]],\"v\":[[2.548,19.174],[10.447,18.076],[7.382,-16.406],[-14.727,-16.206],[-14.635,-12.526],[-14.402,18.836],[-4.049,19.5]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[48.816,55.272],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[6.219,9.772],[-5.774,10.217],[-11.105,-3.109],[3.109,-22.654],[10.054,-1.881]],\"o\":[[-12.222,-0.922],[-6.219,-8.884],[5.775,-10.66],[23.542,6.219],[-0.889,8.44],[-3.913,0.34]],\"v\":[[0.895,34.886],[-32.648,24.192],[-24.653,-9.123],[1.999,-31.777],[35.758,23.303],[7.492,34.512]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[43.867,39.886],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":5,\"ty\":4,\"nm\":\"Onigiriアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":18,\"s\":[26]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":34,\"s\":[6]},{\"t\":53.0000021587343,\"s\":[26]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":18,\"s\":[457.743,737.577,0],\"to\":[0,0,0],\"ti\":[0,0,0]},{\"t\":53.0000021587343,\"s\":[457.743,737.577,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[41.617,70.733,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.25,2.2],[-2.265,1.735],[9.791,6.045],[6.832,-4.502],[-1.233,-1.933],[-2.462,-10.314],[-2.988,1.457]],\"o\":[[1.841,-1.492],[-1.784,-11.78],[-3.31,-1.671],[0,0],[6.654,8.05],[3.186,-1.492],[0,0]],\"v\":[[13.122,13.42],[19.434,8.546],[-0.34,-19.868],[-19.434,-8.721],[-17.529,-5.573],[-1.762,21.539],[7.557,16.977]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[41.747,52.726],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.25,2.2],[-2.265,1.734],[3.474,4.861],[4.916,3.035],[6.833,-4.502],[-1.232,-1.933],[-2.799,-4.474],[-1.233,-5.166],[-2.989,1.457]],\"o\":[[1.841,-1.492],[-0.888,-5.866],[-3.503,-4.902],[-3.31,-1.671],[-1.349,1.252],[3.321,4.018],[2.809,4.489],[3.186,-1.492],[2.865,-1.633]],\"v\":[[13.751,13.357],[20.169,8.633],[13.077,-7.484],[0.501,-19.965],[-18.82,-8.766],[-17.04,-5.298],[-7.028,6.995],[-1.034,21.635],[8.454,17.346]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[38.01,55.64],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.25,2.2],[-2.265,1.735],[9.791,6.045],[6.832,-4.502],[-1.233,-1.933],[-2.462,-10.314],[-2.988,1.457]],\"o\":[[1.841,-1.492],[-1.784,-11.78],[-3.31,-1.671],[0,0],[6.654,8.05],[3.186,-1.492],[0,0]],\"v\":[[13.122,13.42],[19.434,8.546],[-0.34,-19.868],[-19.434,-8.721],[-17.529,-5.573],[-1.762,21.539],[7.557,16.977]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[41.747,52.726],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[10.249,5.397],[0.058,11.735],[-11.184,2.812],[-8.543,-21.21],[7.794,-6.622]],\"o\":[[-11.068,5.265],[-9.808,-4.626],[-0.277,-12.121],[23.524,-6.285],[3.418,7.768],[-3.229,2.238]],\"v\":[[8.182,25.973],[-26.247,33.336],[-35.84,0.446],[-23.945,-32.448],[32.699,-1.385],[13.723,22.374]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[41.116,43.733],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":7,\"ty\":4,\"nm\":\"OnigiriBaseアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[480.043,726.942,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[91.651,49.425,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[9.549,-4.76],[-7.862,-12.575],[-24.224,-1.959],[2.34,11.878],[0,0],[0,0]],\"o\":[[-9.549,4.76],[7.862,12.574],[40.031,5.291],[-2.34,-11.879],[0,0],[0,0]],\"v\":[[-77.102,-39.665],[-59.099,4.201],[12.025,39.134],[84.311,12.508],[42.987,3.353],[-21.786,-21.586]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[91.651,49.425],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[3.254,-1.622],[-3.4,-7.205],[-3.081,-4.848],[-2.349,-3.758],[-7.126,-4.649],[-6.392,-3.041],[-6.229,-2.037],[-5.904,-0.477],[-5.354,0.17],[-5.191,1.018],[-4.789,1.863],[-3.843,2.806],[0.774,3.929],[9.219,0.972],[10.907,2.152],[8.095,3.117],[8.096,3.117],[8.097,3.117],[7.993,3.377],[9.935,4.273],[6.013,1.994]],\"o\":[[-4.084,2.036],[2.174,4.608],[3.366,5.297],[2.453,3.923],[5.193,3.388],[6.099,2.902],[6.997,2.287],[5.66,0.748],[5.761,-0.183],[5.788,-1.135],[5.821,-2.265],[6.167,-4.502],[-1.076,-5.461],[-10.83,-1.141],[-8.511,-1.679],[-8.097,-3.118],[-8.097,-3.118],[-8.098,-3.118],[-9.055,-3.825],[-5.812,-2.5],[-8.422,-2.792]],\"v\":[[-77.98,-39.12],[-77.186,-25.488],[-69.155,-10.902],[-59.568,2.87],[-45.716,17.059],[-28.211,27.264],[-8.656,32.588],[10.367,39.994],[27.046,37.633],[43.732,38.172],[59.3,32.247],[74.106,24.998],[81.29,12.118],[63.764,2.397],[41.242,3.936],[25.246,-3.425],[8.755,-8.885],[-6.913,-16.486],[-23.48,-21.801],[-40.856,-31.138],[-59.787,-36.61]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[89.145,54.115],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[9.549,-4.76],[-7.862,-12.575],[-24.224,-1.959],[2.34,11.878],[0,0],[0,0]],\"o\":[[-9.549,4.76],[7.862,12.574],[40.031,5.291],[-2.34,-11.879],[0,0],[0,0]],\"v\":[[-77.102,-39.665],[-59.099,4.201],[12.025,39.134],[84.311,12.508],[42.987,3.353],[-21.786,-21.586]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[91.651,49.425],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":9,\"ty\":4,\"nm\":\"Flowerアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.578],\"y\":[1]},\"o\":{\"x\":[0.331],\"y\":[0]},\"t\":10,\"s\":[0]},{\"i\":{\"x\":[0.249],\"y\":[1]},\"o\":{\"x\":[0.398],\"y\":[0]},\"t\":45,\"s\":[180]},{\"t\":89.0000036250443,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[560.694,562.913,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[21.021,20.513,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.31,-1.989],[1.989,1.31],[-1.31,1.989],[-1.989,-1.31]],\"o\":[[-1.31,1.989],[-1.989,-1.31],[1.31,-1.989],[1.989,1.31]],\"v\":[[3.601,2.372],[-2.372,3.601],[-3.601,-2.372],[2.372,-3.601]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[20.796,21.801],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.17,2.955],[3.812,-0.315],[0.63,-0.244],[3.768,-0.311],[-0.146,-3.657],[0.71,-0.059],[-0.213,-3.706],[-2.784,-0.667],[-0.083,-1.444],[-3.812,0.315],[-1.167,1.724],[-2.249,0.186],[0.213,3.706],[0.864,1.03]],\"o\":[[-0.213,-3.706],[-0.705,0.059],[-0.279,-3.643],[-3.771,0.312],[-0.656,-0.14],[-3.812,0.315],[0.17,2.958],[-0.734,1.161],[0.213,3.706],[2.25,-0.186],[1.353,1.516],[3.812,-0.315],[-0.083,-1.447],[2.676,-1.121]],\"v\":[[15.851,-3.509],[8.562,-9.649],[6.555,-9.186],[-0.719,-15.202],[-7.236,-8.038],[-9.292,-8.167],[-15.807,-0.886],[-10.737,5.082],[-11.786,9.059],[-4.497,15.198],[0.851,12.072],[6.505,14.288],[13.021,7.007],[11.521,3.233]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.02,20.513],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":11,\"ty\":4,\"nm\":\"Flowerアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.578],\"y\":[1]},\"o\":{\"x\":[0.331],\"y\":[0]},\"t\":10,\"s\":[0]},{\"i\":{\"x\":[0.249],\"y\":[1]},\"o\":{\"x\":[0.398],\"y\":[0]},\"t\":45,\"s\":[180]},{\"t\":89.0000036250443,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[101.699,596.069,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[17.699,17.297,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.038,-1.576],[1.576,1.039],[-1.038,1.576],[-1.577,-1.039]],\"o\":[[-1.038,1.576],[-1.577,-1.038],[1.039,-1.577],[1.576,1.038]],\"v\":[[2.855,1.88],[-1.88,2.854],[-2.855,-1.88],[1.88,-2.854]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[17.52,18.317],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.135,2.342],[3.022,-0.25],[0.5,-0.193],[2.987,-0.247],[-0.115,-2.899],[0.563,-0.047],[-0.169,-2.938],[-2.207,-0.529],[-0.065,-1.144],[-3.021,0.25],[-0.925,1.367],[-1.783,0.148],[0.169,2.937],[0.685,0.816]],\"o\":[[-0.169,-2.938],[-0.558,0.047],[-0.221,-2.887],[-2.99,0.247],[-0.519,-0.111],[-3.021,0.249],[0.135,2.345],[-0.582,0.92],[0.169,2.937],[1.783,-0.147],[1.073,1.202],[3.021,-0.25],[-0.066,-1.147],[2.121,-0.889]],\"v\":[[12.564,-2.782],[6.787,-7.648],[5.195,-7.282],[-0.57,-12.049],[-5.736,-6.372],[-7.365,-6.473],[-12.53,-0.702],[-8.511,4.029],[-9.342,7.181],[-3.565,12.047],[0.674,9.569],[5.157,11.326],[10.322,5.555],[9.133,2.563]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[17.699,17.297],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":13,\"ty\":4,\"nm\":\"Flowerアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.578],\"y\":[1]},\"o\":{\"x\":[0.331],\"y\":[0]},\"t\":5,\"s\":[0]},{\"i\":{\"x\":[0.249],\"y\":[1]},\"o\":{\"x\":[0.398],\"y\":[0]},\"t\":40,\"s\":[180]},{\"t\":84.0000034213901,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[712.694,707.913,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[21.021,20.513,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.31,-1.989],[1.989,1.31],[-1.31,1.989],[-1.989,-1.31]],\"o\":[[-1.31,1.989],[-1.989,-1.31],[1.31,-1.989],[1.989,1.31]],\"v\":[[3.601,2.372],[-2.372,3.601],[-3.601,-2.372],[2.372,-3.601]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[20.796,21.801],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.17,2.955],[3.812,-0.315],[0.63,-0.244],[3.768,-0.311],[-0.146,-3.657],[0.71,-0.059],[-0.213,-3.706],[-2.784,-0.667],[-0.083,-1.444],[-3.812,0.315],[-1.167,1.724],[-2.249,0.186],[0.213,3.706],[0.864,1.03]],\"o\":[[-0.213,-3.706],[-0.705,0.059],[-0.279,-3.643],[-3.771,0.312],[-0.656,-0.14],[-3.812,0.315],[0.17,2.958],[-0.734,1.161],[0.213,3.706],[2.25,-0.186],[1.353,1.516],[3.812,-0.315],[-0.083,-1.447],[2.676,-1.121]],\"v\":[[15.851,-3.509],[8.562,-9.649],[6.555,-9.186],[-0.719,-15.202],[-7.236,-8.038],[-9.292,-8.167],[-15.807,-0.886],[-10.737,5.082],[-11.786,9.059],[-4.497,15.198],[0.851,12.072],[6.505,14.288],[13.021,7.007],[11.521,3.233]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.02,20.513],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":15,\"ty\":4,\"nm\":\"Flowerアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.578],\"y\":[1]},\"o\":{\"x\":[0.331],\"y\":[0]},\"t\":12,\"s\":[0]},{\"i\":{\"x\":[0.249],\"y\":[1]},\"o\":{\"x\":[0.398],\"y\":[0]},\"t\":47,\"s\":[180]},{\"t\":91.000003706506,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[122.716,700.401,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[21.211,21.746,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-1.214,-2.049],[2.048,-1.214],[1.214,2.048],[-2.049,1.214]],\"o\":[[1.214,2.049],[-2.049,1.214],[-1.214,-2.049],[2.049,-1.214]],\"v\":[[3.71,-2.199],[2.199,3.71],[-3.71,2.199],[-2.199,-3.71]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.038,22.597],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.664,1.289],[1.578,-3.484],[0.093,-0.669],[1.561,-3.445],[-3.266,-1.652],[0.294,-0.649],[-3.342,-1.617],[-1.937,2.109],[-1.301,-0.629],[-1.578,3.484],[0.939,1.858],[-0.931,2.056],[3.341,1.616],[1.32,-0.255]],\"o\":[[-3.342,-1.616],[-0.292,0.644],[-3.318,-1.528],[-1.562,3.447],[-0.441,0.505],[-1.579,3.484],[2.667,1.29],[0.657,1.207],[3.342,1.617],[0.932,-2.056],[1.982,-0.446],[1.579,-3.484],[-1.305,-0.632],[0.322,-2.884]],\"v\":[[3.627,-15.13],[-5.282,-11.749],[-5.855,-9.769],[-14.649,-6.339],[-11.559,2.839],[-12.672,4.572],[-9.479,13.807],[-1.799,12.279],[1.166,15.129],[10.075,11.748],[9.945,5.555],[14.632,1.691],[11.44,-7.543],[7.412,-8.068]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.211,21.746],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":17,\"ty\":4,\"nm\":\"Flowerアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.578],\"y\":[1]},\"o\":{\"x\":[0.331],\"y\":[0]},\"t\":13.5,\"s\":[0]},{\"i\":{\"x\":[0.249],\"y\":[1]},\"o\":{\"x\":[0.398],\"y\":[0]},\"t\":48.5,\"s\":[180]},{\"t\":80.0000032584668,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[621.716,565.401,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[21.211,21.746,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-1.214,-2.049],[2.048,-1.214],[1.214,2.048],[-2.049,1.214]],\"o\":[[1.214,2.049],[-2.049,1.214],[-1.214,-2.049],[2.049,-1.214]],\"v\":[[3.71,-2.199],[2.198,3.71],[-3.709,2.199],[-2.198,-3.71]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.038,22.597],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.664,1.289],[1.578,-3.484],[0.093,-0.669],[1.561,-3.445],[-3.266,-1.652],[0.294,-0.649],[-3.342,-1.617],[-1.937,2.109],[-1.302,-0.629],[-1.578,3.484],[0.939,1.858],[-0.931,2.056],[3.341,1.616],[1.32,-0.255]],\"o\":[[-3.342,-1.616],[-0.292,0.644],[-3.318,-1.528],[-1.562,3.447],[-0.441,0.505],[-1.579,3.484],[2.667,1.29],[0.657,1.207],[3.342,1.617],[0.932,-2.056],[1.982,-0.446],[1.579,-3.484],[-1.305,-0.632],[0.322,-2.884]],\"v\":[[3.627,-15.13],[-5.282,-11.749],[-5.855,-9.769],[-14.649,-6.339],[-11.559,2.839],[-12.672,4.572],[-9.479,13.807],[-1.799,12.279],[1.166,15.129],[10.075,11.748],[9.945,5.555],[14.632,1.691],[11.44,-7.543],[7.412,-8.068]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.211,21.746],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":19,\"ty\":4,\"nm\":\"CloudLargeアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"s\":true,\"x\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":5,\"s\":[708.583]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":71,\"s\":[678.583]},{\"t\":146.000005946702,\"s\":[708.583]}],\"ix\":3},\"y\":{\"a\":0,\"k\":220.618,\"ix\":4}},\"a\":{\"a\":0,\"k\":[79.229,46.827,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.178,-2.564],[0.654,-1.941],[11.4,-0.001],[33.413,0.003],[-1.259,15.721],[-11.169,2.761],[-0.701,0.175],[-14.819,3.973],[-9.735,-15.474],[-2.943,0.688],[-4.321,-13.093],[-0.923,-0.953],[-1.361,-0.497],[-1.823,-11.163],[-0.095,-0.335]],\"o\":[[-0.494,1.995],[-3.643,10.829],[-33.414,0.004],[-15.807,-0.002],[0.905,-11.304],[0.726,-0.179],[-0.183,-17.433],[13.682,-3.669],[2.921,-1.029],[13.36,-3.124],[0.469,1.426],[0.873,0.901],[10.559,3.848],[0.056,0.341],[-1.472,2.304]],\"v\":[[75.298,20.394],[76.974,26.896],[50.043,44.673],[-50.198,41.507],[-77.72,15.55],[-56.645,-7.995],[-56.261,-9.098],[-26.786,-41.008],[12.464,-28.204],[21.039,-32.795],[49.71,-12.48],[53.496,-8.578],[57.93,-6.906],[74.607,14.79],[78.979,16.442]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[79.229,47.174],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.654,-1.942],[11.401,-0.001],[33.413,0.003],[-1.259,15.721],[-11.169,2.761],[-0.701,0.175],[-14.819,3.973],[-9.736,-15.474],[-2.943,0.688],[-4.32,-13.094],[-0.923,-0.953],[-1.361,-0.496],[-1.824,-11.162],[-0.095,-0.335]],\"o\":[[-0.494,1.995],[-3.644,10.829],[-33.414,0.003],[-15.807,-0.001],[0.906,-11.304],[0.726,-0.179],[-0.183,-17.433],[13.682,-3.669],[2.92,-1.029],[13.36,-3.124],[0.47,1.425],[0.872,0.901],[10.559,3.849],[0.055,0.342],[0,0]],\"v\":[[78.025,22.078],[76.52,28.056],[50.726,46.574],[-49.514,46.574],[-76.766,17.114],[-56.09,-6.97],[-53.939,-7.507],[-27.026,-42.909],[13.38,-26.865],[22.046,-29.866],[53.562,-11.983],[54.936,-7.767],[59.018,-6.473],[77.744,15.931],[78.025,16.937]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[79.742,46.828],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":21,\"ty\":4,\"nm\":\"CloudSmallアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[627.761,182.639,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[52.228,31.148,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.115,-1.664],[0.424,-1.259],[7.397,0],[21.679,0.002],[-0.817,10.199],[-7.246,1.792],[-0.455,0.113],[-9.614,2.577],[-6.317,-10.039],[-1.909,0.446],[-2.803,-8.495],[-0.599,-0.619],[-0.884,-0.322],[-1.183,-7.243],[-0.062,-0.217]],\"o\":[[-0.321,1.295],[-2.364,7.026],[-21.678,0.003],[-10.255,-0.001],[0.588,-7.335],[0.471,-0.116],[-0.118,-11.311],[8.877,-2.381],[1.895,-0.667],[8.668,-2.027],[0.305,0.925],[0.566,0.584],[6.85,2.497],[0.036,0.221],[1.528,1.405]],\"v\":[[51.863,14.844],[48.98,18.623],[32.121,29.998],[-32.914,28.831],[-51.161,11.438],[-37.34,-4.788],[-36.293,-4.506],[-18.367,-27.62],[8.606,-17.677],[13.382,-19.564],[33.852,-7.359],[33.858,-3.697],[36.742,-1.736],[48.947,10.831],[49.386,11.854]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[52.228,30.251],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.424,-1.259],[7.397,-0.001],[21.678,0.002],[-0.816,10.199],[-7.246,1.791],[-0.455,0.114],[-9.615,2.578],[-6.316,-10.04],[-1.909,0.446],[-2.803,-8.495],[-0.599,-0.619],[-0.883,-0.322],[-1.183,-7.242],[-0.062,-0.217]],\"o\":[[-0.321,1.295],[-2.364,7.026],[-21.678,0.002],[-10.256,-0.001],[0.588,-7.335],[0.471,-0.116],[-0.119,-11.31],[8.877,-2.38],[1.895,-0.668],[8.668,-2.027],[0.304,0.925],[0.566,0.585],[6.851,2.497],[0.037,0.222],[0,0]],\"v\":[[50.623,14.324],[49.647,18.203],[32.91,30.217],[-32.124,30.217],[-49.806,11.104],[-36.392,-4.523],[-34.996,-4.87],[-17.535,-27.84],[8.681,-17.43],[14.303,-19.378],[34.751,-7.775],[35.642,-5.039],[38.29,-4.2],[50.439,10.336],[50.623,10.988]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[52.635,31.826],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":23,\"ty\":4,\"nm\":\"CloudSmallアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"s\":true,\"x\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":20.5,\"s\":[91.537]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":46,\"s\":[111.537]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":71,\"s\":[91.537]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":108.5,\"s\":[111.537]},{\"t\":146.000005946702,\"s\":[91.537]}],\"ix\":3},\"y\":{\"a\":0,\"k\":303.727,\"ix\":4}},\"a\":{\"a\":0,\"k\":[52.604,30.56,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.115,-1.664],[0.424,-1.259],[7.397,-0.001],[21.678,0.002],[-0.816,10.2],[-7.247,1.792],[-0.454,0.113],[-9.614,2.578],[-6.316,-10.04],[-1.909,0.447],[-2.803,-8.495],[-0.599,-0.619],[-0.883,-0.322],[-1.183,-7.243],[-0.062,-0.217]],\"o\":[[-0.321,1.295],[-2.364,7.026],[-21.678,0.002],[-10.256,-0.001],[0.588,-7.334],[0.471,-0.116],[-0.118,-11.311],[8.877,-2.381],[1.895,-0.668],[8.668,-2.026],[0.305,0.925],[0.566,0.585],[6.851,2.497],[0.037,0.221],[0.955,1.538]],\"v\":[[51.308,13.69],[49.26,17.486],[32.555,29.909],[-32.48,28.581],[-51.538,10.287],[-36.334,-3.561],[-33.29,-5.516],[-17.618,-27.53],[8.278,-18.095],[14.312,-18.527],[33.959,-8.337],[36.342,-6.768],[37.55,-3.85],[50.943,9.49],[51.399,9.579]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[52.604,30.161],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.424,-1.259],[7.397,-0.001],[21.679,0.002],[-0.816,10.199],[-7.246,1.791],[-0.455,0.114],[-9.615,2.578],[-6.316,-10.04],[-1.909,0.446],[-2.803,-8.495],[-0.599,-0.619],[-0.883,-0.322],[-1.183,-7.242],[-0.062,-0.217]],\"o\":[[-0.321,1.295],[-2.364,7.026],[-21.678,0.002],[-10.255,-0.001],[0.588,-7.335],[0.471,-0.116],[-0.119,-11.31],[8.877,-2.38],[1.895,-0.668],[8.668,-2.027],[0.304,0.925],[0.566,0.585],[6.851,2.497],[0.037,0.222],[0,0]],\"v\":[[50.622,14.324],[49.646,18.202],[32.91,30.217],[-32.126,30.217],[-49.807,11.104],[-36.391,-4.523],[-34.995,-4.871],[-17.535,-27.84],[8.681,-17.43],[14.303,-19.378],[34.751,-7.775],[35.642,-5.04],[38.29,-4.2],[50.439,10.336],[50.622,10.988]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[53.445,30.651],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":25,\"ty\":4,\"nm\":\"CloudSmallアウトライン\",\"parent\":28,\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"s\":true,\"x\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":20.5,\"s\":[123.011]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":46,\"s\":[103.011]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":71,\"s\":[123.011]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":108.5,\"s\":[103.011]},{\"t\":146.000005946702,\"s\":[123.011]}],\"ix\":3},\"y\":{\"a\":0,\"k\":87.177,\"ix\":4}},\"a\":{\"a\":0,\"k\":[45.148,26.519,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.099,-1.428],[0.363,-1.081],[6.348,0],[18.604,0.001],[-0.7,8.753],[-6.219,1.538],[-0.39,0.097],[-8.251,2.212],[-5.421,-8.615],[-1.639,0.383],[-2.406,-7.29],[-0.514,-0.531],[-0.758,-0.276],[-1.015,-6.215],[-0.053,-0.187]],\"o\":[[-0.275,1.111],[-2.029,6.03],[-18.604,0.002],[-8.801,-0.001],[0.505,-6.294],[0.404,-0.1],[-0.102,-9.706],[7.618,-2.043],[1.626,-0.573],[7.439,-1.74],[0.261,0.794],[0.486,0.502],[5.88,2.143],[0.031,0.19],[0.563,1.374]],\"v\":[[43.721,11.701],[42.682,15.102],[27.995,24.275],[-27.818,26.034],[-44.198,8.805],[-31.716,-5.469],[-28.306,-4.75],[-15.155,-23.992],[6.121,-14.639],[12.195,-16.537],[29.014,-7.115],[29.236,-3.885],[32.298,-3.372],[44.397,8.021],[44.335,8.336]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[45.148,26.286],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.364,-1.081],[6.348,0],[18.605,0.002],[-0.701,8.753],[-6.219,1.537],[-0.39,0.098],[-8.251,2.212],[-5.421,-8.616],[-1.638,0.383],[-2.405,-7.29],[-0.514,-0.531],[-0.758,-0.277],[-1.015,-6.216],[-0.053,-0.186]],\"o\":[[-0.275,1.111],[-2.029,6.03],[-18.604,0.002],[-8.801,0],[0.504,-6.294],[0.404,-0.1],[-0.101,-9.706],[7.619,-2.043],[1.626,-0.573],[7.439,-1.739],[0.262,0.794],[0.486,0.502],[5.879,2.142],[0.031,0.19],[0,0]],\"v\":[[43.444,12.293],[42.605,15.621],[28.243,25.932],[-27.57,25.932],[-42.743,9.529],[-31.231,-3.881],[-30.034,-4.18],[-15.049,-23.891],[7.449,-14.958],[12.275,-16.63],[29.823,-6.672],[30.587,-4.325],[32.861,-3.604],[43.286,8.871],[43.444,9.43]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[46.096,26.854],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":27,\"ty\":4,\"nm\":\"CloudLargeアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"s\":true,\"x\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":25,\"s\":[227.423]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":71,\"s\":[177.423]},{\"t\":146.000005946702,\"s\":[227.423]}],\"ix\":3},\"y\":{\"a\":0,\"k\":58.179,\"ix\":4}},\"a\":{\"a\":0,\"k\":[68.397,40.972,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.155,-2.24],[0.571,-1.696],[9.957,-0.001],[29.183,0.003],[-1.099,13.73],[-9.755,2.412],[-0.612,0.153],[-12.943,3.47],[-8.503,-13.514],[-2.571,0.6],[-3.773,-11.436],[-0.806,-0.833],[-1.19,-0.434],[-1.593,-9.749],[-0.084,-0.292]],\"o\":[[-0.432,1.743],[-3.182,9.458],[-29.184,0.003],[-13.805,-0.001],[0.791,-9.874],[0.634,-0.156],[-0.16,-15.226],[11.95,-3.205],[2.551,-0.898],[11.669,-2.729],[0.411,1.245],[0.762,0.787],[9.222,3.361],[0.048,0.299],[-0.873,2.13]],\"v\":[[65.415,17.955],[64.375,22.936],[42.816,40.713],[-44.734,38.699],[-65.652,13.937],[-50.788,-8.589],[-50.865,-7.865],[-24.768,-37.511],[9.645,-24.221],[18.333,-24.912],[44.777,-11.537],[45.367,-6.936],[50.132,-7.094],[66.703,12.625],[63.68,12.33]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.688,40.977],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.571,-1.696],[9.957,-0.001],[29.184,0.003],[-1.099,13.73],[-9.755,2.412],[-0.613,0.152],[-12.942,3.47],[-8.503,-13.515],[-2.57,0.601],[-3.773,-11.436],[-0.806,-0.833],[-1.189,-0.434],[-1.592,-9.749],[-0.083,-0.293]],\"o\":[[-0.432,1.743],[-3.183,9.458],[-29.184,0.003],[-13.805,-0.001],[0.791,-9.874],[0.634,-0.156],[-0.16,-15.226],[11.95,-3.205],[2.551,-0.898],[11.669,-2.728],[0.411,1.245],[0.762,0.787],[9.223,3.361],[0.049,0.299],[0,0]],\"v\":[[68.147,19.283],[66.833,24.504],[44.304,40.678],[-43.246,40.678],[-67.048,14.949],[-48.989,-6.088],[-47.11,-6.556],[-23.605,-37.476],[11.686,-23.463],[19.255,-26.085],[46.781,-10.465],[47.981,-6.783],[51.546,-5.653],[67.901,13.915],[68.147,14.793]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.397,40.932],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":28,\"ty\":3,\"nm\":\"CloudLarge\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"s\":true,\"x\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":17,\"s\":[227.423]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":71,\"s\":[177.423]},{\"t\":146.000005946702,\"s\":[227.423]}],\"ix\":3},\"y\":{\"a\":0,\"k\":58.179,\"ix\":4}},\"a\":{\"a\":0,\"k\":[68.397,40.972,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":29,\"ty\":4,\"nm\":\"Windshieldアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.228],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":5,\"s\":[0]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.988],\"y\":[0]},\"t\":35,\"s\":[-20]},{\"i\":{\"x\":[0.228],\"y\":[1]},\"o\":{\"x\":[1],\"y\":[0]},\"t\":52,\"s\":[0]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.988],\"y\":[0]},\"t\":95,\"s\":[-20]},{\"t\":146.000005946702,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[369.058,217.278,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[20.209,33.632,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.334,-0.088],[1.892,-0.125],[1.892,-0.124],[1.893,-0.125],[1.893,-0.125],[1.893,-0.125],[1.893,-0.124],[1.893,-0.125],[1.894,-0.125],[1.896,-0.125],[1.896,-0.125],[1.118,0.553],[0.717,1.07],[0.088,1.334],[0.133,2.015],[0.133,2.015],[-0.553,1.119],[-1.069,0.716],[-1.334,0.088],[-1.891,0.125],[-1.892,0.124],[-1.893,0.125],[-1.893,0.124],[-1.894,0.125],[-1.893,0.125],[-1.893,0.125],[-1.894,0.125],[-1.896,0.125],[-1.896,0.125],[-1.118,-0.552],[-0.717,-1.069],[-0.087,-1.334],[-0.132,-2.015],[-0.133,-2.015],[0.552,-1.119],[1.069,-0.716]],\"o\":[[-1.891,0.125],[-1.892,0.125],[-1.893,0.125],[-1.893,0.124],[-1.893,0.125],[-1.892,0.124],[-1.893,0.125],[-1.893,0.125],[-1.896,0.125],[-1.897,0.124],[-1.334,0.088],[-1.154,-0.57],[-0.694,-1.036],[-0.132,-2.016],[-0.132,-2.015],[-0.087,-1.335],[0.57,-1.153],[1.036,-0.695],[1.891,-0.124],[1.893,-0.125],[1.893,-0.125],[1.893,-0.125],[1.893,-0.125],[1.892,-0.124],[1.892,-0.125],[1.893,-0.125],[1.896,-0.124],[1.897,-0.125],[1.334,-0.088],[1.154,0.57],[0.694,1.037],[0.133,2.015],[0.133,2.015],[0.088,1.334],[-0.57,1.154],[-1.037,0.694]],\"v\":[[19.805,9.858],[16.043,10.426],[12.341,11.917],[8.483,11.087],[4.66,10.767],[0.953,12.229],[-2.865,11.976],[-6.741,10.857],[-10.419,12.757],[-14.241,12.555],[-18.088,11.983],[-21.159,10.453],[-24.008,8.788],[-25.395,5.585],[-25.065,1.515],[-25.273,-2.519],[-26.906,-6.791],[-23.04,-8.865],[-19.611,-11.13],[-15.827,-11.353],[-11.948,-10.173],[-8.139,-10.076],[-4.511,-12.729],[-0.71,-12.758],[3.255,-10.279],[6.966,-11.654],[10.781,-11.479],[14.619,-11.03],[18.315,-12.755],[21.827,-11.573],[25.914,-10.183],[24.634,-5.808],[25.486,-1.816],[25.321,2.243],[26.907,6.373],[24.26,10.009]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[32.459,17.882],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":31,\"ty\":4,\"nm\":\"HeadPhone\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":10,\"s\":[-7]},{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":25,\"s\":[0]},{\"t\":45.0000018328876,\"s\":[-7]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[369.375,364.188,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[383.5,167,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-2.387,4.234],[-1.608,5.623],[1.34,4.613],[2.999,1.505],[4.199,-5.306],[0,0]],\"o\":[[2.853,-3.399],[5.906,-10.475],[1.303,-4.557],[-0.934,-3.217],[-9.81,-4.924],[0,0],[0,0]],\"v\":[[-4.553,30.367],[3.426,18.917],[14.126,-3.814],[15.801,-17.883],[9.809,-25.443],[-13.138,-9.559],[-17.142,-4.743]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[386.459,173.491],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 9\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[3.837,-8.736],[4.036,-5.916],[0,0],[-6.514,-4.97],[-1.615,-0.087]],\"o\":[[2.472,0.456],[-2.622,5.97],[-14.892,21.83],[0,0],[1.613,1.23],[0,0]],\"v\":[[24.171,-37.37],[21.149,-21.088],[10.852,-2.464],[-21.894,23.85],[-20.129,35.532],[-15.222,37.37]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[363.62,190.247],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 10\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[3.837,-8.736],[4.036,-5.916],[0,0],[-6.514,-4.97],[0,0],[-11.811,20.95],[-1.608,5.623],[1.339,4.613],[2.999,1.505],[4.199,-5.306],[0,0]],\"o\":[[2.472,0.456],[-2.622,5.97],[-14.892,21.83],[0,0],[6.515,4.97],[0,0],[5.906,-10.475],[1.304,-4.557],[-0.935,-3.217],[-9.81,-4.924],[0,0],[0,0]],\"v\":[[17.502,-34.06],[14.48,-17.777],[4.183,0.846],[-28.563,27.16],[-26.798,38.842],[-12.674,37.211],[19.597,5.471],[30.297,-17.259],[31.973,-31.328],[25.979,-38.888],[3.033,-23.004],[-0.971,-18.189]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 2\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[370.289,186.936],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 11\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-10.218,-8.087],[6.029,-7.618],[12.066,9.549],[-6.029,7.617]],\"o\":[[10.218,8.087],[-6.029,7.618],[-12.067,-9.55],[6.029,-7.618]],\"v\":[[11.201,-16.085],[18.787,12.351],[-12.748,15.003],[-18.217,-16.934]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":123.76,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":12.376,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 2\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[351.178,218.309],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 12\",\"np\":4,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-12.549,-9.931],[8.513,-10.756],[12.549,9.932],[-8.512,10.756]],\"o\":[[12.549,9.931],[-8.512,10.756],[-12.548,-9.931],[8.513,-10.757]],\"v\":[[15.413,-19.476],[22.721,17.982],[-15.414,19.475],[-22.722,-17.982]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":153.878,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":15.388,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[353.732,212.483],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 13\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-12.549,-9.931],[8.513,-10.756],[12.549,9.932],[-8.512,10.756]],\"o\":[[12.549,9.931],[-8.512,10.756],[-12.548,-9.931],[8.513,-10.757]],\"v\":[[15.413,-19.476],[22.721,17.982],[-15.414,19.475],[-22.722,-17.982]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 2\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[353.732,212.483],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 14\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":32,\"ty\":4,\"nm\":\"camera\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[403.386,336.865,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[71.056,136.641,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"hasMask\":true,\"masksProperties\":[{\"inv\":false,\"mode\":\"a\",\"pt\":{\"a\":0,\"k\":{\"i\":[[21.54,-38.259],[-4.638,-109.663],[-17.186,-2.86],[-15.149,8.017],[-6.439,27.951],[38.825,73.202]],\"o\":[[-46.77,83.074],[0.803,18.997],[17.636,2.935],[25.64,-13.569],[18.601,-80.745],[-20.572,-38.788]],\"v\":[[28.336,-144.25],[-0.164,140.331],[41.504,167.136],[90.998,155.504],[160.178,104.331],[160.053,-144.25]],\"c\":true},\"ix\":1},\"o\":{\"a\":0,\"k\":100,\"ix\":3},\"x\":{\"a\":0,\"k\":0,\"ix\":4},\"nm\":\"マスク 1\"}],\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.478,-7.251],[3.421,-0.226],[0.478,7.252],[-3.421,0.225]],\"o\":[[0.478,7.251],[-3.42,0.225],[-0.478,-7.251],[3.421,-0.226]],\"v\":[[6.194,-0.408],[0.865,13.13],[-6.194,0.408],[-0.865,-13.129]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[76.575,49.627],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.478,-7.252],[-3.42,0.225],[0,0],[0,0]],\"o\":[[-3.421,0.225],[0.478,7.251],[0,0],[0,0],[0,0]],\"v\":[[-2.298,-12.957],[-7.627,0.582],[-0.568,13.302],[8.105,12.732],[6.374,-13.527]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[68.097,50.107],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[3.626,-0.238],[-0.132,-2.014],[0,0],[0,0]],\"o\":[[-0.133,-2.014],[-3.626,0.239],[0,0],[0,0],[0,0]],\"v\":[[6.463,-1.259],[-0.342,-4.474],[-6.667,-0.394],[-6.33,4.712],[6.799,3.847]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[29.682,25.219],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0]],\"v\":[[5.331,10.857],[-3.861,11.463],[-5.331,-10.858],[3.859,-11.463]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[37.629,16.463],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.603,-9.152],[4.028,-0.265],[0.603,9.153],[-4.029,0.265]],\"o\":[[0.603,9.152],[-4.029,0.266],[-0.603,-9.152],[4.028,-0.266]],\"v\":[[7.294,-0.481],[1.092,16.571],[-7.294,0.481],[-1.092,-16.571]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[63.42,49.943],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.603,-9.152],[-4.028,0.266],[0,0],[0,0]],\"o\":[[-4.028,0.265],[0.603,9.153],[0,0],[0,0],[0,0]],\"v\":[[-2.796,-16.368],[-8.998,0.684],[-0.612,16.775],[9.601,16.103],[7.417,-17.041]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[53.452,50.509],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.551,-0.036],[0,0],[0.036,0.551],[0,0],[-0.551,0.037],[0,0],[-0.036,-0.551],[0,0]],\"o\":[[0,0],[-0.551,0.036],[0,0],[-0.036,-0.551],[0,0],[0.551,-0.037],[0,0],[0.036,0.551]],\"v\":[[11.107,23.663],[-7.906,24.917],[-8.969,23.985],[-12.038,-22.6],[-11.107,-23.663],[7.906,-24.915],[8.969,-23.983],[12.038,22.6]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[17.074,54.739],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.636,-0.099],[0,0],[0.048,0.728],[0,0],[-0.684,0.045],[0,0],[-0.045,-0.684],[0,0]],\"o\":[[0,0],[-0.721,0.113],[0,0],[-0.046,-0.684],[0,0],[0.684,-0.045],[0,0],[0.042,0.642]],\"v\":[[29.845,17.296],[-26.429,26.057],[-27.859,24.912],[-30.889,-21.074],[-29.732,-22.395],[26.874,-26.125],[28.194,-24.967],[30.892,15.987]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[56.948,52.071],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.472,-0.421],[5.245,4.308],[0,0],[0,0]],\"o\":[[-4.567,4.072],[-0.738,-0.606],[0,0],[0,0]],\"v\":[[12.069,59.671],[-4.322,60.751],[-12.541,-63.98],[3.85,-65.059]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":1,\"ml\":10,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[52.92,155.542],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 9\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":9,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0]],\"v\":[[10.675,61.933],[-2.456,62.798],[-10.675,-61.932],[2.456,-62.798]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":1,\"ml\":10,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[51.369,137.705],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 10\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":10,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.411,2.969],[0,0],[-9.895,-1.369],[-0.41,2.969],[0,0],[9.894,1.369]],\"o\":[[0,0],[-0.411,2.969],[9.894,1.368],[0,0],[-0.41,2.969],[-9.895,-1.368]],\"v\":[[-19.717,9.898],[-15.704,-19.121],[1.469,-11.266],[20.128,-14.164],[16.115,14.855],[-2.545,17.752]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[97.947,208.118],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 11\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":11,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.411,2.969],[0,0],[-9.895,-1.369],[-0.41,2.969],[0,0],[9.894,1.369]],\"o\":[[0,0],[-0.411,2.969],[9.894,1.368],[0,0],[-0.41,2.969],[-9.895,-1.368]],\"v\":[[-19.717,9.898],[-15.704,-19.121],[1.469,-11.266],[20.128,-14.164],[16.115,14.855],[-2.545,17.752]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[112.913,105.858],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 12\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":12,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[3.455,0.478],[-0.41,2.968],[0,0],[0,0],[0,0]],\"o\":[[0,0],[-2.734,0.228],[-9.104,-1.259],[0,0],[0,0],[0,0],[0,0]],\"v\":[[5.547,54.965],[19.249,-44.092],[9.801,-44.442],[-5.547,-54.965],[-5.504,-54.96],[-5.547,-54.965],[-19.249,44.092]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[109.274,106.458],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 13\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":13,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-9.104,-1.26],[-2.618,0.178],[0,0],[0,0]],\"o\":[[0,0],[-0.41,2.967],[3.24,0.448],[0,0],[0,0],[0,0]],\"v\":[[-9.328,-31.062],[-19.127,39.777],[-3.582,48.867],[5.835,49.439],[7.292,38.91],[19.537,-49.617]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[94.101,219.589],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 14\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":14,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.618,0.178],[0,0],[0,0],[3.455,0.478],[-0.411,2.967],[0,0],[0,0],[0,0],[-9.103,-1.259]],\"o\":[[0,0],[0,0],[-2.734,0.228],[-9.103,-1.259],[0,0],[0,0],[0,0],[-0.411,2.967],[3.24,0.448]],\"v\":[[-1.607,108.678],[-0.15,98.148],[26.98,-97.984],[17.532,-98.333],[2.186,-108.856],[2.229,-108.851],[2.186,-108.856],[-26.569,99.016],[-11.025,108.106]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 2\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[101.543,160.35],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 15\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":15,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.201,-1.451],[5.439,0.753],[-0.201,1.451],[-5.439,-0.752]],\"o\":[[-0.201,1.451],[-5.439,-0.752],[0.2,-1.452],[5.439,0.753]],\"v\":[[9.848,1.358],[-0.304,2.631],[-9.848,-1.366],[0.363,-2.632]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[119.819,53.674],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 16\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":16,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.411,-2.969],[9.105,1.259],[-0.411,2.969],[-9.105,-1.259]],\"o\":[[-0.411,2.969],[-9.105,-1.26],[0.411,-2.969],[9.105,1.26]],\"v\":[[16.487,2.28],[-0.743,5.376],[-16.487,-2.28],[0.743,-5.376]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[120.215,53.774],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 17\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":17,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.411,2.969],[0,0],[0,0],[0,0],[0.255,-1.842],[-9.105,-1.26]],\"o\":[[0,0],[0,0],[0,0],[0.031,-0.225],[-0.41,2.969],[9.105,1.259]],\"v\":[[2.141,103.86],[30.945,-104.372],[-2.128,-108.215],[-29.921,92.714],[-30.535,97.149],[-15.089,106.956]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 2\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[105.806,160.067],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 18\",\"np\":4,\"cix\":2,\"bm\":0,\"ix\":18,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":33,\"ty\":4,\"nm\":\"StringRightアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0],\"y\":[1]},\"o\":{\"x\":[0.848],\"y\":[0]},\"t\":16,\"s\":[0]},{\"i\":{\"x\":[0.051],\"y\":[1]},\"o\":{\"x\":[0.428],\"y\":[0]},\"t\":35,\"s\":[20]},{\"i\":{\"x\":[0],\"y\":[1]},\"o\":{\"x\":[0],\"y\":[0]},\"t\":75,\"s\":[0]},{\"i\":{\"x\":[0.051],\"y\":[1]},\"o\":{\"x\":[0.428],\"y\":[0]},\"t\":96,\"s\":[20]},{\"t\":114.000004643315,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[464.083,344.027,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[11.807,9.481,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.793,-1.958],[-1.37,0.555],[0.793,1.958],[1.37,-0.555]],\"o\":[[0.793,1.958],[1.371,-0.555],[-0.793,-1.958],[-1.371,0.555]],\"v\":[[-2.481,1.005],[1.436,3.545],[2.482,-1.005],[-1.435,-3.545]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[29.505,53.542],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.793,-1.958],[-1.37,0.556],[0.794,1.958],[1.37,-0.555]],\"o\":[[0.793,1.958],[1.371,-0.555],[-0.793,-1.958],[-1.371,0.555]],\"v\":[[-2.468,1.014],[1.433,3.49],[2.467,-0.985],[-1.395,-3.492]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[26.483,56.536],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.793,-1.958],[-1.37,0.555],[0.793,1.958],[1.37,-0.555]],\"o\":[[0.793,1.958],[1.371,-0.555],[-0.793,-1.958],[-1.371,0.555]],\"v\":[[-2.481,1.005],[1.436,3.545],[2.482,-1.005],[-1.435,-3.545]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[29.505,53.542],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-2.814,-1.242]],\"o\":[[0,0],[0,0]],\"v\":[[-3.153,-4.22],[3.153,4.22]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[33.461,59.743],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,8.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.112],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.112]],\"v\":[[-0.003,-3.866],[3.829,0.008],[-0.003,3.866],[-3.829,0.008]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[5.828,11.817],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,8.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-9.909,-4.746]],\"o\":[[0,0],[0,0]],\"v\":[[-10.459,-23.146],[10.459,23.146]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[18.766,29.163],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":35,\"ty\":4,\"nm\":\"StringLeftアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0],\"y\":[1]},\"o\":{\"x\":[0.693],\"y\":[-0.005]},\"t\":18,\"s\":[0]},{\"i\":{\"x\":[0.198],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":39,\"s\":[20]},{\"i\":{\"x\":[0],\"y\":[1]},\"o\":{\"x\":[0],\"y\":[0]},\"t\":79,\"s\":[0]},{\"i\":{\"x\":[0.198],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":97,\"s\":[20]},{\"t\":123.000005009893,\"s\":[0]}],\"ix\":10},\"p\":{\"a\":0,\"k\":[445.245,351.122,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[8.969,8.576,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,8.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0.014,-3.781],[3.845,0.001],[0.014,3.781],[-3.845,0.001]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[5.811,11.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,8.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,64.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.112],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.112]],\"v\":[[0.004,-3.841],[3.841,0.001],[0.004,3.841],[-3.841,0.001]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[5.821,67.823],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-2.112,0],[0,-2.113],[2.112,0],[0,2.112]],\"o\":[[2.112,0],[0,2.112],[-2.112,0],[0,-2.113]],\"v\":[[0,-3.825],[3.825,0],[0,3.825],[-3.825,0]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[8.825,64.825],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[3.06,-2.207]],\"o\":[[0,0],[0,0]],\"v\":[[1.913,-5.095],[-1.913,5.095]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[6.912,72.058],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[6.764,-25.689]],\"o\":[[0,0],[0,0]],\"v\":[[-3.382,-29.851],[-3.382,29.851]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[10.556,36.058],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0},{\"ddd\":0,\"ind\":37,\"ty\":4,\"nm\":\"Baseアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[405.283,500.58,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[409.855,301.512,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-5.65,0.459]],\"o\":[[0,0],[0,0]],\"v\":[[-6.851,-1.376],[6.851,0.917]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[253.462,455.69],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-7.893,1.559]],\"o\":[[9.015,-0.928],[0,0]],\"v\":[[-9.557,-2.691],[9.557,2.061]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[93.713,421.38],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-24.36,-1.265]],\"o\":[[9.792,-3.979],[0,0]],\"v\":[[-24.016,-3.431],[24.016,7.41]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[66.088,417.218],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-8.159,-1.365],[0,0],[-3.341,-0.224],[0,0],[0,0],[0,0],[0,0],[0,0],[-3.877,-0.785],[0,0],[0,0],[-0.403,2.413],[2.097,0.606],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[4.293,0.436],[0,0],[5.049,1.318],[0,0],[0,0],[0,0],[0,0],[0,0],[1.452,-8.681]],\"o\":[[0,0],[3.302,0.552],[0,0],[0,0],[0,0],[0,0],[0,0],[3.946,0.264],[0,0],[0,0],[2.393,0.506],[0.361,-2.152],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-4.185,-1.052],[0,0],[-5.192,-0.528],[0,0],[0,0],[0,0],[0,0],[0,0],[-8.516,-2.223],[-1.365,8.16]],\"v\":[[-159.816,-9.614],[-53.16,8.224],[-43.191,9.388],[-32.91,10.076],[-32.699,15.774],[-9.865,14.932],[-9.988,11.612],[37.894,14.816],[49.641,16.391],[140.513,34.79],[167.995,40.597],[173.124,37.099],[170.077,32.259],[127.677,20.007],[110.941,15.799],[111.957,12.714],[94.667,7.022],[93.242,11.349],[42.206,-1.482],[29.471,-3.716],[-41.88,-10.969],[-57.263,-13.742],[-97.475,-24.239],[-96.35,-29.63],[-118.717,-34.299],[-119.61,-30.018],[-153.562,-38.88],[-172.119,-26.859]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[195.138,441.227],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-8.159,-1.365],[-8.887,-1.486],[-8.885,-1.486],[-8.888,-1.487],[-8.888,-1.487],[-8.89,-1.487],[-8.89,-1.487],[-3.34,-0.224],[-4.401,-2.679],[-2.789,-0.587],[-11.238,2.059],[-1.645,0.234],[-7.979,-0.535],[-7.98,-0.535],[-7.98,-0.534],[-3.877,-0.785],[-9.084,-1.839],[-9.088,-1.84],[-9.087,-1.84],[-9.089,-1.84],[-9.082,-1.873],[-6.87,-1.451],[-6.871,-1.451],[-0.404,2.413],[0,0],[2.097,0.606],[10.6,3.063],[10.646,2.9],[7.827,3.631],[1.43,0.771],[9.078,0.661],[2.278,-0.006],[8.505,2.139],[8.507,2.139],[8.506,2.138],[4.294,0.437],[8.918,0.906],[8.918,0.907],[8.92,0.907],[8.92,0.907],[5.048,1.318],[10.053,2.624],[9.063,5.08],[2.489,1.179],[11.423,0.191],[2.186,0.018],[8.488,2.215],[8.488,2.216],[1.452,-8.682],[0,0]],\"o\":[[8.887,1.486],[8.885,1.486],[8.888,1.487],[8.888,1.486],[8.89,1.487],[8.889,1.486],[3.301,0.552],[5.141,0.344],[2.435,1.482],[11.18,2.356],[1.635,-0.3],[7.918,-1.127],[7.98,0.534],[7.981,0.534],[3.947,0.265],[9.084,1.839],[9.087,1.84],[9.087,1.84],[9.089,1.84],[9.089,1.841],[6.877,1.419],[6.87,1.452],[2.393,0.506],[0,0],[0.36,-2.152],[-10.6,-3.063],[-10.6,-3.063],[-8.325,-2.268],[-1.474,-0.684],[-8.01,-4.32],[-2.271,-0.165],[-8.769,0.024],[-8.507,-2.138],[-8.506,-2.138],[-4.186,-1.053],[-8.918,-0.906],[-8.918,-0.907],[-8.92,-0.906],[-8.92,-0.906],[-5.191,-0.527],[-10.053,-2.624],[-10.052,-2.624],[-2.402,-1.347],[-10.326,-4.89],[-2.186,-0.036],[-8.772,-0.074],[-8.488,-2.216],[-8.517,-2.223],[0,0],[-1.364,8.159]],\"v\":[[-159.059,-8.973],[-140.676,-9.639],[-123.11,-5.445],[-105.723,-0.147],[-87.279,-1.172],[-70.003,4.82],[-52.346,8.519],[-42.092,8.488],[-30.505,6.279],[-30.84,10.691],[-9.201,10.506],[-8.619,11.355],[6.976,13.208],[23.108,11.71],[38.995,13.866],[51.03,13.501],[68.794,19.174],[86.788,23.747],[105.162,26.441],[123.452,29.561],[141.21,35.276],[155.746,34.36],[168.847,40.292],[171.337,34.863],[171.671,34.918],[170.704,32.342],[150.965,21.161],[129.168,17.029],[110.684,17.102],[112.113,12.823],[95.639,7.797],[94.395,8.306],[77.156,6.254],[59.982,2.616],[43.332,-3.1],[30.417,-3.392],[12.617,-5.557],[-5.283,-6.747],[-22.559,-14.106],[-40.458,-15.339],[-56.311,-14.703],[-75.695,-22.721],[-95.049,-28.246],[-95.171,-31.42],[-117.578,-35.002],[-118.457,-31.387],[-135.392,-36.338],[-152.941,-38.575],[-172.801,-28.91],[-167.682,-28.054]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[189.983,446.972],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-8.159,-1.365],[0,0],[-3.341,-0.224],[0,0],[0,0],[0,0],[0,0],[0,0],[-3.877,-0.785],[0,0],[0,0],[-0.403,2.413],[2.097,0.606],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[4.293,0.436],[0,0],[5.049,1.318],[0,0],[0,0],[0,0],[0,0],[0,0],[1.452,-8.681]],\"o\":[[0,0],[3.302,0.552],[0,0],[0,0],[0,0],[0,0],[0,0],[3.946,0.264],[0,0],[0,0],[2.393,0.506],[0.361,-2.152],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-4.185,-1.052],[0,0],[-5.192,-0.528],[0,0],[0,0],[0,0],[0,0],[0,0],[-8.516,-2.223],[-1.365,8.16]],\"v\":[[-159.816,-9.614],[-53.16,8.224],[-43.191,9.388],[-32.91,10.076],[-32.699,15.774],[-9.865,14.932],[-9.988,11.612],[37.894,14.816],[49.641,16.391],[140.513,34.79],[167.995,40.597],[173.124,37.099],[170.077,32.259],[127.677,20.007],[110.941,15.799],[111.957,12.714],[94.667,7.022],[93.242,11.349],[42.206,-1.482],[29.471,-3.716],[-41.88,-10.969],[-57.263,-13.742],[-97.475,-24.239],[-96.35,-29.63],[-118.717,-34.299],[-119.61,-30.018],[-153.562,-38.88],[-172.119,-26.859]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[195.138,441.227],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 6\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":6,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0]],\"v\":[[-2.89,-11.215],[6.969,-6.096],[-6.969,11.215]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[637.985,505.345],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 7\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":7,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0]],\"v\":[[2.89,11.215],[-6.969,6.096],[6.969,-11.215]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[642.064,488.033],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 8\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":8,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.509,-4.111],[4.11,0.509],[-0.509,4.111],[-4.111,-0.509]],\"o\":[[-0.509,4.111],[-4.111,-0.509],[0.508,-4.11],[4.111,0.508]],\"v\":[[7.443,0.921],[-0.921,7.443],[-7.443,-0.922],[0.921,-7.443]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[611.891,463.482],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 15\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":9,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.035,-16.443],[15.073,1.865],[-2.036,16.443],[-15.072,-1.865]],\"o\":[[-2.035,16.443],[-15.073,-1.866],[2.035,-16.443],[15.073,1.866]],\"v\":[[27.292,3.378],[-3.685,29.773],[-27.291,-3.378],[3.685,-29.773]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[640.024,496.689],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 16\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":10,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.578,-20.828],[20.828,2.578],[-2.578,20.828],[-20.828,-2.578]],\"o\":[[-2.578,20.828],[-20.828,-2.578],[2.578,-20.828],[20.828,2.578]],\"v\":[[37.712,4.668],[-4.668,37.712],[-37.712,-4.668],[4.668,-37.712]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":385.683,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":14.834,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[635.436,497.128],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 17\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":11,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[3.126,3.412],[-7,3],[-2,-9],[3,-3],[0.6,3.905]],\"o\":[[-1.949,-4.865],[9,-3],[0,4],[-3,2],[-2.238,-1.523]],\"v\":[[-8.551,2.365],[-7.5,-11.5],[14.5,1.5],[9.5,12.5],[-0.1,9.595]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[761.822,455.433],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 18\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":12,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[3.125,3.412],[-7,3],[-4.124,-2.498],[-1.001,-4.502],[3,-3],[0.6,3.905]],\"o\":[[-1.949,-4.865],[4.498,-1.5],[4.128,2.5],[0,4],[-3,2],[-2.238,-1.523]],\"v\":[[-8.445,1.634],[-7.57,-12.285],[6.076,-10.116],[14.57,0.835],[9.43,11.785],[-0.306,9.038]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[757.841,460.087],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 19\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":13,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[3.126,3.412],[-7,3],[-2,-9],[3,-3],[0.6,3.905]],\"o\":[[-1.949,-4.865],[9,-3],[0,4],[-3,2],[-2.238,-1.523]],\"v\":[[-8.551,2.365],[-7.5,-11.5],[14.5,1.5],[9.5,12.5],[-0.1,9.595]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[761.822,455.433],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 20\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":14,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.206,-1.89],[6,-3],[4,2],[0,6],[-4.87,-3.645]],\"o\":[[6.677,2.772],[-4,2],[-6,-3],[0,-7],[2.938,1.127]],\"v\":[[8.323,-4.272],[9,10.5],[-4,10.5],[-15,-3.5],[-1.13,-8.855]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[571.322,402.432],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 21\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":15,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.206,-1.89],[6,-3],[4,2],[0,6],[-4.869,-3.646]],\"o\":[[6.677,2.772],[-4,2],[-6,-3],[0,-7],[2.939,1.126]],\"v\":[[8.27,-4.232],[9.083,10.532],[-3.961,10.347],[-15.083,-3.605],[-1.161,-8.886]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[567.307,406.538],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 22\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":16,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.206,-1.89],[6,-3],[4,2],[0,6],[-4.87,-3.645]],\"o\":[[6.677,2.772],[-4,2],[-6,-3],[0,-7],[2.938,1.127]],\"v\":[[8.323,-4.272],[9,10.5],[-4,10.5],[-15,-3.5],[-1.13,-8.855]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[571.322,402.432],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 23\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":17,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.164,-0.53],[5.158,0.85],[2.387,-0.003],[-1.353,2.587],[-1.934,0.273],[-2.398,0.708],[-2.428,0.082],[-2.249,-0.883],[-0.198,-1.206],[0.752,-0.286],[1.039,-0.307],[-1.24,0.365],[-1.064,0.388],[1.124,2.157],[2.365,0.511],[2.869,-0.631],[3.237,-0.426],[2.127,-1.903],[-1.53,-1.699],[-2.469,-0.231],[-3.616,0.501],[-3.094,1.41]],\"o\":[[-4.636,2.112],[-2.345,-0.387],[-1.566,0.002],[1.021,-1.952],[2.468,-0.348],[2.312,-0.681],[2.41,-0.082],[0.994,0.39],[0.152,0.919],[-1.011,0.386],[-1.232,0.364],[1.085,-0.321],[2.01,-0.734],[-1.208,-2.319],[-2.873,-0.62],[-3.171,0.697],[-2.698,0.354],[-1.618,1.447],[1.87,2.076],[3.564,0.334],[3.396,-0.471],[1.17,-0.533]],\"v\":[[10.158,1.548],[-4.128,4.414],[-11.148,3.578],[-15.172,0.643],[-9.167,-1.984],[-1.929,-3.404],[5.107,-4.878],[12.214,-3.706],[15.159,-1.362],[13.541,0.52],[10.396,1.448],[10.929,3.376],[14.206,2.409],[16.828,-2.615],[10.088,-6.422],[1.391,-6.393],[-8.008,-4.133],[-15.883,-1.602],[-16.422,4.023],[-8.98,5.654],[1.529,6.54],[11.167,3.276]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[646.223,436.029],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 24\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":18,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.261,-0.179],[3.527,-0.42],[1.026,3.656],[-1.993,1.653],[-2.735,0.719],[-3.246,-0.317],[-3.08,-0.902],[-1.144,-0.85],[-0.336,-0.566],[1.018,-0.55],[2.052,-0.723],[3.476,-0.912],[-1.248,0.327],[-3.738,1.372],[-1.244,0.554],[-0.635,1.243],[2.23,1.007],[3.568,0.464],[3.844,-0.94],[2.557,-2.131],[-0.185,-3.11],[-3.593,0.249],[-4.626,0.657]],\"o\":[[-3.517,0.5],[-2.893,0.344],[-0.786,-2.804],[2.185,-1.813],[3.171,-0.835],[3.188,0.311],[1.358,0.397],[0.524,0.39],[0.622,1.049],[-1.918,1.039],[-3.39,1.194],[-1.244,0.326],[3.852,-1.011],[1.279,-0.469],[1.209,-0.539],[1.482,-2.898],[-3.309,-1.493],[-3.896,-0.506],[-3.228,0.789],[-2.265,1.888],[0.228,3.829],[4.663,-0.324],[1.269,-0.181]],\"v\":[[0.098,5.615],[-10.469,6.996],[-18.409,4.367],[-14.883,-2.808],[-7.302,-6.587],[2.386,-7.128],[11.961,-5.474],[15.812,-3.699],[17.175,-2.266],[16.479,-0.049],[10.416,2.458],[0.098,5.615],[0.63,7.544],[12.047,3.992],[15.839,2.469],[19.247,0.135],[14.908,-6.516],[4.268,-8.911],[-7.427,-8.62],[-16.297,-4.222],[-20.544,3.606],[-13.339,9.311],[0.63,7.544]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[715.495,420.238],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 25\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":19,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.374,1.237],[4.549,4.302],[5.787,1.849],[6.494,-0.595],[6.143,-2.189],[4.926,-3.537],[3.038,-1.151],[3.106,0.057],[6.394,-0.573],[5.136,-2.319],[2.141,-4.999],[-1.428,-5.207],[-10.726,-3.611],[-5.993,0.417],[-5.05,2.708],[-11.46,0.969],[-7.125,-0.457],[-6.334,1.97],[-3.976,3.928],[-0.634,2.434],[0.428,2.91],[0.436,1.58],[-0.343,-1.245],[-0.238,-1.619],[0.911,-2.685],[4.354,-2.07],[6.248,-0.369],[6.71,0.594],[5.623,-2.231],[4.177,-2.761],[4.952,-1.74],[5.724,0.599],[5.785,9.997],[-0.078,5.106],[-4.621,3.317],[-5.079,0.948],[-5.731,-0.366],[-5.581,2.348],[-2.354,1.744],[-2.563,1.357],[-12.275,-0.59],[-5.405,-3.35],[-3.357,-4.927],[-0.831,-2.749]],\"o\":[[-1.833,-6.056],[-4.388,-4.15],[-6.252,-1.996],[-6.494,0.596],[-5.704,2.033],[-2.599,1.866],[-2.934,1.113],[-6.385,-0.118],[-5.59,0.5],[-4.858,2.194],[-2.16,5.041],[3.046,11.112],[5.691,1.916],[5.728,-0.4],[9.686,-5.197],[7.17,-0.606],[6.616,0.425],[5.274,-1.641],[1.768,-1.747],[0.753,-2.889],[-0.239,-1.621],[-0.342,-1.239],[0.437,1.579],[0.405,2.752],[-1.634,4.824],[-5.667,2.694],[-6.766,0.4],[-5.984,-0.531],[-4.675,1.855],[-4.353,2.877],[-5.45,1.915],[-11.201,-1.172],[-2.55,-4.408],[0.085,-5.657],[4.237,-3.042],[5.655,-1.056],[5.864,0.374],[2.733,-1.15],[2.33,-1.727],[10.84,-5.74],[6.319,0.303],[5.067,3.14],[1.614,2.37],[0.372,1.228]],\"v\":[[72.281,-10.602],[61.962,-26.125],[46.704,-35.542],[27.197,-37.19],[8.116,-32.995],[-8.022,-24.724],[-16.015,-19.352],[-25.243,-18.128],[-44.285,-18.443],[-60.613,-14.497],[-71.953,-3.828],[-72.436,12.223],[-49.696,35.04],[-31.871,37.368],[-15.685,32.586],[13.741,18.373],[35.124,19.934],[54.821,17.629],[69.435,9.571],[73.359,3.264],[73.261,-5.777],[72.281,-10.602],[70.352,-10.07],[71.332,-5.246],[71.232,3.393],[60.087,13.456],[41.867,17.952],[21.79,16.489],[4.277,18.601],[-8.769,25.975],[-22.5,33.457],[-39.529,35.222],[-67.607,18.632],[-71.533,3.973],[-64.33,-10.082],[-49.88,-15.68],[-32.705,-16.544],[-14.872,-17.67],[-7.635,-22.543],[-0.268,-27.158],[35.72,-35.4],[53.563,-30.172],[66.605,-17.738],[70.352,-10.07]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[680.724,430.306],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 26\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":20,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[5.077,4.65],[5.57,1.858],[8.022,-1.234],[8.333,-6.463],[2.347,-1.033],[6.304,0.367],[7.059,-7.439],[-0.67,-5.512],[-8.998,-5.704],[-11.251,3.419],[-14.508,1.883],[-7.971,-0.381],[-7.468,4.124],[-0.339,5.541]],\"o\":[[-1.681,-5.727],[-3.727,-3.412],[-7.367,-2.456],[-12.181,1.873],[-1.854,1.438],[-5.365,2.361],[-12.745,-0.743],[-4.406,4.644],[1.028,8.449],[8.998,5.703],[13.539,-4.115],[7.87,-1.021],[9.481,0.453],[4.052,-2.237],[0.338,-5.54]],\"v\":[[71.314,-11.042],[60.597,-26.734],[46.839,-35.152],[22.765,-36.35],[-9.058,-23.419],[-15.011,-19.395],[-33.571,-18.302],[-67.743,-9.138],[-72.337,6.87],[-57.695,29.496],[-23.679,34.188],[12.321,16.818],[36.078,18.282],[62.747,12.508],[72.669,0.571]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[680.728,431.011],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 27\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":21,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.64,3.313],[-0.153,0.132],[-0.374,0.008],[-5.369,-1.376]],\"o\":[[0.64,-3.313],[0.032,-0.166],[0.237,-0.202],[5.739,-0.135],[0,0]],\"v\":[[-11.375,5.393],[-9.455,-4.546],[-9.232,-5.02],[-8.198,-5.258],[11.375,-2.878]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[670.764,473.227],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 28\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":22,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.64,3.313],[-0.153,0.132],[-0.374,0.008],[-5.369,-1.376]],\"o\":[[0.64,-3.313],[0.032,-0.166],[0.237,-0.202],[5.739,-0.135],[0,0]],\"v\":[[-11.375,5.393],[-9.455,-4.545],[-9.232,-5.019],[-8.198,-5.258],[11.375,-2.878]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[708.733,385.773],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 29\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":23,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.336,3.861],[-0.131,0.167],[-0.659,-0.005],[-3.459,-0.882]],\"o\":[[0.336,-3.861],[0.016,-0.19],[0.317,-0.403],[3.696,0.027],[0,0]],\"v\":[[-6.886,6.299],[-5.88,-5.284],[-5.714,-5.837],[-3.951,-6.294],[6.886,-4.918]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[689.357,470.589],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 30\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":24,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-0.131,0.167],[-0.659,-0.005],[-3.459,-0.882]],\"o\":[[0,0],[0.016,-0.19],[0.317,-0.403],[3.696,0.027],[0,0]],\"v\":[[-6.886,6.299],[-5.88,-5.284],[-5.714,-5.836],[-3.951,-6.294],[6.886,-4.918]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[690.627,390.348],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 31\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":25,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-34.59,16.962],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[34.589,-16.962],[0,0],[0,0],[0,0]],\"v\":[[-109.779,-21.822],[-37.81,69.761],[66.185,44.113],[109.779,9.923],[50.773,-69.761],[-9.947,-38.129]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[669.837,425.906],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 32\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":26,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,19.889]],\"o\":[[3.825,0],[0,0]],\"v\":[[-1.912,17.977],[1.913,-17.977]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[377.248,359.739],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 33\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":27,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-0.321,0.52]],\"o\":[[0,0],[0,0]],\"v\":[[-4.156,1.696],[4.156,-1.696]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[521.557,211.639],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 34\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":28,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.775,-1.065],[0,0],[-0.163,-1.964],[0,0],[-1.242,-0.731],[0,0],[-0.033,-1.537],[0,0],[0.335,-0.655],[0,0],[-0.535,-1.219],[0,0],[-2.291,1.358],[0,0],[0.14,1.691],[0,0],[0.457,0.647],[0,0],[-0.341,1.273],[0,0],[0.036,0.495],[0,0]],\"o\":[[0,0],[-1.84,0.706],[0,0],[0.119,1.436],[0,0],[1.324,0.78],[0,0],[0.016,0.735],[0,0],[-0.607,1.185],[0,0],[1.068,2.439],[0,0],[1.46,-0.866],[0,0],[-0.065,-0.789],[0,0],[-0.761,-1.076],[0,0],[0.128,-0.48],[0,0],[-0.218,-2.965]],\"v\":[[0.979,-15.365],[-5.679,-12.81],[-8.509,-8.305],[-8.227,-4.895],[-6.056,-1.439],[-6.01,-1.413],[-3.826,2.313],[-3.814,2.86],[-4.3,4.977],[-6.018,8.334],[-6.132,12.133],[-5.736,13.037],[0.586,15.072],[6.373,11.641],[8.531,7.461],[8.26,4.196],[7.462,2.002],[6.566,0.736],[5.904,-2.972],[7.057,-7.275],[7.196,-8.748],[6.989,-11.551]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[521.376,221.805],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 35\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":29,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[1.67,-9.565],[-1.793,0.073],[-0.96,0.935],[-0.037,0.675],[4.054,0.427]],\"o\":[[0,0],[-0.309,1.767],[3.448,-0.142],[0.484,-0.471],[0.225,-4.163],[-4.619,-0.486]],\"v\":[[-6.11,-11.288],[-4.836,9.84],[-1.965,13.124],[4.419,10.686],[5.212,8.893],[2.056,-12.71]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[523.936,240.927],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 36\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":30,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0]],\"v\":[[-6.098,2.535],[-2.946,2.65],[6.097,-2.65]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[463.462,231.493],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 37\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":31,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[3.05,-1.636],[0,0],[-0.475,-2.245],[0,0],[-1.542,-0.663],[0,0],[-0.264,-1.77],[0,0],[0.291,-0.805],[0,0],[-0.795,-1.33],[0,0],[-2.448,1.903],[0,0],[0.409,1.934],[0,0],[0.623,0.681],[0,0],[-0.207,1.52],[0,0],[0.114,0.567],[0,0]],\"o\":[[0,0],[-2.022,1.085],[0,0],[0.348,1.642],[0,0],[1.644,0.706],[0,0],[0.126,0.847],[0,0],[-0.527,1.457],[0,0],[1.591,2.662],[0,0],[1.56,-1.213],[0,0],[-0.191,-0.903],[0,0],[-1.036,-1.131],[0,0],[0.079,-0.573],[0,0],[-0.686,-3.393]],\"v\":[[-1.035,-17.742],[-8.353,-13.817],[-10.962,-8.198],[-10.138,-4.301],[-7.125,-0.626],[-7.068,-0.602],[-3.999,3.382],[-3.905,4.012],[-4.156,6.528],[-5.651,10.658],[-5.227,15.063],[-4.637,16.049],[2.965,17.475],[9.147,12.664],[11.029,7.52],[10.238,3.789],[8.995,1.371],[7.775,0.039],[6.466,-4.146],[7.168,-9.286],[7.115,-11.008],[6.465,-14.216]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[466.25,243.496],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 38\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":32,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0]],\"v\":[[0.431,-2.722],[-0.431,0.614],[0.016,2.722]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[464.096,255.843],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 39\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":33,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[2.747,-8.894],[-1.667,0.192],[-1.343,1.04],[-0.014,0.681],[4.8,-0.101]],\"o\":[[0,0],[-0.496,1.604],[4.767,-0.549],[0.539,-0.418],[0.105,-5.097],[-5.407,0.115]],\"v\":[[-7.013,-13.618],[-5.695,13.374],[-3.241,16.365],[5.847,12.934],[6.711,11.193],[2.213,-16.457]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[470.39,266.833],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 40\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":34,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[4.59,11.475],[29.069,-12.043],[-20.34,-14.098],[-15.3,6.759]],\"o\":[[-4.59,-11.475],[-29.068,12.044],[20.34,14.098],[15.299,-6.758]],\"v\":[[91.482,-22.763],[8.1,-26.392],[-75.732,24.336],[0.451,29.893]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[412.368,134.269],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 73\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":35,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[4.538,-53.141]],\"o\":[[-8.587,2.98],[0,0]],\"v\":[[-1.654,-52.363],[5.703,52.363]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[407.901,241.831],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 74\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":36,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[4.59,11.475],[29.069,-12.043],[-20.34,-14.098],[-15.3,6.759]],\"o\":[[-4.59,-11.475],[-29.068,12.044],[20.34,14.098],[15.299,-6.758]],\"v\":[[91.482,-22.763],[8.1,-26.392],[-75.732,24.336],[0.451,29.893]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[412.368,138.859],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 75\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":37,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0.158,5.043],[-1.747,-0.724],[-0.85,0],[0,0],[0.765,6.884]],\"o\":[[-0.059,-1.89],[0.822,0.341],[3.06,0],[0,0],[-0.51,-4.589]],\"v\":[[-4.579,-10.508],[-0.971,-12.931],[1.578,-12.354],[3.108,10.595],[-3.777,6.771]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[347.984,318.457],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 76\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":38,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[6.12,-3.059],[0,0],[-2.102,15.923],[-10.557,3.806],[-10.843,-4.678],[-0.152,-2.501],[2.682,-4.695],[3.06,19.124],[0,0]],\"o\":[[-13.769,-2.324],[-5.351,2.676],[0,0],[2.103,-15.923],[8.676,-3.128],[2.3,0.993],[1.12,18.342],[-3.06,5.354],[0,0],[0,0]],\"v\":[[34.23,-35.576],[22.387,-0.298],[-37.87,-14.586],[-37.87,-39.994],[-20.235,-60.771],[30.486,-46.37],[34.48,-40.68],[37.29,57.016],[-34.617,44.776],[-36.147,-13.361]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[357.935,322.23],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 77\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":39,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0.477,-8.711],[3.065,-1.532],[9.977,2.445],[6.418,1.818],[6.927,7.705],[-2.103,15.923],[-2.276,2.748],[-5.902,2.128],[-7.507,-2.126],[-5.472,-2.064],[-3.69,-1.592],[-0.152,-2.501],[-0.465,-8.407],[-0.336,-6.883],[-0.248,-6.403],[-0.1,-5.827],[0.799,-1.399],[10.093,-0.337],[6.68,0.631],[5.605,1.764],[0.854,5.336],[0.254,9.689],[0.255,9.69],[0.255,9.69]],\"o\":[[-6.874,-1.16],[-0.479,8.739],[-1.938,0.969],[-6.48,-1.588],[-10.979,-3.11],[-8.527,-9.485],[0.927,-7.021],[2.886,-3.485],[3.318,-1.196],[5.444,1.542],[6.717,2.534],[2.301,0.993],[0.253,4.133],[0.33,5.974],[0.316,6.49],[0.272,7.028],[0.181,10.482],[-1.005,1.758],[-5.975,0.2],[-6.806,-0.643],[-7.897,-2.486],[-0.534,-9.678],[-0.255,-9.69],[-0.255,-9.69],[0,0]],\"v\":[[38.207,-35.167],[30.207,-19.248],[26.844,1.468],[5.859,-2.266],[-13.852,-8.786],[-34.268,-13.59],[-34.964,-39.425],[-29.917,-53.736],[-16.594,-60.856],[0.999,-57.55],[17.651,-51.522],[34.448,-45.749],[39.341,-40.033],[39.827,-20.458],[40.845,-0.912],[41.797,18.644],[40.956,38.246],[41.996,58.165],[22.34,60.979],[2.823,61.421],[-15.957,56.253],[-31.289,45.513],[-30.695,26.089],[-32.246,6.736],[-32.227,-12.658]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[351.008,324.526],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 78\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":40,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[6.12,-3.059],[0,0],[-2.102,15.923],[-10.557,3.806],[-10.843,-4.678],[-0.152,-2.501],[2.682,-4.695],[3.06,19.124],[0,0]],\"o\":[[-13.769,-2.324],[-5.351,2.676],[0,0],[2.103,-15.923],[8.676,-3.128],[2.3,0.993],[1.12,18.342],[-3.06,5.354],[0,0],[0,0]],\"v\":[[34.23,-35.576],[22.387,-0.298],[-37.87,-14.586],[-37.87,-39.994],[-20.235,-60.771],[30.486,-46.37],[34.48,-40.68],[37.29,57.016],[-34.617,44.776],[-36.147,-13.361]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[357.935,322.23],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 79\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":41,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[4.59,-14.535]],\"o\":[[0,0],[0,0]],\"v\":[[-3.442,-25.626],[-1.147,25.627]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[462.16,330.67],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 80\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":42,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-7.479,-0.061],[1.483,-13.88],[14.581,-6.091],[1.968,0.779],[0,0],[0.573,2.629],[-1.992,2.995]],\"o\":[[3.421,0.028],[-1.307,12.243],[-1.954,0.816],[0,0],[-2.502,-0.99],[-0.985,-4.516],[3.088,-4.643]],\"v\":[[37.149,-31.311],[48.109,-14.331],[-29.648,30.538],[-35.758,30.592],[-42.636,27.87],[-47.572,22.09],[-47.6,7.686]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[488.914,264.501],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 81\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":43,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-1.997,-0.016],[1.482,-13.88],[7.273,-4.805],[5.777,-3.085],[5.453,-2.619],[5.074,-2.266],[3.425,-1.43],[1.968,0.779],[3.439,1.361],[0.573,2.629],[-1.992,2.995],[-8.896,4.516],[-6.053,2.865],[-5.628,2.525],[-5.175,2.142]],\"o\":[[3.421,0.028],[-0.36,3.366],[-4.513,2.981],[-5.253,2.805],[-5.781,2.776],[-7.245,3.237],[-1.953,0.816],[-3.439,-1.361],[-2.502,-0.99],[-0.985,-4.516],[0.859,-1.292],[4.983,-2.531],[5.57,-2.636],[6.103,-2.737],[8.888,-3.678]],\"v\":[[36.939,-31.153],[47.812,-15.148],[35.578,-2.156],[19.283,6.007],[3.317,14.745],[-13.352,22.047],[-30.192,28.914],[-36.199,30.39],[-42.559,26.358],[-47.22,21.163],[-47.301,7.213],[-31.457,-2.07],[-15.108,-11.239],[2.243,-18.322],[19.052,-26.63]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[486.117,268.308],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 82\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":44,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-7.479,-0.061],[1.483,-13.88],[14.581,-6.091],[1.968,0.779],[0,0],[0.573,2.629],[-1.992,2.995]],\"o\":[[3.421,0.028],[-1.307,12.243],[-1.954,0.816],[0,0],[-2.502,-0.99],[-0.985,-4.516],[3.088,-4.643]],\"v\":[[37.149,-31.311],[48.109,-14.331],[-29.648,30.538],[-35.758,30.592],[-42.636,27.87],[-47.572,22.09],[-47.6,7.686]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[488.914,264.501],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 83\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":45,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[9.18,10.71],[29.963,-7.424],[0.386,-2.853],[0,0],[-12.24,4.59],[-4.59,11.475]],\"o\":[[0,0],[-2.794,0.692],[-6.446,47.616],[0,0],[12.239,-4.589],[4.589,-11.475]],\"v\":[[38.766,-69.229],[-41.59,-33.503],[-46.854,-27.615],[-46.146,60.205],[-29.316,64.64],[48.71,2.678]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[491.094,304.661],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 84\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":46,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.633,3.072],[9.338,-4.839],[5.771,-2.795],[5.473,-2.415],[5.324,-2.003],[5.113,-1.267],[0.387,-2.852],[0.422,-5.682],[0.104,-5.604],[-0.186,-5.434],[-0.443,-5.01],[-3.054,-8.264],[-12.239,4.59],[-6.458,4.315],[-4.875,3.548],[-4.474,3.459],[-4.147,3.43],[-3.633,3.377],[-1.06,2.649],[0.23,8.125],[0.812,6.334],[1.348,5.561]],\"o\":[[-8.802,0.407],[-4.608,2.388],[-5.104,2.471],[-5.462,2.41],[-5.952,2.239],[-2.794,0.692],[-0.809,5.981],[-0.453,6.104],[-0.116,6.276],[0.228,6.646],[0.966,10.938],[3.303,8.936],[2.739,-1.027],[4.143,-2.768],[4.361,-3.174],[4.484,-3.467],[4.664,-3.858],[5.794,-5.386],[1.362,-3.406],[-0.161,-5.703],[-0.81,-6.324],[-1.859,-7.668]],\"v\":[[38.884,-68.888],[22.99,-62.179],[7.3,-54.191],[-8.848,-47.179],[-24.308,-38.388],[-41.528,-34.21],[-47.829,-28.421],[-47.626,-10.679],[-50.088,6.838],[-48.089,24.43],[-46.928,41.945],[-47.188,59.953],[-29.175,64.161],[-15.057,55.244],[-1.227,45.885],[12.581,36.434],[25.114,25.34],[38.275,14.987],[48.002,1.702],[50.013,-16.281],[48.991,-34.706],[46.466,-53.069]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[488.022,308.325],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 85\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":47,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[9.18,10.71],[29.963,-7.424],[0.386,-2.853],[0,0],[-12.24,4.59],[-4.59,11.475]],\"o\":[[0,0],[-2.794,0.692],[-6.446,47.616],[0,0],[12.239,-4.589],[4.589,-11.475]],\"v\":[[38.766,-69.229],[-41.59,-33.503],[-46.854,-27.615],[-46.146,60.205],[-29.316,64.64],[48.71,2.678]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[491.094,304.661],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 86\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":48,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,-128.173],[11.793,-9.372],[0,0],[8.999,1.408],[0,0],[-1.303,16.955],[-8.608,8.414]],\"o\":[[13.004,70.377],[0.316,26.35],[0,0],[-7.131,5.667],[0,0],[-16.8,-2.628],[0,0],[0,0]],\"v\":[[83.849,-147.32],[117.253,39.27],[100.922,78.38],[29.543,139.229],[4.236,145.913],[-88.814,131.358],[-116.267,96.668],[-91.035,-113.497]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[420.473,263.253],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 87\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":49,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-1.254,-5.111],[-1.601,-5.027],[-1.896,-5.143],[-1.88,-5.621],[-1.498,-6.126],[-1.034,-6.319],[-0.669,-6.312],[-0.413,-6.256],[-0.232,-6.195],[-0.1,-6.138],[0,-6.096],[1.595,-5.026],[7.138,-5.673],[7.135,-6.083],[7.138,-6.085],[7.136,-6.083],[7.141,-6.087],[7.208,-6.006],[8.999,1.408],[9.302,1.455],[9.305,1.456],[9.306,1.456],[9.306,1.456],[9.306,1.456],[4.187,3.205],[2.22,4.951],[-0.43,5.598],[-0.95,10.944],[-0.592,6.621],[-0.575,6.238],[-0.577,6.07],[-0.587,5.964],[-0.604,5.883],[-0.625,5.808],[-0.654,5.724],[-0.695,5.609],[-0.759,5.419],[-0.879,4.984],[-1.361,1.331]],\"o\":[[1.156,6.256],[1.521,6.205],[1.891,5.935],[2.007,5.446],[1.711,5.116],[1.246,5.097],[0.849,5.194],[0.562,5.298],[0.355,5.379],[0.204,5.438],[0.09,5.487],[0.125,10.401],[-2.447,7.707],[-7.203,6.002],[-7.138,6.085],[-7.135,6.082],[-7.14,6.087],[-7.14,6.087],[-7.131,5.667],[-9.302,-1.455],[-9.305,-1.455],[-9.305,-1.455],[-9.306,-1.456],[-9.307,-1.456],[-5.547,-0.868],[-4.309,-3.298],[-2.157,-4.812],[0.704,-8.804],[0.436,-5.036],[0.488,-5.45],[0.518,-5.627],[0.546,-5.732],[0.573,-5.813],[0.603,-5.885],[0.641,-5.961],[0.693,-6.059],[0.771,-6.216],[0.922,-6.577],[1.665,-9.444],[0,0]],\"v\":[[85.099,-146.612],[86.402,-129.173],[91.181,-112.444],[100.031,-97.187],[101.648,-79.35],[105.789,-62.669],[112.659,-46.415],[115.409,-29.207],[113.837,-11.653],[117.138,5.549],[118.511,22.901],[114.175,40.313],[116.511,63.136],[99.755,78.552],[85.085,90.266],[71.922,103.743],[56.012,113.984],[44.496,129.403],[28.909,140.039],[4.051,145.204],[-14.997,145.137],[-33.801,143.463],[-51.987,137.837],[-70.836,136.443],[-89.602,134.504],[-102.435,124.005],[-111.755,112.501],[-115.182,97.815],[-117.651,79.881],[-115.87,62.295],[-111.747,44.925],[-109.862,27.356],[-111.469,9.448],[-105.122,-7.674],[-104.621,-25.385],[-104.921,-43.206],[-98.72,-60.263],[-97.529,-77.897],[-98.445,-95.947],[-93.233,-114.256]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[417.929,265.229],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 88\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":50,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,-128.173],[11.793,-9.372],[0,0],[8.999,1.408],[0,0],[-1.303,16.955],[-8.608,8.414]],\"o\":[[13.004,70.377],[0.316,26.35],[0,0],[-7.131,5.667],[0,0],[-16.8,-2.628],[0,0],[0,0]],\"v\":[[83.849,-147.32],[117.253,39.27],[100.922,78.38],[29.543,139.229],[4.236,145.913],[-88.814,131.358],[-116.267,96.668],[-91.035,-113.497]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[420.473,263.253],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 89\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":51,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-4.941,0.433],[0,0],[0,0],[13.649,-3.427],[2.438,0.92]],\"o\":[[-3.993,-2.051],[32.594,-2.857],[0,0],[-8.303,10.346],[-2.612,0.656],[0,0]],\"v\":[[-42.551,5.635],[-40.017,-1.206],[36.599,-19.63],[46.544,-10.143],[-19.615,18.975],[-27.557,18.556]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[297.009,377.563],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 90\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":52,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[7.772,6.128],[-4.941,0.433],[-6.669,1.275],[-6.212,1.57],[-5.605,1.672],[-9.196,-3.571],[-3.523,-5.9],[7.01,-3.494],[5.858,-2.346],[5.376,-1.85],[3.856,-0.968],[2.438,0.92]],\"o\":[[-3.993,-2.051],[6.222,-0.546],[6.513,-1.245],[6.92,-1.749],[11.202,-3.341],[6.406,2.487],[-2.453,3.057],[-5.029,2.507],[-5.799,2.322],[-7.236,2.489],[-2.612,0.655],[-8.095,-5.677]],\"v\":[[-43.034,7.619],[-40.096,-0.648],[-20.565,-3.029],[-1.405,-7.674],[17.908,-11.892],[36.312,-17.527],[47.026,-9.055],[31.242,0.796],[14.544,7.91],[-2.362,14.607],[-19.599,20.443],[-27.13,19.319]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[294.015,379.183],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 91\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":53,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-4.941,0.433],[0,0],[0,0],[13.649,-3.427],[2.438,0.92]],\"o\":[[-3.993,-2.051],[32.594,-2.857],[0,0],[-8.303,10.346],[-2.612,0.656],[0,0]],\"v\":[[-42.551,5.635],[-40.017,-1.206],[36.599,-19.63],[46.544,-10.143],[-19.615,18.975],[-27.557,18.556]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[297.009,377.563],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 92\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":54,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[25.795,59.729],[-39.506,29.53],[-52.613,5.604],[-55.072,-20.204],[15.869,-39.03],[254.846,11.687]],\"o\":[[-25.795,-59.729],[39.506,-29.53],[52.613,-5.603],[100.87,37.008],[-15.869,39.03],[-254.846,-11.688]],\"v\":[[-379.06,13.987],[-251.533,-84.245],[-9.533,-136.245],[251.467,-82.245],[388.986,47.773],[4.03,130.16]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[409.855,456.176],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 93\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":55,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[2.312,5.354],[-0.136,5.257],[-3.367,4.994],[-5.153,3.805],[-5.594,2.866],[-5.668,2.348],[-5.637,2.093],[-5.546,2.023],[-5.375,2.126],[-5.056,2.46],[-4.319,3.228],[-6.175,2.771],[-6.057,2.056],[-5.992,1.674],[-5.952,1.43],[-5.922,1.256],[-5.893,1.124],[-5.867,1.018],[-5.839,0.93],[-5.806,0.855],[-5.763,0.788],[-5.703,0.728],[-5.611,0.67],[-5.449,0.611],[-5.056,0.538],[-6.755,-0.238],[-6.364,-0.633],[-6.172,-0.857],[-6.054,-1.009],[-5.97,-1.123],[-5.903,-1.213],[-5.845,-1.29],[-5.794,-1.357],[-5.741,-1.416],[-5.687,-1.474],[-5.624,-1.529],[-5.545,-1.585],[-5.436,-1.645],[-5.261,-1.713],[-4.893,-1.796],[-5.625,-2.301],[-5.511,-2.522],[-5.373,-2.763],[-5.198,-3.03],[-4.97,-3.333],[-4.662,-3.683],[-4.227,-4.097],[-3.563,-4.598],[-2.465,-5.196],[-0.541,-5.78],[2.357,-5.797],[4.752,-4.963],[5.352,-3.819],[5.599,-3.086],[5.734,-2.572],[5.818,-2.181],[5.875,-1.868],[5.911,-1.608],[5.939,-1.387],[5.959,-1.194],[5.974,-1.023],[5.983,-0.869],[5.988,-0.73],[5.993,-0.603],[5.994,-0.487],[5.995,-0.378],[5.992,-0.279],[5.992,-0.185],[5.987,-0.097],[5.982,-0.015],[5.979,0.063],[5.974,0.137],[5.97,0.207],[5.964,0.273],[5.923,0.317],[5.917,0.366],[5.91,0.418],[5.901,0.476],[5.889,0.537],[5.877,0.604],[5.864,0.679],[5.846,0.76],[5.826,0.849],[5.802,0.95],[5.772,1.063],[5.735,1.191],[5.691,1.336],[5.634,1.504],[5.561,1.699],[5.466,1.929],[5.337,2.204],[5.162,2.534],[4.916,2.937],[4.564,3.43],[4.05,4.021],[3.31,4.692]],\"o\":[[-2.722,-6.304],[0.16,-6.193],[3.102,-4.6],[4.493,-3.317],[5.092,-2.609],[5.399,-2.236],[5.583,-2.074],[5.705,-2.083],[5.793,-2.291],[5.815,-2.83],[4.064,-3.038],[4.959,-2.226],[5.316,-1.804],[5.509,-1.539],[5.632,-1.353],[5.718,-1.214],[5.789,-1.104],[5.848,-1.014],[5.906,-0.941],[5.967,-0.878],[6.039,-0.826],[6.137,-0.782],[6.302,-0.752],[6.669,-0.748],[5.066,-0.54],[5.468,0.192],[5.613,0.559],[5.685,0.789],[5.727,0.955],[5.755,1.082],[5.777,1.187],[5.796,1.278],[5.814,1.361],[5.836,1.44],[5.863,1.519],[5.9,1.604],[5.958,1.703],[6.065,1.835],[6.305,2.053],[5.968,2.189],[5.897,2.413],[5.814,2.66],[5.708,2.935],[5.572,3.249],[5.391,3.616],[5.139,4.059],[4.755,4.61],[4.11,5.304],[2.881,6.073],[0.595,6.352],[-1.89,4.649],[-3.619,3.78],[-4.393,3.135],[-4.817,2.655],[-5.082,2.279],[-5.26,1.973],[-5.385,1.714],[-5.48,1.492],[-5.552,1.296],[-5.609,1.123],[-5.652,0.967],[-5.686,0.825],[-5.715,0.697],[-5.735,0.577],[-5.754,0.467],[-5.768,0.365],[-5.781,0.268],[-5.789,0.179],[-5.795,0.094],[-5.801,0.014],[-5.806,-0.061],[-5.809,-0.134],[-5.81,-0.202],[-6.097,-0.28],[-6.099,-0.326],[-6.101,-0.377],[-6.101,-0.432],[-6.1,-0.491],[-6.101,-0.556],[-6.101,-0.628],[-6.098,-0.705],[-6.096,-0.792],[-6.091,-0.889],[-6.084,-0.997],[-6.073,-1.119],[-6.06,-1.257],[-6.039,-1.417],[-6.01,-1.604],[-5.969,-1.824],[-5.906,-2.085],[-5.813,-2.399],[-5.668,-2.783],[-5.441,-3.251],[-5.075,-3.814],[-4.488,-4.457],[-3.599,-5.101]],\"v\":[[-383.317,13.479],[-391.57,-3.866],[-376.863,-17.185],[-370.448,-34.734],[-356.227,-46.711],[-339.191,-53.204],[-322.208,-59.116],[-304.765,-63.421],[-286.48,-65.596],[-269.044,-71.045],[-255.592,-84.217],[-243.317,-99.737],[-222.141,-94.671],[-205.379,-99.642],[-189.371,-108.27],[-173.318,-118.166],[-155.203,-118.673],[-138.028,-123.938],[-119.417,-120.554],[-101.168,-118.576],[-83.818,-122.499],[-66.338,-125.675],[-49.867,-137.467],[-31.541,-134.024],[-13.225,-129.94],[3.614,-129.614],[21.647,-135.587],[38.705,-128.843],[58.049,-137.213],[74.923,-129.705],[92.572,-126.794],[107.979,-113.643],[126.131,-113.297],[145.653,-118.102],[162.806,-112.882],[179.169,-104.822],[196.651,-100.991],[215.203,-100.572],[229.278,-85.684],[249.374,-89.003],[263.244,-73.007],[282.375,-70.317],[300.898,-65.367],[316.501,-54.526],[328.219,-38.132],[346.07,-31.195],[364.43,-23.283],[370.401,-3.183],[383.866,10.365],[382.047,29.536],[389.349,49.271],[380.11,67.048],[362.295,74.769],[348.362,86.466],[329.734,88.943],[313.585,95.869],[299.04,108.181],[279.044,102.838],[262.491,108.778],[245.168,111.659],[229.363,123.306],[210.998,120.509],[194.019,126.936],[175.897,123.883],[159.045,134.046],[140.881,128.533],[123.18,127.982],[105.654,131.904],[87.889,127.157],[70.305,138.208],[52.689,124.537],[34.807,137.125],[17.04,137.391],[-0.46,131.477],[-18.716,134.579],[-36.361,126.662],[-54.338,125.07],[-72.186,121.984],[-90.963,129.518],[-108.801,125.878],[-127.128,126.78],[-144.181,117.202],[-162.508,117.866],[-179.666,110.68],[-197.053,105.654],[-215.095,104.214],[-234.108,106.448],[-249.247,92.671],[-269.026,96.297],[-287.312,93.418],[-304.438,86.722],[-317.922,72.313],[-337.298,69.782],[-344.87,48.845],[-366.702,46.735],[-376.407,30.487]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[410.265,460.619],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 94\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":56,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[25.795,59.729],[-39.506,29.53],[-52.613,5.604],[-55.072,-20.204],[15.869,-39.03],[254.846,11.687]],\"o\":[[-25.795,-59.729],[39.506,-29.53],[52.613,-5.603],[100.87,37.008],[-15.869,39.03],[-254.846,-11.688]],\"v\":[[-378.527,13.987],[-251,-84.245],[-9,-136.245],[252,-82.245],[389.519,47.773],[4.563,130.16]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[409.322,456.176],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 95\",\"np\":4,\"cix\":2,\"bm\":0,\"ix\":57,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[24,-107],[-23.849,15.047],[-15.299,-2.295],[0,0]],\"o\":[[0,0],[-31.364,-6.885],[23.849,-15.047],[15.299,2.295],[0,0]],\"v\":[[-31.168,-51.62],[-55.818,103.147],[-46.602,-57.227],[69.182,-100.853],[87.182,-95.853]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":200,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[375.14,196.785],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 96\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":58,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[7.38,-5.197],[1.075,-11.75],[0.826,-6.8],[0.912,-6.365],[0.997,-6.174],[1.072,-6.062],[1.14,-5.99],[1.203,-5.932],[1.26,-5.89],[1.313,-5.854],[2.711,6.567],[0.947,6.396],[0.213,6.084],[-0.222,5.898],[-0.552,5.751],[-0.845,5.607],[-1.151,5.432],[-1.523,5.161],[-2.097,4.592],[-3.495,2.205],[-6.294,3.124],[-5.764,2.577],[-5.59,2.308],[-5.476,2.082],[-5.343,1.814],[-5.065,1.358],[-3.323,-0.498],[7.937,-5.042],[8.452,-3.159],[8.453,-3.159],[8.451,-3.159],[8.453,-3.159],[8.454,-3.16],[8.527,-2.964]],\"o\":[[-7.128,5.019],[-0.436,4.762],[-0.626,5.16],[-0.762,5.316],[-0.87,5.396],[-0.963,5.444],[-1.042,5.47],[-1.113,5.49],[-1.177,5.502],[-4.919,-1.079],[-1.881,-4.556],[-0.777,-5.248],[-0.193,-5.497],[0.213,-5.624],[0.547,-5.71],[0.873,-5.787],[1.246,-5.884],[1.79,-6.068],[3.06,-6.702],[3.934,-2.482],[4.889,-2.425],[5.244,-2.345],[5.489,-2.266],[5.744,-2.182],[6.165,-2.092],[7.943,-2.13],[15.3,2.295],[-7.617,4.839],[-8.453,3.159],[-8.451,3.159],[-8.453,3.159],[-8.455,3.16],[-8.455,3.16],[-8.389,2.916]],\"v\":[[-40.716,-50.328],[-41.019,-34.172],[-43.874,-16.91],[-45.404,0.499],[-50.414,17.374],[-54.258,34.38],[-54.451,52.069],[-60.255,68.691],[-64.343,85.633],[-66.889,102.337],[-77.906,91.15],[-80.268,74.234],[-82.551,57.363],[-83.516,40.228],[-81.168,23.211],[-81.288,5.901],[-76.203,-10.63],[-71.096,-26.93],[-67.846,-43.947],[-56.634,-56.539],[-41.916,-66.612],[-25.267,-73.02],[-8.897,-79.935],[7.448,-86.949],[23.736,-94.283],[41.254,-97.914],[58.46,-99.734],[75.8,-97.296],[59.839,-89.384],[42.813,-83.385],[25.867,-77.185],[9.09,-70.52],[-8.198,-65.214],[-24.232,-56.434]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.684361237171,0.795256969975,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[382.677,199.897],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 97\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":59,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[24,-107],[-23.849,15.047],[-15.299,-2.295],[0,0]],\"o\":[[0,0],[-31.364,-6.885],[23.849,-15.047],[15.299,2.295],[0,0]],\"v\":[[-31.168,-51.62],[-55.818,103.147],[-46.602,-57.227],[69.182,-100.853],[87.182,-95.853]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[375.14,196.785],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 98\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":60,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":150.000006109625,\"st\":-55.0000022401959,\"bm\":0}],\"markers\":[]}" }, { "path": "src/lv1/images/finish-task-illust.json", "content": "{\"v\":\"5.7.4\",\"fr\":29.9700012207031,\"ip\":0,\"op\":90.0000036657751,\"w\":952,\"h\":480,\"nm\":\"タスク完了\",\"ddd\":0,\"assets\":[],\"layers\":[{\"ddd\":0,\"ind\":1,\"ty\":4,\"nm\":\"レイヤー 2アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[361.836,288.57,0],\"to\":[-10.5,-1.833,0],\"ti\":[10.5,1.833,0]},{\"t\":15.0000006109625,\"s\":[298.836,277.57,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[4.058,4.057,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.003,1.003,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":15,\"s\":[111.818,111.818,100]},{\"t\":22.0000008960784,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.396,-1.884],[1.885,-0.396],[0.396,1.884],[-1.884,0.396]],\"o\":[[0.396,1.884],[-1.884,0.396],[-0.396,-1.884],[1.884,-0.395]],\"v\":[[3.412,-0.717],[0.717,3.411],[-3.412,0.717],[-0.717,-3.412]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[4.057,4.057],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":2,\"ty\":4,\"nm\":\"レイヤー 3アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[583.385,321.886,0],\"to\":[3.833,0.667,0],\"ti\":[-3.833,-0.667,0]},{\"t\":10.0000004073083,\"s\":[606.385,325.886,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[3.83,3.83,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":10,\"s\":[111.818,111.818,100]},{\"t\":17.0000006924242,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.099,-1.923],[1.923,-0.099],[0.099,1.923],[-1.923,0.099]],\"o\":[[0.099,1.923],[-1.923,0.099],[-0.098,-1.922],[1.923,-0.098]],\"v\":[[3.481,-0.179],[0.178,3.481],[-3.482,0.178],[-0.179,-3.482]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[3.83,3.83],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":3,\"ty\":4,\"nm\":\"レイヤー 4アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[557.408,231.956,0],\"to\":[12.5,-9,0],\"ti\":[-12.5,9,0]},{\"t\":14.0000005702317,\"s\":[632.408,177.956,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[3.919,3.92,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":14,\"s\":[111.818,111.818,100]},{\"t\":21.0000008553475,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[1.915,0.203],[-0.202,1.914],[-1.915,-0.203],[0.203,-1.914]],\"o\":[[-1.915,-0.203],[0.203,-1.915],[1.914,0.202],[-0.202,1.915]],\"v\":[[-0.367,3.466],[-3.467,-0.366],[0.367,-3.466],[3.466,0.367]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[3.919,3.92],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":4,\"ty\":4,\"nm\":\"レイヤー 5アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[1.002]},\"o\":{\"x\":[0.362],\"y\":[0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[1.259]},\"o\":{\"x\":[0.337],\"y\":[0.005]},\"t\":30,\"s\":[-15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[401.494,361.531,0],\"to\":[-6.833,4.667,0],\"ti\":[6.833,-4.667,0]},{\"t\":10.0000004073083,\"s\":[360.494,389.531,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[13.718,14.679,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":10,\"s\":[111.818,111.818,100]},{\"t\":17.0000006924242,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"v\":[[-0.672,4.257],[-8.719,-1.165],[0,-5.421],[8.719,-9.68],[8.047,0.001],[7.374,9.68]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[13.718,14.68],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":5,\"ty\":4,\"nm\":\"レイヤー 6アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[1.002]},\"o\":{\"x\":[0.362],\"y\":[0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[1.259]},\"o\":{\"x\":[0.337],\"y\":[0.005]},\"t\":30,\"s\":[-15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[584.982,278.447,0],\"to\":[12.167,-2.5,0],\"ti\":[-12.167,2.5,0]},{\"t\":12.00000048877,\"s\":[657.982,263.447,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[13.524,13.253,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":12,\"s\":[111.818,111.818,100]},{\"t\":19.0000007738859,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"v\":[[2.755,1.741],[-3.015,8.253],[-5.77,0],[-8.525,-8.253],[0,-6.512],[8.525,-4.771]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[13.524,13.253],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":6,\"ty\":4,\"nm\":\"レイヤー 7アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[364.483,246.205,0],\"to\":[-17.333,-10.5,0],\"ti\":[17.333,10.5,0]},{\"t\":10.0000004073083,\"s\":[260.483,183.205,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[28.383,27.638,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":10,\"s\":[111.818,111.818,100]},{\"t\":17.0000006924242,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],\"v\":[[7.556,4.776],[-8.271,22.638],[-15.827,0],[-23.383,-22.638],[0,-17.862],[23.383,-13.086]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[28.383,27.638],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":7,\"ty\":4,\"nm\":\"レイヤー 8アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[430.131,178.972,0],\"to\":[-7.833,-20.833,0],\"ti\":[7.833,20.833,0]},{\"t\":15.0000006109625,\"s\":[383.131,53.972,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[17.198,17.197,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.003,1.003,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":15,\"s\":[111.818,111.818,100]},{\"t\":22.0000008960784,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0]],\"v\":[[2.377,12.197],[-12.198,2.377],[-2.377,-12.197],[12.198,-2.377]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[17.198,17.197],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":8,\"ty\":4,\"nm\":\"レイヤー 9アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[1.002]},\"o\":{\"x\":[0.362],\"y\":[0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[1.259]},\"o\":{\"x\":[0.337],\"y\":[0.005]},\"t\":30,\"s\":[-15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[566.845,218.578,0],\"to\":[24.167,-4,0],\"ti\":[-24.167,4,0]},{\"t\":11.0000004480392,\"s\":[711.845,194.578,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[24.391,24.391,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":11,\"s\":[111.818,111.818,100]},{\"t\":18.000000733155,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0],[0,0]],\"v\":[[-19.391,1.692],[-1.692,-19.391],[19.391,-1.692],[1.692,19.391]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[24.391,24.391],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":9,\"ty\":4,\"nm\":\"レイヤー 13アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[499.74,172.552,0],\"to\":[4,-18.833,0],\"ti\":[-4,18.833,0]},{\"t\":16.0000006516934,\"s\":[523.74,59.552,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[20.954,20.954,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.003,1.003,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":16,\"s\":[111.818,111.818,100]},{\"t\":23.0000009368092,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.569,-8.497],[8.497,-0.57],[0.569,8.497],[-8.497,0.569]],\"o\":[[0.569,8.497],[-8.497,0.569],[-0.569,-8.497],[8.497,-0.57]],\"v\":[[15.385,-1.031],[1.031,15.385],[-15.385,1.03],[-1.031,-15.384]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[20.954,20.955],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":10,\"ty\":4,\"nm\":\"レイヤー 14アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[371.875,231.86,0],\"to\":[-8.167,-2.167,0],\"ti\":[8.167,2.167,0]},{\"t\":14.0000005702317,\"s\":[322.875,218.86,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[3.736,3.736,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":14,\"s\":[111.818,111.818,100]},{\"t\":21.0000008553475,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,-1.925],[1.925,0],[0,1.925],[-1.925,0]],\"o\":[[0,1.925],[-1.925,0],[0,-1.925],[1.925,0]],\"v\":[[3.486,0],[0,3.486],[-3.486,0],[0,-3.486]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[3.736,3.736],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":11,\"ty\":4,\"nm\":\"レイヤー 15アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[401.887,195.148,0],\"to\":[-10.333,-12.833,0],\"ti\":[10.333,12.833,0]},{\"t\":12.00000048877,\"s\":[339.887,118.148,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[10.809,10.809,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":12,\"s\":[111.818,111.818,100]},{\"t\":19.0000007738859,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,-3.208],[3.208,0],[0,3.208],[-3.209,0]],\"o\":[[0,3.208],[-3.209,0],[0,-3.208],[3.208,0]],\"v\":[[5.809,0],[0,5.809],[-5.809,0],[0,-5.809]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.944075939702,0.498574320475,0.535545558555,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[10.809,10.809],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":12,\"ty\":4,\"nm\":\"レイヤー 16アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[583.889,324.219,0],\"to\":[18.5,5,0],\"ti\":[-18.5,-5,0]},{\"t\":10.0000004073083,\"s\":[694.889,354.219,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[13.049,13.048,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":10,\"s\":[111.818,111.818,100]},{\"t\":17.0000006924242,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,-4.445],[4.445,0],[0,4.445],[-4.445,0]],\"o\":[[0,4.445],[-4.445,0],[0,-4.445],[4.445,0]],\"v\":[[8.049,0],[0,8.048],[-8.049,0],[0,-8.048]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,0.833177274816,0.498574320475,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[13.048,13.048],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":13,\"ty\":4,\"nm\":\"レイヤー 17アウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.998]},\"o\":{\"x\":[0.362],\"y\":[-0.005]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.871]},\"o\":{\"x\":[0.337],\"y\":[-0.003]},\"t\":30,\"s\":[15]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[362.623,274.043,0],\"to\":[-17.167,2.167,0],\"ti\":[17.167,-2.167,0]},{\"t\":12.00000048877,\"s\":[259.623,287.043,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[15.982,15.983,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,1]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,0]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,1]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,0]},\"t\":12,\"s\":[111.818,111.818,100]},{\"t\":19.0000007738859,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-0.877,-5.581],[5.582,-0.877],[0.877,5.581],[-5.581,0.878]],\"o\":[[0.877,5.581],[-5.581,0.877],[-0.877,-5.581],[5.581,-0.877]],\"v\":[[10.106,-1.588],[1.588,10.106],[-10.105,1.588],[-1.588,-10.106]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":380,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":30,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[15.982,15.983],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":14,\"ty\":4,\"nm\":\"Flagアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.687],\"y\":[0.995]},\"o\":{\"x\":[0.362],\"y\":[-0.015]},\"t\":0,\"s\":[0]},{\"i\":{\"x\":[0.66],\"y\":[0.741]},\"o\":{\"x\":[0.337],\"y\":[-0.005]},\"t\":30,\"s\":[5]},{\"t\":90.0000036657751,\"s\":[-5]}],\"ix\":10},\"p\":{\"a\":1,\"k\":[{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":0,\"s\":[481.037,477.347,0],\"to\":[0,-20.167,0],\"ti\":[0,15.167,0]},{\"i\":{\"x\":0.833,\"y\":0.833},\"o\":{\"x\":0.167,\"y\":0.167},\"t\":10,\"s\":[481.037,356.347,0],\"to\":[0,-15.167,0],\"ti\":[0,-5,0]},{\"t\":17.0000006924242,\"s\":[481.037,386.347,0]}],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[123.54,257.152,0],\"ix\":1,\"l\":2},\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.035,0.035,0.833],\"y\":[1.002,1.002,-14.152]},\"o\":{\"x\":[0.294,0.294,0.167],\"y\":[0,0,20.337]},\"t\":0,\"s\":[0,0,100]},{\"i\":{\"x\":[0,0,0.833],\"y\":[1,1,6.729]},\"o\":{\"x\":[0.614,0.614,0.167],\"y\":[0.007,0.007,10.606]},\"t\":10,\"s\":[111.818,111.818,100]},{\"t\":17.0000006924242,\"s\":[100,100,100]}],\"ix\":6,\"l\":2}},\"ao\":0,\"ef\":[{\"ty\":5,\"nm\":\"タービュレントディスプレイス\",\"np\":16,\"mn\":\"ADBE Turbulent Displace\",\"ix\":1,\"en\":1,\"ef\":[{\"ty\":7,\"nm\":\"変形\",\"mn\":\"ADBE Turbulent Displace-0001\",\"ix\":1,\"v\":{\"a\":0,\"k\":1,\"ix\":1}},{\"ty\":0,\"nm\":\"量\",\"mn\":\"ADBE Turbulent Displace-0002\",\"ix\":2,\"v\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.166],\"y\":[1]},\"o\":{\"x\":[0.339],\"y\":[0.023]},\"t\":0,\"s\":[50]},{\"t\":17.0000006924242,\"s\":[0]}],\"ix\":2}},{\"ty\":0,\"nm\":\"サイズ\",\"mn\":\"ADBE Turbulent Displace-0003\",\"ix\":3,\"v\":{\"a\":0,\"k\":100,\"ix\":3}},{\"ty\":3,\"nm\":\"オフセット\",\"mn\":\"ADBE Turbulent Displace-0004\",\"ix\":4,\"v\":{\"a\":0,\"k\":[476,240],\"ix\":4}},{\"ty\":0,\"nm\":\"複雑度\",\"mn\":\"ADBE Turbulent Displace-0005\",\"ix\":5,\"v\":{\"a\":0,\"k\":1,\"ix\":5}},{\"ty\":0,\"nm\":\"展開\",\"mn\":\"ADBE Turbulent Displace-0006\",\"ix\":6,\"v\":{\"a\":0,\"k\":0,\"ix\":6}},{\"ty\":6,\"nm\":\"展開のオプション\",\"mn\":\"ADBE Turbulent Displace-0007\",\"ix\":7,\"v\":0},{\"ty\":7,\"nm\":\"サイクル展開\",\"mn\":\"ADBE Turbulent Displace-0008\",\"ix\":8,\"v\":{\"a\":0,\"k\":0,\"ix\":8}},{\"ty\":0,\"nm\":\"サイクル（周期）\",\"mn\":\"ADBE Turbulent Displace-0009\",\"ix\":9,\"v\":{\"a\":0,\"k\":1,\"ix\":9}},{\"ty\":0,\"nm\":\"ランダムシード\",\"mn\":\"ADBE Turbulent Displace-0010\",\"ix\":10,\"v\":{\"a\":0,\"k\":0,\"ix\":10}},{\"ty\":6,\"nm\":\"ランダムシード\",\"mn\":\"ADBE Turbulent Displace-0011\",\"ix\":11,\"v\":0},{\"ty\":7,\"nm\":\"固定\",\"mn\":\"ADBE Turbulent Displace-0012\",\"ix\":12,\"v\":{\"a\":0,\"k\":3,\"ix\":12}},{\"ty\":7,\"nm\":\"レイヤーのサイズを変更\",\"mn\":\"ADBE Turbulent Displace-0013\",\"ix\":13,\"v\":{\"a\":0,\"k\":0,\"ix\":13}},{\"ty\":7,\"nm\":\"最高画質でのアンチエイリアス\",\"mn\":\"ADBE Turbulent Displace-0014\",\"ix\":14,\"v\":{\"a\":0,\"k\":1,\"ix\":14}}]}],\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[0,0]],\"o\":[[0,0],[0,0],[0,0]],\"v\":[[-9.64,2.625],[-2.74,7.978],[9.64,-7.978]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":380,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":30,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[122.18,80.552],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-1.538,-12.187],[12.187,-1.538],[1.538,12.187],[-12.187,1.538]],\"o\":[[1.538,12.187],[-12.187,1.538],[-1.538,-12.187],[12.187,-1.538]],\"v\":[[22.066,-2.785],[2.785,22.066],[-22.066,2.785],[-2.785,-22.066]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.721325324563,0.870139028512,0.51658929563,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[121.815,80.561],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 2\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":2,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[-3.034,-6.361],[6.361,-3.034],[3.035,6.361],[-6.361,3.034]],\"o\":[[3.034,6.361],[-6.361,3.034],[-3.034,-6.361],[6.361,-3.034]],\"v\":[[11.518,-5.494],[5.494,11.518],[-11.518,5.494],[-5.494,-11.518]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":380,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":30,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[19.552,37.539],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 3\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":3,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0]],\"o\":[[0,0],[0,0]],\"v\":[[49.445,103.658],[-49.445,-103.658]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":160,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[74.935,153.646],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 4\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":4,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[0,0],[-12.228,11.136],[-22.208,0.97],[0,0],[0,0],[0,0],[16.278,-14.823],[0,0],[16.1,-3.469],[0,0]],\"o\":[[0,0],[16.1,-3.469],[16.278,-14.823],[0,0],[0,0],[0,0],[-22.208,0.97],[0,0],[-12.228,11.136],[0,0],[0,0]],\"v\":[[-47.66,71.449],[-14.708,64.35],[28.341,42.157],[87.423,17.912],[90.226,17.789],[47.66,-71.449],[44.856,-71.326],[-14.225,-47.081],[-14.226,-47.081],[-57.274,-24.888],[-90.226,-17.789]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":210,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":20,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[1,1,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[119.854,76.449],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 5\",\"np\":3,\"cix\":2,\"bm\":0,\"ix\":5,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":15,\"ty\":4,\"nm\":\"Bgアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[474.297,287.043,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[125.745,125.745,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,-69.309],[69.309,0],[0,69.309],[-69.309,0]],\"o\":[[0,69.309],[-69.309,0],[0,-69.309],[69.309,0]],\"v\":[[125.495,0],[0,125.495],[-125.495,0],[0,-125.495]],\"c\":true},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"fl\",\"c\":{\"a\":0,\"k\":[0.926064285578,0.955448584463,1,1],\"ix\":4},\"o\":{\"a\":0,\"k\":100,\"ix\":5},\"r\":1,\"bm\":0,\"nm\":\"塗り 1\",\"mn\":\"ADBE Vector Graphic - Fill\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[125.745,125.745],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":16,\"ty\":4,\"nm\":\"pathアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[606.384,88.307,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[20.051,21.899,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-102.555,29.459],[0,0]],\"o\":[[0,0],[102.555,-29.459],[0,0]],\"v\":[[-130.551,176.398],[-45.439,64.152],[19.051,-20.898]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":20,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":8,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[20.051,21.898],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"tm\",\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":23.0000009368092,\"s\":[69]}],\"ix\":1},\"e\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":17.0000006924242,\"s\":[100]}],\"ix\":2},\"o\":{\"a\":0,\"k\":0,\"ix\":3},\"m\":1,\"ix\":2,\"nm\":\"パスのトリミング 1\",\"mn\":\"ADBE Vector Filter - Trim\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":17,\"ty\":4,\"nm\":\"pathアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[308.57,342.274,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[28.831,24.563,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[69.992,43.48],[0,0]],\"o\":[[0,0],[-69.992,-43.48],[0,0]],\"v\":[[164.331,-55.564],[57.938,-11.754],[-46.831,45.063]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":20,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":8,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[28.831,24.563],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"tm\",\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":23.0000009368092,\"s\":[69]}],\"ix\":1},\"e\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":17.0000006924242,\"s\":[100]}],\"ix\":2},\"o\":{\"a\":0,\"k\":0,\"ix\":3},\"m\":1,\"ix\":2,\"nm\":\"パスのトリミング 1\",\"mn\":\"ADBE Vector Filter - Trim\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0},{\"ddd\":0,\"ind\":18,\"ty\":4,\"nm\":\"pathアウトライン\",\"sr\":1,\"ks\":{\"o\":{\"a\":0,\"k\":100,\"ix\":11},\"r\":{\"a\":0,\"k\":0,\"ix\":10},\"p\":{\"a\":0,\"k\":[602.898,365.837,0],\"ix\":2,\"l\":2},\"a\":{\"a\":0,\"k\":[21.166,20.824,0],\"ix\":1,\"l\":2},\"s\":{\"a\":0,\"k\":[100,100,100],\"ix\":6,\"l\":2}},\"ao\":0,\"shapes\":[{\"ty\":\"gr\",\"it\":[{\"ind\":0,\"ty\":\"sh\",\"ix\":1,\"ks\":{\"a\":0,\"k\":{\"i\":[[0,0],[-12.881,-62.151],[0,0]],\"o\":[[0,0],[12.881,62.151],[0,0]],\"v\":[[-120.166,-71.824],[-52.279,-27.488],[49.416,33.574]],\"c\":false},\"ix\":2},\"nm\":\"パス 1\",\"mn\":\"ADBE Vector Shape - Group\",\"hd\":false},{\"ty\":\"st\",\"c\":{\"a\":0,\"k\":[0.200948393579,0.423697886747,0.944075939702,1],\"ix\":3},\"o\":{\"a\":0,\"k\":100,\"ix\":4},\"w\":{\"a\":0,\"k\":2,\"ix\":5},\"lc\":2,\"lj\":2,\"bm\":0,\"d\":[{\"n\":\"d\",\"nm\":\"線分\",\"v\":{\"a\":0,\"k\":20,\"ix\":1}},{\"n\":\"g\",\"nm\":\"間隔\",\"v\":{\"a\":0,\"k\":8,\"ix\":2}},{\"n\":\"o\",\"nm\":\"オフセット\",\"v\":{\"a\":0,\"k\":0,\"ix\":7}}],\"nm\":\"線 1\",\"mn\":\"ADBE Vector Graphic - Stroke\",\"hd\":false},{\"ty\":\"tr\",\"p\":{\"a\":0,\"k\":[21.166,20.824],\"ix\":2},\"a\":{\"a\":0,\"k\":[0,0],\"ix\":1},\"s\":{\"a\":0,\"k\":[100,100],\"ix\":3},\"r\":{\"a\":0,\"k\":0,\"ix\":6},\"o\":{\"a\":0,\"k\":100,\"ix\":7},\"sk\":{\"a\":0,\"k\":0,\"ix\":4},\"sa\":{\"a\":0,\"k\":0,\"ix\":5},\"nm\":\"トランスフォーム\"}],\"nm\":\"グループ 1\",\"np\":2,\"cix\":2,\"bm\":0,\"ix\":1,\"mn\":\"ADBE Vector Group\",\"hd\":false},{\"ty\":\"tm\",\"s\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":23.0000009368092,\"s\":[69]}],\"ix\":1},\"e\":{\"a\":1,\"k\":[{\"i\":{\"x\":[0.667],\"y\":[1]},\"o\":{\"x\":[0.333],\"y\":[0]},\"t\":0,\"s\":[0]},{\"t\":17.0000006924242,\"s\":[100]}],\"ix\":2},\"o\":{\"a\":0,\"k\":0,\"ix\":3},\"m\":1,\"ix\":2,\"nm\":\"パスのトリミング 1\",\"mn\":\"ADBE Vector Filter - Trim\",\"hd\":false}],\"ip\":0,\"op\":90.0000036657751,\"st\":0,\"bm\":0}],\"markers\":[]}" }, { "path": "src/lv1/index.ts", "content": "export * from './a11y/FocusHighlight';\nexport * from './a11y/FocusTrap';\nexport { default as VisuallyHidden } from './a11y/VisuallyHidden';\nexport { default as Balloon } from './bases/Balloon';\nexport { default as CardBase } from './bases/CardBase';\nexport { default as ColumnBase } from './bases/ColumnBase';\nexport { default as Container } from './bases/Container';\nexport { default as ContentsBase } from './bases/ContentsBase';\nexport { default as DialogBase } from './bases/DialogBase';\nexport { default as FloatingBase } from './bases/FloatingBase';\nexport { default as MarginBase } from './bases/MarginBase';\nexport * from './bases/NegativeContentsBase';\nexport { default as NegativeMarginBase } from './bases/NegativeMarginBase';\nexport { default as PopupBase } from './bases/PopupBase';\nexport { default as ScrimBase } from './bases/ScrimBase';\nexport { default as ScrollableBase } from './bases/ScrollableBase';\nexport { default as ZebraBase } from './bases/ZebraBase';\nexport { default as BackwardButton } from './buttons/BackwardButton';\nexport { default as Button } from './buttons/Button';\nexport type { ButtonAppearanceType } from './buttons/Button';\nexport { default as GlobalNaviButton } from './buttons/GlobalNaviButton';\nexport { default as IconOnlyButton } from './buttons/IconOnlyButton';\nexport { default as IconOnlyJumpButton } from './buttons/IconOnlyJumpButton';\nexport { default as IconOnlyBackwardButton } from './buttons/IconOnlyBackwardButton';\nexport { default as InlineLink } from './buttons/InlineLink';\nexport { default as JumpButton } from './buttons/JumpButton';\nexport { default as LeftIconButton } from './buttons/LeftIconButton';\nexport { default as ListButton } from './buttons/ListButton';\nexport { default as PagerButton } from './buttons/PagerButton';\nexport { default as RightIconButton } from './buttons/RightIconButton';\nexport { default as TabButton } from './buttons/TabButton';\nexport { default as TextButton } from './buttons/TextButton';\nexport { default as CalendarDate } from './calendar/CalendarDate';\nexport type { TimeRecord } from './calendar/CalendarDate';\nexport { default as CalendarHead } from './calendar/CalendarHead';\nexport type { FormHandlers, AutocompleteAttribute } from './forms/types';\nexport { default as CheckBox } from './forms/CheckBox';\nexport { default as FormControlLabel } from './forms/FormControlLabel';\nexport { default as NumeralField } from './forms/NumeralField';\nexport { default as RadioButton } from './forms/RadioButton';\nexport { default as ReadOnlyField } from './forms/ReadOnlyField';\nexport { default as SearchField } from './forms/SearchField';\nexport { default as SelectBox } from './forms/SelectBox';\nexport type { SelectBoxOption, SelectBoxOptionGroup } from './forms/SelectBox';\nexport * from './forms/OptionButton';\nexport { default as TextArea } from './forms/TextArea';\nexport { default as TextField } from './forms/TextField';\nexport type { TextFieldType, TextFieldWidth } from './forms/TextField';\nexport { default as ToggleButton } from './forms/ToggleButton';\nexport { default as GridBlock } from './grids/GridBlock';\nexport type { GridSize } from './grids/GridBlock';\nexport { default as GridWrapper } from './grids/GridWrapper';\nexport { default as Note } from './typography/Note';\nexport { default as PageTitle } from './typography/PageTitle';\nexport { default as Paragraph } from './typography/Paragraph';\nexport { default as SectionTitle } from './typography/SectionTitle';\nexport { default as SubSectionTitle } from './typography/SubSectionTitle';\nexport * from './typography/Text';\nexport { default as Avatar } from './icons/Avatar';\nexport { default as MaterialIcon } from './icons/MaterialIcon';\nexport * from './icons/RequiredIcon';\nexport { default as StatusIcon } from './icons/StatusIcon';\nexport type { StatusType } from './icons/StatusIcon';\nexport { default as AlertSwallow } from './images/AlertSwallow';\nexport { default as AppStoreBadge } from './images/AppStoreBadge';\nexport { default as CloudSkeletonIllust } from './images/CloudSkeletonIllust';\nexport { default as CloudUploadIllust } from './images/CloudUploadIllust';\nexport { default as CsvUploadIllust } from './images/CsvUploadIllust';\nexport { default as DiscoveryIllust } from './images/DiscoveryIllust';\nexport { default as FileUploadIllust } from './images/FileUploadIllust';\nexport { default as FinishTaskIllust } from './images/FinishTaskIllust';\nexport { default as GooglePlayBadge } from './images/GooglePlayBadge';\nexport { default as ImageUploadIllust } from './images/ImageUploadIllust';\nexport { default as NoDataIllust } from './images/NoDataIllust';\nexport { default as NoSearchResultsIllust } from './images/NoSearchResultsIllust';\nexport { default as NotFoundSwallow } from './images/NotFoundSwallow';\nexport { default as InlineSpinner } from './InlineSpinner';\nexport { default as SegmentControlButton } from './interactiveParts/SegmentControlButton';\nexport * from './interactiveParts/StepNumber';\nexport { default as StepBlock } from './interactiveParts/StepBlock';\nexport { default as StepBorder } from './interactiveParts/StepBorder';\nexport { default as Tab } from './interactiveParts/Tab';\nexport * from './layout/Stack';\nexport * from './layout/HStack';\nexport * from './layout/VStack';\nexport { default as WithDescriptionContent } from './layout/WithDescriptionContent';\nexport { default as WithSideContent } from './layout/WithSideContent';\nexport { default as CheckBoxCell } from './lists/CheckBoxCell';\nexport { default as BorderTableListCell } from './lists/BorderTableListCell';\nexport { default as DescriptionListCell } from './lists/DescriptionListCell';\nexport { default as DescriptionListHeadCell } from './lists/DescriptionListHeadCell';\nexport { default as TableListCell } from './lists/TableListCell';\nexport { default as TableListHead } from './lists/TableListHead';\nexport { default as TableListHeadCell } from './lists/TableListHeadCell';\nexport { default as TableListRow } from './lists/TableListRow';\nexport { default as TreeFoldingButtonCell } from './lists/TreeFoldingButtonCell';\nexport { default as Loading } from './Loading';\nexport * from './progress/ProgressBar';\nexport { default as Message } from './messages/Message';\nexport type { MessageTypes } from './messages/Message';\n" }, { "path": "src/lv1/interactiveParts/SegmentControlButton.stories.tsx", "content": "import * as React from 'react';\nimport { MdAdd, MdRemove } from 'react-icons/md';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport SegmentControlButton from './SegmentControlButton';\nimport MarginBase from '../bases/MarginBase';\n\nexport default {\n component: SegmentControlButton,\n};\n\nexport const SegmentControlButtonComponent = () => (\n
\n \n {text('Children', '通常は単体で置きません', 'SegmentControlButton')}\n \n
\n);\n\nexport const Default = () => {\n const [index, setIndex] = React.useState(1);\n\n return (\n <>\n \n setIndex(0)}>\n 申請中\n \n setIndex(1)}>\n 差し戻し\n \n setIndex(2)}>\n 承認済み\n \n \n \n );\n};\n\nexport const Small = () => {\n const [index, setIndex] = React.useState(1);\n\n return (\n
\n setIndex(0)}\n >\n 申請中\n \n setIndex(1)}\n >\n 差し戻し\n \n setIndex(2)}\n >\n 承認済み\n \n
\n );\n};\n\nexport const Large = () => {\n const [index, setIndex] = React.useState(1);\n\n return (\n
\n setIndex(0)}\n >\n 申請中\n \n setIndex(1)}\n >\n 差し戻し\n \n setIndex(2)}\n >\n 承認済み\n \n
\n );\n};\n\nexport const WithIcon = () => {\n const [index, setIndex] = React.useState(0);\n const [indexSmall, setIndexSmall] = React.useState(0);\n const [indexLarge, setIndexLarge] = React.useState(0);\n\n return (\n <>\n \n setIndex(0)}\n IconComponent={MdAdd}\n >\n ボタンテキスト\n \n setIndex(1)}\n IconComponent={MdRemove}\n >\n ボタンテキスト\n \n \n \n setIndexSmall(0)}\n IconComponent={MdAdd}\n >\n ボタンテキスト\n \n setIndexSmall(1)}\n IconComponent={MdRemove}\n >\n ボタンテキスト\n \n \n \n setIndexLarge(0)}\n IconComponent={MdAdd}\n >\n ボタンテキスト\n \n setIndexLarge(1)}\n IconComponent={MdRemove}\n >\n ボタンテキスト\n \n \n \n );\n};\n\nexport const WithHref = () => {\n return (\n
\n \n ページ1\n \n \n ページ2\n \n \n ページ3\n \n \n ページ4\n \n
\n );\n};\n" }, { "path": "src/lv1/interactiveParts/SegmentControlButton.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * 選択状態にします\n */\n current?: boolean;\n /**\n * サイズを小さくします\n */\n small?: boolean;\n /**\n * サイズを大きくします\n */\n large?: boolean;\n /**\n * 押下時に遷移させるURLを指定します。指定した場合は `` 要素、空文字列もしくはundefinedの場合は `\n );\n};\n\nexport default SegmentControlButton;\n" }, { "path": "src/lv1/interactiveParts/StepBlock.stories.tsx", "content": "import * as React from 'react';\n\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport StepBlock from './StepBlock';\n\nexport default {\n title: 'deprecated/interactiveParts/StepBlock',\n component: StepBlock,\n};\n\nexport const StepBlockComponent = () => (\n
    \n \n {text('Children', 'stepper', 'StepBlock')}\n \n
\n);\n\nexport const Default = () => {\n return (\n
    \n stepper\n \n current\n \n \n done\n \n \n disabled\n \n
\n );\n};\n\nexport const Small = () => {\n return (\n
    \n \n stepper\n \n \n current\n \n \n done\n \n \n disabled\n \n
\n );\n};\n" }, { "path": "src/lv1/interactiveParts/StepBlock.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { StepNumber } from './StepNumber';\n\ntype Props = {\n /**\n * 内部の文字列を指定します\n */\n number?: string;\n children?: React.ReactNode;\n /**\n * 見た目を current にします\n */\n current?: boolean;\n /**\n * 見た目を done にします\n */\n done?: boolean;\n /**\n * 見た目を disabled にします\n */\n disabled?: boolean;\n /**\n * サイズを小さくします\n */\n small?: boolean;\n} & MarginClassProps &\n CommonProps;\n\n/**\n * 古いコンポーネントなので使わないでください。丸囲み数字が必要な場合はStepNumberを、リストにしたい場合はStepperを使用してください\n *\n * @deprecated\n */\nconst StepBlock: React.FC = (props: Props) => {\n const {\n number,\n children,\n current,\n done,\n disabled,\n small,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n\n const stepperBaseClass = 'vb-stepBlock';\n return (\n \n \n {children && (\n {children}\n )}\n \n );\n};\n\nexport default StepBlock;\n" }, { "path": "src/lv1/interactiveParts/StepBorder.stories.tsx", "content": "import * as React from 'react';\n\nimport { boolean } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport StepBorder from './StepBorder';\n\nexport default {\n title: 'deprecated/interactiveParts/StepBorder',\n component: StepBorder,\n};\n\nexport const StepBorderComponent = () => (\n
    \n \n
\n);\n" }, { "path": "src/lv1/interactiveParts/StepBorder.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * 見た目を done にします\n */\n done?: boolean;\n /**\n * StepBlock の separator として使用します\n */\n separator?: boolean;\n} & CommonProps;\n\n/**\n * 古いコンポーネントなので使わないでください\n *\n * @deprecated\n */\nconst StepBorder: React.FC = (props: Props) => {\n const { done, separator } = props;\n const stepperBaseClass = 'vb-stepBorder';\n\n return (\n \n );\n};\n\nexport default StepBorder;\n" }, { "path": "src/lv1/interactiveParts/StepNumber.stories.tsx", "content": "import * as React from 'react';\n\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport { StepNumber } from './StepNumber';\nimport { HStack } from '../layout/HStack';\n\nexport default {\n component: StepNumber,\n};\n\nexport const StepNumberComponent = () => (\n \n);\n\nexport const Default = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport const Small = () => {\n return (\n \n \n \n \n \n \n );\n};\n" }, { "path": "src/lv1/interactiveParts/StepNumber.tsx", "content": "import * as React from 'react';\nimport { MdCheck } from 'react-icons/md';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * 数字を指定します\n */\n number: number | string;\n /**\n * 見た目を current にします\n */\n current?: boolean;\n /**\n * 見た目を done にします\n */\n done?: boolean;\n /**\n * 見た目を disabled にします\n */\n disabled?: boolean;\n /**\n * サイズを小さくします\n */\n small?: boolean;\n} & CommonProps;\n\nconst baseClassName = 'vb-stepNumber';\nexport const StepNumber: React.FC = ({\n number,\n current,\n done,\n disabled,\n small,\n ...props\n}: Props) => (\n \n \n {number ? number : '1'}\n \n {done && (\n
\n \n
\n )}\n \n);\n" }, { "path": "src/lv1/interactiveParts/Tab.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport Tab from './Tab';\n\nexport default {\n component: Tab,\n};\n\nexport const TabComponent = () => (\n \n {text('Children', 'タブテキスト', 'Tab')}\n \n);\n\nexport const Default = () => {\n const [index, setIndex] = React.useState(1);\n\n return (\n
\n setIndex(0)}>\n タブテキスト\n \n setIndex(1)}>\n タブテキスト\n \n setIndex(2)}\n notification=\"新着メッセージがあります\"\n >\n タブテキスト\n \n
\n );\n};\n\nexport const Small = () => {\n const [index, setIndex] = React.useState(1);\n\n return (\n
\n setIndex(0)}>\n タブテキスト\n \n setIndex(1)}>\n タブテキスト\n \n setIndex(2)}>\n タブテキスト\n \n
\n );\n};\n" }, { "path": "src/lv1/interactiveParts/Tab.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * 選択状態にします\n */\n current?: boolean;\n /**\n * サイズを小さくします\n */\n small?: boolean;\n selected?: boolean;\n /**\n * click ハンドラを設定します\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * blur ハンドラを設定します\n */\n onBlur?: (event: React.FormEvent) => void;\n /**\n * 通知の有無および読み上げられるメッセージを設定します\n */\n notification?: string;\n} & MarginClassProps &\n CommonProps;\n\n/**\n * タブひとつひとつを表現するコンポーネントです。単体で使用せず、`lv2/TabBar` を使用してください\n */\nconst Tab: React.FC = (props: Props) => {\n const {\n children,\n current,\n small,\n selected,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n onClick,\n onBlur,\n notification,\n } = props;\n\n const buttonBaseClass = 'vb-tab';\n const classModifier = {\n current,\n small,\n selected,\n };\n\n return (\n
\n \n {children}\n \n\n {notification && (\n \n )}\n
\n );\n};\n\nexport default Tab;\n" }, { "path": "src/lv1/layout/HStack.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { HStack } from './HStack';\nimport Paragraph from '../typography/Paragraph';\nimport Button from '../buttons/Button';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: HStack,\n};\n\nexport const HStackComponent = () => (\n \n Stackを使うと、コンポーネントを等間隔に並べられます\n \n \n \n);\n" }, { "path": "src/lv1/layout/HStack.tsx", "content": "import * as React from 'react';\nimport { Stack } from './Stack';\n\ntype StackProps = React.ComponentProps;\ntype Props = {\n /**\n * 横方向の揃え方を指定します。\n */\n justifyContent?: StackProps['justifyContent'];\n /**\n * 縦方向の揃え方を指定します\n */\n alignItems?: StackProps['alignItems'];\n} & Omit;\n\n/**\n * 横方向（水平方向）に等間隔でコンポーネントを並べます。\n *\n * - `direction` が固定である以外は `Stack` と同一です\n * - 縦方向（垂直方向）に等間隔でコンポーネントを並べるには、 `VStack` を使用してください\n */\nexport const HStack: React.FC = (props) => (\n \n);\n" }, { "path": "src/lv1/layout/Stack.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { Stack } from './Stack';\nimport Paragraph from '../typography/Paragraph';\nimport Button from '../buttons/Button';\nimport { boolean, select } from '@storybook/addon-knobs';\nimport SearchField from '../forms/SearchField';\nimport ContentsBase from '../bases/ContentsBase';\nimport ColumnBase from '../bases/ColumnBase';\nimport { Text } from '../typography/Text';\n\nexport default {\n component: Stack,\n};\n\nexport const StackComponent = () => (\n \n Stackを使うと、コンポーネントを等間隔に並べられます\n \n \n \n);\n\nexport const Toolbar = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport const Messages = () => (\n \n \n \n \n freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型経営プラットフォームを開発・提供し、\n
\n だれもが自由に自然体で経営できる環境をつくっていきます。\n \n \n 起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事業や中小企業などのスモールビジネスに携わるすべての人が、\n
\n じぶんらしく自信をもって経営できるように。\n \n \n 大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今までにない多様な価値観や生き方、\n
\n 新しいイノベーションを生み出す起爆剤だと私たちは考えています。スモールビジネスが大企業を刺激し、\n
\n 社会をさらにオモシロク、世の中全体をより良くする流れを後押ししていきます。\n \n \n \n \n);\n\nexport const Direction = () => (\n \n \n direction=vertical 1\n direction=vertical 2\n direction=vertical 3\n \n \n direction=horizontal 1\n direction=horizontal 2\n direction=horizontal 3\n \n \n direction=vertical-reverse 1\n direction=vertical-reverse 2\n direction=vertical-reverse 3\n \n \n direction=horizontal-reverse 1\n direction=horizontal-reverse 2\n direction=horizontal-reverse 3\n \n \n);\n\nexport const JustifyContent = () => (\n \n \n justifyContent=start 1\n justifyContent=start 2\n justifyContent=start 3\n \n \n justifyContent=end 1\n justifyContent=end 2\n justifyContent=end 3\n \n \n justifyContent=center 1\n justifyContent=center 2\n justifyContent=center 3\n \n \n justifyContent=space-between 1\n justifyContent=space-between 2\n justifyContent=space-between 3\n \n \n);\n\nexport const AlignItems = () => (\n \n \n \n alignItems=start 1\n \n \n alignItems=start 2\n \n \n alignItems=start 3\n \n \n \n \n alignItems=center 1\n \n \n alignItems=center 2\n \n \n alignItems=center 3\n \n \n \n \n alignItems=end 1\n \n \n alignItems=end 2\n \n \n alignItems=end 3\n \n \n \n \n alignItems=stretch 1\n \n \n alignItems=stretch 2\n \n \n alignItems=stretch 3\n \n \n \n);\n\nexport const Gap = () => (\n \n \n \n gap=3 1\n \n \n gap=3 2\n \n \n gap=3 3\n \n \n \n \n gap=3 1\n \n \n gap=3 2\n \n \n gap=3 3\n \n \n \n \n gap=1 1\n \n \n gap=1 2\n \n \n gap=1 3\n \n \n \n \n gap=0.5 1\n \n \n gap=0.5 2\n \n \n gap=0.5 3\n \n \n \n \n gap=0.25 1\n \n \n gap=0.25 2\n \n \n gap=0.25 3\n \n \n \n \n gap=0 1\n \n \n gap=0 2\n \n \n gap=0 3\n \n \n \n);\n\nexport const Wrap = () => (\n \n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n wrap\n \n \n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n nowrap\n \n \n \n);\n\nexport const Inline = () => (\n <>\n \n \n \n \n \n inline={'{true}'}にすると、inline-flexになります\n \n \n);\n" }, { "path": "src/lv1/layout/Stack.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { convertClassModifiers } from '../../utilities/vbClassNames';\n\ntype Props = {\n /**\n * 子要素を並べる順番を指定します。\n * `vertical`で垂直方向、`horizontal`で水平方向、`vertical-reverse` `horizontal-reverse` で逆方向になります。\n * デフォルトは `vertical` です。\n */\n direction?:\n | 'vertical'\n | 'horizontal'\n | 'vertical-reverse'\n | 'horizontal-reverse';\n /**\n * オブジェクトの並ぶ間隔を rem 単位で指定します。\n * `0` `0.25` `0.5` `1` `1.5` `2` `3` が指定できます。\n */\n gap?: 0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 3;\n /**\n * `direction` に指定した軸での子要素の並び方を指定します。\n */\n justifyContent?: 'start' | 'end' | 'center' | 'space-between';\n /**\n * `direction` の交差軸上での子要素の並び方を指定します。\n */\n alignItems?: 'stretch' | 'center' | 'start' | 'end';\n /**\n * 折り返しを指定します\n */\n wrap?: 'nowrap' | 'wrap';\n /**\n * `true` にすると、 `display: inline-flex` となり、インライン表示の要素と並べられます。\n */\n inline?: boolean;\n children?: React.ReactNode;\n} & CommonProps;\n\n/**\n * 子要素を等間隔に並べるためのコンポーネントです。\n */\nexport const Stack: React.FC = ({\n direction = 'vertical',\n gap = 1,\n justifyContent = 'start',\n alignItems = direction === 'vertical' || direction === 'vertical-reverse'\n ? 'start'\n : 'center',\n wrap = 'wrap',\n inline,\n children,\n ...props\n}: Props) => {\n const Tag = inline ? 'span' : 'div';\n return (\n \n {children}\n \n );\n};\n" }, { "path": "src/lv1/layout/VStack.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { VStack } from './VStack';\nimport Paragraph from '../typography/Paragraph';\nimport Button from '../buttons/Button';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: VStack,\n};\n\nexport const VStackComponent = () => (\n \n Stackを使うと、コンポーネントを等間隔に並べられます\n \n \n \n);\n" }, { "path": "src/lv1/layout/VStack.tsx", "content": "import * as React from 'react';\nimport { Stack } from './Stack';\n\ntype StackProps = React.ComponentProps;\ntype Props = {\n /**\n * 縦方向の揃え方を指定します。\n */\n justifyContent?: StackProps['justifyContent'];\n /**\n * 横方向の揃え方を指定します\n */\n alignItems?: StackProps['alignItems'];\n} & Omit;\n\n/**\n * 縦方向（垂直方向）に等間隔でコンポーネントを並べます。\n *\n * - `direction` が固定である以外は `Stack` と同一です\n * - 横方向（水平方向）に等間隔でコンポーネントを並べるには、 `HStack` を使用してください\n */\nexport const VStack: React.FC = (props) => (\n \n);\n" }, { "path": "src/lv1/layout/WithDescriptionContent.stories.tsx", "content": "import * as React from 'react';\n\nimport WithDescriptionContent from './WithDescriptionContent';\nimport { commonKnobs } from '../../../stories';\nimport TextField from '../forms/TextField';\nimport Note from '../typography/Note';\nimport Paragraph from '../typography/Paragraph';\n\nimport { select } from '@storybook/addon-knobs';\nimport { InlineLink } from '..';\nexport default {\n component: WithDescriptionContent,\n};\nexport const WithDescriptionContentComponent = () => (\n (\n \n )}\n renderDescriptionContent={() => (\n 8文字以上20文字以内で入力してください\n )}\n {...commonKnobs()}\n />\n);\n\nexport const WithMargin = () => {\n return (\n <>\n \n 実際の使用時はマージンを0.5rem程度のmarginをつけて、いい感じに調整してください\n \n\n (\n \n )}\n renderDescriptionContent={() => (\n ml=0.5をNoteにつけている例\n )}\n mb={1.5}\n />\n\n (\n \n )}\n renderDescriptionContent={() => (\n mt=0.5をNoteにつけている例\n )}\n mb={1.5}\n />\n\n (\n \n )}\n renderDescriptionContent={() => (\n mb=0.5をNoteにつけている例\n )}\n mb={1.5}\n />\n \n );\n};\n\nexport const DescriptionWithLink = () => (\n (\n \n 注釈内に\n \n こんなふうにリンク等がある\n \n 場合、フォーカス順はrenderContent内の要素より先になります\n \n )}\n renderContent={(descId) => (\n \n )}\n />\n);\n\nexport const InsideLargeWidth = () => (\n
\n (\n \n )}\n renderDescriptionContent={() => (\n \n 横幅が大きい場所に入れたときに表示崩れが起きないことを確認するためのstoryです\n \n )}\n />\n
\n);\n" }, { "path": "src/lv1/layout/WithDescriptionContent.tsx", "content": "import * as React from 'react';\nimport useUniqueId from '../../hooks/useUniqueId';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * 注釈をつける対象となるコンポーネント。`descriptionContentId` を引数に取るため、 `aria-describedby` で紐付けて使用できます\n */\n renderContent: (descriptionContentId: string) => React.ReactNode;\n /**\n * 注釈の内容。文字サイズやマージン等は指定されていないため、`` などを使用してください\n */\n renderDescriptionContent: () => React.ReactNode;\n /**\n * `horizontal` で右に、`vertical` で下に注釈をつけます。\n */\n position?: 'horizontal' | 'vertical' | 'vertical-reverse';\n} & CommonProps;\n\n/**\n * 注釈をコンポーネントの右または下に置くためのコンポーネントです。\n * DOM上での並び順は見た目とは違い、注釈→対象のコンポーネントとなるため、CSSがあたっていない状態のユーザーに先に注釈を見せることができます。\n *\n * - `renderContent` は `renderDescriptionContent` が配置される要素のidを引数に取るため、 `aria-describedby` で紐付けることができます。\n * - `renderDescriptionContent` には `Note` コンポーネントを配置する想定です。\n * - `WithDescriptionContent` では注釈と対象のあいだのマージンは用意していないので、注釈と対象のどちらかに `0.5rem` 程度のマージンをつけて調整してください。\n * - ラベル（項目名）の配置には `FormControl` 等を使用してください\n * - `horizontal` `vertical` では、**DOM上の要素の順序と見た目上の順序が逆順になる** ことに注意が必要です\n - 「`renderContent` 内の入力フィールド等の状態によって `renderDescriptionContent` が変化する」ような使い方をしないでください\n * - リンク等を `renderDescriptionContent` に入れた場合、 `renderContent` 内の要素よりも先にフォーカスが移動します\n */\nconst WithDescriptionContent: React.FC = (props: Props) => {\n const baseClassName = 'vb-withDescriptionContent';\n const uniqueId = useUniqueId(baseClassName);\n const descriptionContentId = `${uniqueId}__descriptionContent`;\n const { renderContent, renderDescriptionContent, position } = props;\n\n return (\n \n \n {renderDescriptionContent()}\n
\n
\n {renderContent(descriptionContentId)}\n
\n
\n );\n};\nexport default WithDescriptionContent;\n" }, { "path": "src/lv1/layout/WithSideContent.stories.tsx", "content": "import * as React from 'react';\n\nimport WithSideContent from './WithSideContent';\nimport Button from '../buttons/Button';\nimport { commonKnobs } from '../../../stories';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: WithSideContent,\n};\n\nexport const WithSideContentComponent = () => (\n サブボタン}\n >\n \n \n \n);\n\nexport const SideContentOnly = () => (\n // childrenなしでも使っていいのよアピール\n サブボタン}\n />\n);\n\nexport const TextAndButton = () => (\n サブボタン}\n >\n 左にテキスト、右にボタンなんていうパターンのときは verticalAlign=middle\n がいい感じ\n \n);\n" }, { "path": "src/lv1/layout/WithSideContent.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * メインコンテンツ（左側）\n */\n children?: React.ReactNode;\n /**\n * サイドコンテンツ（右側）\n */\n sideContent: React.ReactNode;\n /**\n * 左右で高さが違う場合の揃え方\n */\n verticalAlign?: 'top' | 'bottom' | 'middle';\n} & CommonProps;\n\n/**\n * 関連機能のボタン等を右側に配置するために使用するコンポーネントです\n *\n * - 左右にボタン等を振り分けて配置するときのほか、右にボタンだけ置きたいというときにも使用できます\n */\nconst WithSideContent: React.FC = (props: Props) => {\n const { children, sideContent, verticalAlign } = props;\n const baseClassName = 'vb-withSideContent';\n return (\n \n
{children}
\n
{sideContent}
\n
\n );\n};\nexport default WithSideContent;\n" }, { "path": "src/lv1/lists/BorderTableListCell.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, text, select, number } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport BorderTableListCell from './BorderTableListCell';\n\nexport default {\n component: BorderTableListCell,\n};\n\nexport const BorderTableListCellComponent = () => (\n \n \n \n \n {text('Children', 'テーブルセル', 'BorderTableListCell')}\n \n \n \n
\n);\n" }, { "path": "src/lv1/lists/BorderTableListCell.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { Keys } from '../../utilities/keyboard';\nimport vbClassNames from '../../utilities/vbClassNames';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * セルを小さくします\n */\n small?: boolean;\n /**\n * 中央寄せにします\n */\n alignCenter?: boolean;\n /**\n * 右寄せにします\n */\n alignRight?: boolean;\n /**\n * なるべく単語の切れ目で改行するようにします(`word-break: break-word`)。メールアドレスや金額のカラムで指定してください。\n */\n breakWord?: boolean;\n /**\n * 折り返さない(`white-space: nowrap`)\n */\n noWrap?: boolean;\n /**\n * クリックハンドラを設定します\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick?: () => any;\n /**\n * ステータスを設定します\n */\n status?: 'alert' | 'notice' | 'success';\n /**\n * 行の見出しかどうかを設定します\n */\n rowHeader?: boolean;\n /**\n * 横スクロール時に行の見出しとして固定表示するどうかを設定します\n */\n fixedRowHeader?: boolean;\n /**\n * 固定表示する行の見出しが複数になる場合の left の値を設定します\n */\n fixedRowHeaderLeft?: number;\n /**\n * rowSpanを設定します\n */\n rowSpan?: number;\n} & CommonProps;\n\nconst BorderTableListCell: React.FC = (props: Props) => {\n const {\n children,\n small,\n alignCenter,\n alignRight,\n breakWord,\n noWrap,\n rowSpan,\n onClick,\n status,\n rowHeader,\n fixedRowHeader,\n fixedRowHeaderLeft,\n } = props;\n const baseClass = 'vb-BorderTableListCell';\n const statusBaseClass = `${baseClass}__status`;\n const classModifier = {\n small,\n alignCenter,\n alignRight,\n clickable: !!onClick,\n breakWord,\n noWrap,\n };\n\n const statusClass = vbClassNames(statusBaseClass, {\n modifier: {\n alert: status === 'alert',\n notice: status === 'notice',\n success: status === 'success',\n },\n });\n\n const content = (\n <>\n {onClick ? (\n onClick()}\n onKeyDown={(e): void => {\n if (e.key === Keys.SPACE || e.key === Keys.ENTER) {\n e.preventDefault();\n onClick();\n }\n }}\n tabIndex={0}\n >\n {children}\n \n ) : (\n children\n )}\n {status &&
}\n \n );\n\n if (rowHeader) {\n const cp = {\n ...commonProps(props, baseClass, {\n ...classModifier,\n rowHeader,\n fixedRowHeader,\n }),\n };\n return (\n \n {content}\n \n );\n }\n\n return (\n \n {content}\n \n );\n};\n\nexport default BorderTableListCell;\n" }, { "path": "src/lv1/lists/CheckBoxCell.stories.tsx", "content": "import * as React from 'react';\n\nimport CheckBoxCell from './CheckBoxCell';\nimport { text, boolean } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: CheckBoxCell,\n};\n\nexport const CheckBoxCellComponent = () => (\n \n);\n" }, { "path": "src/lv1/lists/CheckBoxCell.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n header: boolean;\n name?: string;\n value?: string;\n checked?: boolean;\n 'aria-label'?: string;\n disabled?: boolean;\n onChange?: React.ChangeEventHandler;\n} & CommonProps;\n\nconst CheckBoxCell: React.FC = (props: Props) => {\n const { header, name, value, checked, onChange, disabled } = props;\n const baseClassName = 'vb-checkBoxCell';\n\n /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n /* eslint-disable jsx-a11y/click-events-have-key-events */\n const input = (\n e.stopPropagation()}\n >\n \n \n );\n const cellProps = commonProps(props, baseClassName, { header });\n return header ? (\n {input}\n ) : (\n {input}\n );\n};\nexport default CheckBoxCell;\n" }, { "path": "src/lv1/lists/DescriptionListCell.stories.tsx", "content": "import * as React from 'react';\n\nimport { text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport DescriptionListCell from './DescriptionListCell';\n\nexport default {\n component: DescriptionListCell,\n};\n\nexport const DescriptionListCellComponent = () => (\n \n \n \n \n {text('Children', 'テーブルセル', 'DescriptionListCell')}\n \n \n \n
\n);\n" }, { "path": "src/lv1/lists/DescriptionListCell.tsx", "content": "import * as React from 'react';\nimport { useResponsive } from '../../utilities/VibesProvider';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n children?: React.ReactNode;\n} & CommonProps;\n\nconst DescriptionListCell: React.FC = (props: Props) => {\n const { children } = props;\n const listBaseClass = 'vb-descriptionListCell';\n\n return (\n \n {children}\n \n );\n};\n\nexport default DescriptionListCell;\n" }, { "path": "src/lv1/lists/DescriptionListHeadCell.stories.tsx", "content": "import * as React from 'react';\n\nimport { text, select } from '@storybook/addon-knobs';\nimport DescriptionListHeadCell from './DescriptionListHeadCell';\n\nexport default {\n component: DescriptionListHeadCell,\n};\n\nexport const DescriptionListHeadCellComponent = () => (\n \n \n \n \n {text('Children', 'テーブルセル', 'DescriptionListHeadCell')}\n \n \n \n
\n);\n" }, { "path": "src/lv1/lists/DescriptionListHeadCell.tsx", "content": "import * as React from 'react';\nimport { useResponsive } from '../../utilities/VibesProvider';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * 最小の幅を設定します\n */\n minWidth?: number;\n /**\n * リストの高さを設定します\n */\n spacing?: 'normal' | 'compact';\n} & CommonProps;\n\nconst DescriptionListHeadCell: React.FC = (props: Props) => {\n const { children, minWidth, spacing } = props;\n // DescriptionList は横型のテーブルに限られるのでヘッダが対応するスコープは行単位\n const baseClassName = 'vb-descriptionListHeadCell';\n\n const classModifier = {\n spacingCompact: spacing === 'compact',\n responsive: useResponsive(),\n };\n\n const cp = commonProps(props, baseClassName, classModifier);\n return (\n \n {children}\n \n );\n};\n\nexport default DescriptionListHeadCell;\n" }, { "path": "src/lv1/lists/TableListCell.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, number, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TableListCell from './TableListCell';\nimport JumpButton from '../buttons/JumpButton';\nimport TextField from '../forms/TextField';\nimport Button from '../buttons/Button';\nimport CheckBox from '../forms/CheckBox';\nimport MessageIcon from '../../lv2/messageIcon/MessageIcon';\nimport WithBalloon from '../../lv2/withBalloon/WithBalloon';\n\nexport default {\n component: TableListCell,\n};\n\ntype WrapperProps = { children: React.ReactNode; style?: React.CSSProperties };\nconst Wrapper: React.FC = ({ children, style }: WrapperProps) => (\n \n \n {children}\n \n
\n);\n\nexport const TableListCellComponent = () => (\n \n \n {text('Children', 'テーブルセル', 'TableListCell')}\n \n \n);\n\nexport const WithUrlAndClickables = () => (\n \n \n <>\n テキスト span\n リンク\n \n \n チェックボックス\n MessageIcon\n 'WithBalloon'}\n />\n \n \n \n);\n\nexport const VerticalAlign = () => (\n \n 上寄せのカラム\n 下寄せのカラム\n \n 複数行のカラム\n
\n 複数行のカラム\n
\n 複数行のカラム\n
\n 複数行のカラム\n
\n 複数行のカラム\n
\n \n \n);\n\nexport const WithTruncatedText = () => (\n \n \n \n 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト\n 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト\n 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト\n
\n \n 隣のカラム\n \n);\n" }, { "path": "src/lv1/lists/TableListCell.tsx", "content": "import * as React from 'react';\nimport useUniqueId from '../../hooks/useUniqueId';\nimport selfWindowNavigator, {\n SelfWindowNavigationProp,\n} from '../../utilities/selfWindowNavigator';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport vbClassNames from '../../utilities/vbClassNames';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * hrefを設定します\n */\n url?: string;\n /**\n * セルを小さくします\n */\n small?: boolean;\n /**\n * 下寄せにします\n */\n alignBottom?: boolean;\n /**\n * 中央寄せにします\n */\n alignCenter?: boolean;\n /**\n * 右寄せにします\n */\n alignRight?: boolean;\n /**\n * 上寄せにします\n */\n alignTop?: boolean;\n /**\n * なるべく単語の切れ目で改行するようにします(`word-break: break-word`)。メールアドレスや金額のカラムで指定してください。\n */\n breakWord?: boolean;\n /**\n * colSpanを設定します\n */\n colSpan?: number;\n /**\n * ツリー状の表現のためのインデントレベルです。左端のカラムにのみ使われる想定です\n */\n indentLevel?: number;\n} & SelfWindowNavigationProp &\n CommonProps;\n\nconst TableListCell: React.FC = (props: Props) => {\n const {\n children,\n url,\n small,\n alignBottom,\n alignCenter,\n alignRight,\n alignTop,\n breakWord,\n colSpan,\n indentLevel,\n onSelfWindowNavigation,\n } = props;\n\n const listBaseClass = 'vb-tableListCell';\n const classModifier = {\n small,\n breakWord,\n alignBottom,\n alignCenter,\n alignRight,\n alignTop,\n };\n const uniqueId = useUniqueId('vb-tabeListcell');\n const textNodeId = `${uniqueId}__text`;\n\n return (\n \n {/* IEのみdisplay:tableで表示するため、indentContainerWrapperが必要 */}\n \n \n {!!indentLevel &&\n Array(indentLevel)\n .fill(null)\n .map((_, i) => (\n \n  \n \n ))}\n \n {!!url && (\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n {\n const navigator = selfWindowNavigator(onSelfWindowNavigation);\n if (navigator) {\n navigator(e, url);\n }\n }}\n />\n )}\n \n {children}\n \n \n \n \n \n );\n};\n\nexport default TableListCell;\n" }, { "path": "src/lv1/lists/TableListHead.stories.tsx", "content": "import * as React from 'react';\n\nimport TableListHead from './TableListHead';\nimport { boolean, number } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TableListHeadCell from './TableListHeadCell';\n\nexport default {\n component: TableListHead,\n};\n\nexport const TableListHeadComponent = () => (\n \n \n \n テーブルセル1\n テーブルセル2\n テーブルセル3\n \n \n
\n);\n" }, { "path": "src/lv1/lists/TableListHead.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * ページ上部または、 `overflow: auto` な領域内にある場合にはその領域上部に貼り付く形でヘッダーを表示します\n */\n fixedHeader?: boolean;\n /**\n * `fixedHeader` 使用時にその上下方向の位置を調整します\n * numberで指定するとpx単位、stringで指定するとCSSの値を指定できます\n */\n fixedHeaderOffset?: number | string;\n} & CommonProps;\n\nconst TableListHead: React.FC = (props: Props) => {\n const { children, fixedHeader, fixedHeaderOffset } = props;\n\n return (\n <>\n \n {children}\n \n \n );\n};\n\nexport default TableListHead;\n" }, { "path": "src/lv1/lists/TableListHeadCell.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, number, select, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TableListHeadCell from './TableListHeadCell';\n\nexport default {\n component: TableListHeadCell,\n};\n\nexport const TableListHeadCellComponent = () => (\n \n \n \n \n {text('Children', 'テーブルセル', 'TableListHeadCell')}\n \n \n \n
\n);\n" }, { "path": "src/lv1/lists/TableListHeadCell.tsx", "content": "import * as React from 'react';\nimport { MdArrowUpward, MdArrowDownward, MdSwapVert } from 'react-icons/md';\nimport { Keys } from '../../utilities/keyboard';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\nexport type Order = 'asc' | 'desc' | 'init';\ntype Props = {\n children?: React.ReactNode;\n /**\n * 中央寄せにします\n */\n alignCenter?: boolean;\n /**\n * 右寄せにします\n */\n alignRight?: boolean;\n /**\n * ソートアイコンを設定します\n */\n ordering?: Order;\n /**\n * クリックハンドラを設定します\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick?: () => any;\n /**\n * 幅を設定します\n */\n width?: number;\n /**\n * 最小の幅を設定します\n */\n minWidth?: number;\n /**\n * 最大の幅を設定します\n */\n maxWidth?: number;\n /**\n * 折り返さない(`white-space: nowrap`)\n */\n noWrap?: boolean;\n /**\n * 行の見出しかどうかを設定します\n */\n rowHeader?: boolean;\n /**\n * 横スクロール時に行の見出しとして固定表示するどうかを設定します\n */\n fixedRowHeader?: boolean;\n /**\n * 固定表示する行の見出しが複数になる場合の left の値を設定します\n */\n fixedRowHeaderLeft?: number;\n} & CommonProps;\n\nconst TableListHeadCell: React.FC = (props: Props) => {\n const {\n children,\n alignCenter,\n alignRight,\n ordering,\n onClick,\n width,\n minWidth,\n maxWidth,\n noWrap,\n rowHeader,\n fixedRowHeader,\n fixedRowHeaderLeft,\n } = props;\n const orderInit = ordering === 'init';\n const orderAscending = ordering === 'asc';\n const orderDescending = ordering === 'desc';\n\n const listBaseClass = 'vb-tableListHeadCell';\n const content = (\n <>\n {children}\n {orderAscending ? (\n \n \n \n ) : orderDescending ? (\n \n \n \n ) : orderInit ? (\n \n \n \n ) : (\n ''\n )}\n \n );\n\n const cp = commonProps(props, listBaseClass, {\n alignCenter,\n alignRight,\n orderAscending,\n orderDescending,\n clickable: !!onClick,\n noWrap,\n rowHeader,\n fixedRowHeader: rowHeader && fixedRowHeader, // rowHeader が true の時のみ有効化する\n });\n return (\n \n {onClick ? (\n onClick()}\n onKeyDown={(e): void => {\n if (e.key === Keys.SPACE || e.key === Keys.ENTER) {\n e.preventDefault();\n onClick();\n }\n }}\n tabIndex={0}\n >\n {content}\n \n ) : (\n content\n )}\n \n );\n};\n\nexport default TableListHeadCell;\n" }, { "path": "src/lv1/lists/TableListRow.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TableListCell from './TableListCell';\nimport TableListRow from './TableListRow';\n\nexport default {\n component: TableListRow,\n};\n\nexport const TableListRowComponent = () => {\n return (\n \n \n \n テーブルセル1\n テーブルセル2\n テーブルセル3\n \n \n
\n );\n};\n" }, { "path": "src/lv1/lists/TableListRow.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { KeyCodes } from '../../utilities/keyboard';\nimport selfWindowNavigator, {\n SelfWindowNavigationProp,\n} from '../../utilities/selfWindowNavigator';\nimport {\n TableRowAriaProps,\n filterTableRowAriaProps,\n} from '../../utilities/AriaProps';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * hrefを設定します\n */\n url?: string;\n /**\n * クリックハンドラを設定します\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick?: () => any;\n} & CommonProps &\n SelfWindowNavigationProp &\n TableRowAriaProps;\n\nconst TableListRow: React.ForwardRefRenderFunction<\n HTMLTableRowElement,\n Props\n> = (props: Props, ref: React.Ref) => {\n const { children, onClick, url, onSelfWindowNavigation } = props;\n\n const baseClassName = 'vb-tableListRow';\n const classModifier = {\n clickable: !!onClick || !!url,\n };\n\n return onClick || url ? (\n {\n if (e.target !== e.currentTarget) {\n return;\n }\n if (e.keyCode === KeyCodes.ENTER) {\n e.preventDefault();\n if (url) {\n const a = document.createElement('a');\n a.setAttribute('href', url);\n const event = new MouseEvent('click', {\n ctrlKey: e.ctrlKey,\n shiftKey: e.shiftKey,\n metaKey: e.metaKey,\n altKey: e.altKey,\n cancelable: true,\n });\n const navigator = selfWindowNavigator(onSelfWindowNavigation);\n if (navigator) {\n a.addEventListener('click', (e) => navigator(e, url));\n }\n a.dispatchEvent(event);\n }\n if (onClick) {\n onClick();\n }\n }\n }}\n {...commonProps(props, baseClassName, classModifier)}\n {...filterTableRowAriaProps(props)}\n /* FIXME: role的にはクリック可能であることが伝わらないが、roleを変えるとテーブルとしての読み上げが上手くいかないおそれがある */\n >\n {children}\n \n ) : (\n \n {children}\n \n );\n};\n\nexport default React.forwardRef(TableListRow);\n" }, { "path": "src/lv1/lists/TreeFoldingButtonCell.stories.tsx", "content": "import * as React from 'react';\n\nimport TreeFoldingButtonCell from './TreeFoldingButtonCell';\nimport { boolean } from '@storybook/addon-knobs';\nimport { action } from '@storybook/addon-actions';\n\nexport default {\n component: TreeFoldingButtonCell,\n};\n\nexport const TreeFoldingButtonCellComponent = () => (\n \n \n \n \n \n \n
\n);\n" }, { "path": "src/lv1/lists/TreeFoldingButtonCell.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MdExpandMore, MdChevronRight } from 'react-icons/md';\n\ntype Props = {\n folded: boolean;\n onToggleFolded: (folded: boolean) => void;\n} & CommonProps;\n\nconst TreeFoldingButtonCell: React.FC = (props: Props) => {\n const { folded, onToggleFolded } = props;\n const className = 'vb-treeFoldingButtonCell';\n return (\n \n {\n onToggleFolded(!folded);\n\n e.stopPropagation();\n }}\n >\n {folded ? (\n \n ) : (\n \n )}\n \n \n );\n};\n\nexport default TreeFoldingButtonCell;\n" }, { "path": "src/lv1/messages/Message.stories.tsx", "content": "import * as React from 'react';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport ZebraBase from '../bases/ZebraBase';\nimport Message from './Message';\n\nexport default {\n component: Message,\n};\n\nexport const MessageComponent = () => (\n \n {text('Children', 'メッセージメッセージメッセージ', 'Message')}\n \n);\n\nexport const Samples = () => (\n <>\n \n \n 情報メッセージ情報メッセージ情報メッセージ\n \n \n \n \n あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。\n \n \n \n \n \n メンテナンスのお知らせ\n
\n 2019年1月1日 0:00から2019年12月31日 23:59\n のあいだ、メンテナンスのため会計フリーをお使いいただけませんのでご注意ください。\n \n \n \n\n \n \n エラーメッセージ\n \n \n 警告メッセージ\n \n \n 成功メッセージ\n \n \n \n);\n" }, { "path": "src/lv1/messages/Message.tsx", "content": "import * as React from 'react';\nimport { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n// lv1を参照しちゃうけど許して\n// TODO: Messageコンポーネントをlv2に移動\nimport MaterialIcon from '../icons/MaterialIcon';\n\nexport type MessageTypes = {\n /**\n * error アイコンを表示します\n */\n error?: boolean;\n /**\n * notice アイコンを表示します\n */\n notice?: boolean;\n /**\n * success アイコンを表示します\n */\n success?: boolean;\n /**\n * info アイコンを表示します\n */\n info?: boolean;\n};\n\ntype Props = {\n children?: React.ReactNode;\n} & MessageTypes &\n MarginClassProps &\n CommonProps;\n\nexport default function Message(props: Props): React.ReactElement {\n const {\n children,\n error,\n notice,\n success,\n info,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n return (\n \n \n {error ? (\n \n ) : notice ? (\n \n ) : success ? (\n \n ) : (\n \n )}\n \n {children}\n \n );\n}\n" }, { "path": "src/lv1/progress/ProgressBar.stories.tsx", "content": "import * as React from 'react';\nimport { ProgressBar } from './ProgressBar';\nimport { Button } from '../../';\n\nexport default {\n component: ProgressBar,\n};\nexport const ProgressBarComponent = ({\n value = 30,\n maxValue = 100,\n indeterminate = false,\n width = 'default',\n ariaLabel = '××の進捗',\n ariaLabelledby = undefined,\n ...args\n}: React.ComponentProps) => (\n \n);\n\nexport const IndeterminateProgressBar = (\n args: React.ComponentProps\n) => ;\n\nexport const AutoIncreaseSample = ({\n width = 'default',\n ...args\n}: React.ComponentProps) => {\n const [progress, setProgress] = React.useState(0);\n const [intervalId, setIntervalId] = React.useState(null);\n\n const start = () => {\n if (intervalId) {\n return;\n }\n setIntervalId(\n window.setInterval(() => {\n setProgress((progress) => (progress >= 100 ? 0 : progress + 1));\n }, 50)\n );\n };\n\n const stop = () => {\n intervalId && window.clearInterval(intervalId);\n setIntervalId(null);\n };\n\n return (\n <>\n \n {\n if (intervalId) {\n stop();\n } else {\n start();\n }\n }}\n >\n {intervalId ? 'stop' : 'start'}\n \n {\n setProgress(0);\n stop();\n }}\n >\n reset\n \n \n );\n};\n" }, { "path": "src/lv1/progress/ProgressBar.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * 進捗を数値化できる場合にその数値を渡します\n */\n value?: number;\n /**\n * `value` の最大値です。指定しない場合 `100` となります\n */\n maxValue?: number;\n /**\n * 進捗を数値化できない場合に `true` にすると、ループするアニメーションを表示します\n */\n indeterminate?: boolean;\n /**\n * `default` 時に横幅11rem、`full` の場合 `100%` となります\n */\n width?: 'default' | 'full' | 'large' | 'small' | 'xSmall';\n /**\n * ProgressBarのラベルとして `aria-label` を指定します。\n * WAI-ARIAの`progressbar` roleでアクセシブルな名前が要求されるため、 `ariaLabel` または `ariaLabelledby` を指定してください。\n */\n ariaLabel?: string;\n /**\n * ProgressBarのラベルとして `aria-labelledby` を指定します。\n * WAI-ARIAの`progressbar` roleでアクセシブルな名前が要求されるため、 `ariaLabel` または `ariaLabelledby` を指定してください。\n */\n ariaLabelledby?: string;\n} & CommonProps;\n\n/**\n * インポートや外部サービス連携など、時間のかかる処理の進捗表示に使用するプログレスバーです。\n *\n * - 進捗を数値化できる場合は `value` `maxValue` を使用し、ユーザーがあとどれくらい待てば良いのか予測できるようにしてください\n * - 進捗を数値化できない場合は `indeterminate` を使用してください。こちらの使用は可能なかぎり避け、なるべく数値化できるようにしてください\n * - OSのアクセシビリティ設定等で「視差効果を減らす」「動きを減らす」設定を有効化している場合、 `indeterminate` 時にはアニメーションしません\n *\n */\nexport const ProgressBar: React.FC = ({\n value,\n maxValue = 100,\n indeterminate = false,\n width = 'default',\n ariaLabel,\n ariaLabelledby,\n ...props\n}: Props) => {\n const className = 'vb-progressBar';\n const status = () => {\n if (value === 0 || value === undefined) {\n return 'initial';\n } else if (value === maxValue) {\n return 'complete';\n } else {\n return 'progressing';\n }\n };\n\n return (\n \n {indeterminate ? (\n \n ) : (\n \n )}\n \n );\n};\n" }, { "path": "src/lv1/skeleton/SkeletonBase.tsx", "content": "import * as React from 'react';\nimport ContentLoader from 'react-content-loader';\nimport { convertRemToPixel } from '../../utilities/convertRemToPixel';\n\ntype Props = {\n /**\n * 幅をremで指定します\n */\n width: number;\n /**\n * 高さをremで指定します\n */\n height: number;\n};\n\nexport const SkeletonBase: React.FC = (props) => {\n const widthPixel = convertRemToPixel(props.width);\n const heightPixel = convertRemToPixel(props.height);\n\n return (\n \n \n \n );\n};\n" }, { "path": "src/lv1/typography/InternalHeadline.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { useResponsive } from '../../utilities/VibesProvider';\n\ntype HeadlineProps = {\n children?: React.ReactNode;\n className: string;\n id?: string;\n inline?: boolean;\n textAlign?: 'left' | 'center' | 'right';\n headlineLevel: 1 | 2 | 3 | 4 | 5 | 6 | -1;\n} & CommonProps &\n MarginClassProps;\n\n/**\n * 他の headline の基底コンポーネント。vibes のコンポーネントとしては export していないので storybook も作成していない。\n */\nfunction InternalHeadline(\n props: HeadlineProps,\n ref?: React.Ref\n): React.ReactElement {\n const {\n children,\n className,\n id,\n inline,\n textAlign,\n headlineLevel,\n marginTop,\n marginRight,\n marginLeft,\n marginBottom,\n marginSize,\n } = props;\n\n const elementProps = {\n ...commonProps(\n props,\n className,\n {\n inline,\n responsive: useResponsive(),\n alignLeft: textAlign === 'left',\n alignRight: textAlign === 'right',\n alignCenter: textAlign === 'center',\n },\n { marginTop, marginRight, marginLeft, marginBottom, marginSize }\n ),\n id,\n ref,\n tabIndex: -1,\n };\n switch (headlineLevel) {\n case 1:\n return

{children}

;\n case 2:\n return

{children}

;\n case 3:\n return

{children}

;\n case 4:\n return

{children}

;\n case 5:\n return
{children}
;\n case 6:\n return
{children}
;\n default:\n return {children};\n }\n}\n\nexport default React.forwardRef(\n InternalHeadline\n);\n" }, { "path": "src/lv1/typography/Note.stories.tsx", "content": "import * as React from 'react';\n\nimport { text, boolean, select } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport Note from './Note';\n\nexport default {\n component: Note,\n};\n\nexport const NoteComponent = () => (\n \n {text(\n 'Children',\n '注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈',\n 'Note'\n )}\n \n);\n\nexport const EllipsisWhenOverflow = () => {\n return (\n
\n \n ellipsisを指定するとテキストが溢れた時には省略されます\n \n \n inlineのときもellipsisを指定するとテキストが溢れた時には省略されます\n \n
\n );\n};\n" }, { "path": "src/lv1/typography/Note.tsx", "content": "import * as React from 'react';\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport { CommonProps } from '../../utilities/commonProps';\nimport { TypographyStyle, TypographyStyleProps } from './TypographyStyle';\nimport styled from 'styled-components';\nimport { CaptionFont, VibesBurntColor } from '../../constants';\n\ntype Props = {\n children?: React.ReactNode;\n} & TypographyStyleProps &\n CommonProps &\n MarginClassProps;\n\nconst Style = styled(TypographyStyle)`\n color: ${VibesBurntColor};\n font: ${CaptionFont};\n`;\n\nexport default function Note(props: Props): React.ReactElement {\n return \n);\n\nexport default ScrimCoveredContent;\n" }, { "path": "src/lv2/selectableButton/SelectableButton.stories.tsx", "content": "import * as React from 'react';\nimport { commonKnobs } from '../../../stories';\nimport SelectableButton from './SelectableButton';\nimport { HStack } from '../..';\n\nexport default {\n component: SelectableButton,\n};\n\nexport const Base = () => {\n const [selected, setSelected] = React.useState(0);\n return (\n \n setSelected(0)}\n {...commonKnobs()}\n />\n setSelected(1)}\n {...commonKnobs()}\n />\n setSelected(2)}\n badge={3}\n {...commonKnobs()}\n />\n setSelected(3)}\n dropdownContents={[\n {\n text: 'ビューを更新',\n type: 'selectable',\n onClick: () => {\n // no-op\n },\n },\n {\n text: 'ビューの名前を変更',\n type: 'selectable',\n onClick: () => {\n // no-op\n },\n },\n {\n text: 'ビューをコピー',\n type: 'selectable',\n onClick: () => {\n // no-op\n },\n },\n {\n text: 'ビューを削除',\n type: 'selectable',\n onClick: () => {\n // no-op\n },\n },\n ]}\n {...commonKnobs()}\n />\n \n );\n};\n" }, { "path": "src/lv2/selectableButton/SelectableButton.tsx", "content": "import * as React from 'react';\nimport { MdArrowDropDown } from 'react-icons/md';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { WithDropdown } from '..';\nimport { DropdownContent } from '../dropdown/types';\n\ntype Props = {\n /**\n * ボタンの選択状態を指定します。\n * The selection state of the button.\n */\n selected?: boolean;\n /**\n * ボタン内に表示するラベルを指定します。\n * The label of the button.\n */\n label: string;\n /**\n * ボタンを押下したときの処理を指定します。\n * The handler when the button is clicked.\n */\n onClick?: () => void;\n /**\n * 選択中のボタンを再選択したときに表示するドロップダウンの内容を指定します。\n * 指定を行わない場合、ドロップダウンは表示されず、通常のボタンのように動作します。\n * The contents of the dropdown to be displayed when the selected button is reselected.\n * If not specified, the dropdown will not be displayed and will behave like a normal button.\n */\n dropdownContents?: DropdownContent[];\n /**\n * バッジに表示する数値を指定します。\n * 0を指定した場合はバッジは表示されません。\n * The number to be displayed in the badge.\n * If 0 is specified, the badge will not be displayed.\n */\n badge?: number;\n} & CommonProps;\n\n/**\n * 選択中に再度選択するとドロップダウンを表示できるボタンです。\n */\nconst SelectableButton: React.FC = ({\n selected,\n label,\n onClick,\n dropdownContents,\n badge,\n ...props\n}: Props) => {\n const baseClass = 'vb-selectableButton';\n\n return (\n \n {dropdownContents && dropdownContents.length > 0 ? (\n (\n }\n >\n {label}\n {badge != null && badge > 0 && (\n {badge}\n )}\n {selected && (\n \n )}\n \n )}\n />\n ) : (\n \n {label}\n {badge != null && badge > 0 && (\n {badge}\n )}\n \n )}\n \n );\n};\n\nexport default SelectableButton;\n" }, { "path": "src/lv2/skeleton/SkeletonBlock.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonBlock } from './SkeletonBlock';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: SkeletonBlock,\n};\nexport const SkeletonBlockComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonBlock.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * サイズを指定します\n */\n size?: 'small' | 'medium' | 'large';\n} & CommonProps;\n\nconst getWidth = (size: 'small' | 'medium' | 'large' = 'medium') => {\n switch (size) {\n case 'small':\n return 4;\n case 'medium':\n return 7.5;\n case 'large':\n return 11;\n }\n};\n\nconst getHeight = (size: 'small' | 'medium' | 'large' = 'medium') => {\n switch (size) {\n case 'small':\n return 1.5;\n case 'medium':\n return 2.25;\n case 'large':\n return 3;\n }\n};\n\n/**\n * ボタンやフォームのフィールドなど用のスケルトンイメージのコンポーネントです\n * This component provides skeleton images for buttons, form fields, and so on.\n */\nexport const SkeletonBlock: React.FC = (props) => (\n \n \n
\n);\n\n/**\n * @deprecated SkeletonBlock を使ってください。 Use SkeletonBlock instead.\n */\nexport const SkeltonBlock = SkeletonBlock;\n" }, { "path": "src/lv2/skeleton/SkeletonCircle.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonCircle } from './SkeletonCircle';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: SkeletonCircle,\n};\nexport const SkeletonCircleComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonCircle.tsx", "content": "import * as React from 'react';\nimport ContentLoader from 'react-content-loader';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\nimport { convertRemToPixel } from '../../utilities/convertRemToPixel';\n\ntype Props = {\n /**\n * サイズを指定します\n */\n size?: 'small' | 'medium' | 'large' | 'xlarge';\n} & CommonProps;\n\nconst getLength = (\n size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium'\n) => {\n switch (size) {\n case 'small':\n return 0.75;\n case 'medium':\n return 1;\n case 'large':\n return 1.5;\n case 'xlarge':\n return 3;\n }\n};\n\n/**\n * ユーザーアバターなど、円形で表示されるUIパーツ用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton image of circular UI parts such as user avaters.\n */\nexport const SkeletonCircle: React.FC = (props) => {\n const lengthPixel = convertRemToPixel(getLength(props.size));\n\n return (\n \n \n \n \n
\n );\n};\n\n/**\n * @deprecated SkeletonCircle を使ってください。 Use SkeletonCircle instead.\n */\nexport const SkeltonCircle = SkeletonCircle;\n" }, { "path": "src/lv2/skeleton/SkeletonDescriptionList.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { number } from '@storybook/addon-knobs';\nimport { SkeletonDescriptionList } from './SkeletonDescriptionList';\n\nexport default {\n component: SkeletonDescriptionList,\n};\n\nexport const SkeletonDescriptionListComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonDescriptionList.tsx", "content": "import React from 'react';\nimport DescriptionList from '../descriptionList/DescriptionList';\nimport { SkeletonParagraph } from './SkeletonParagraph';\nimport { CommonProps } from '../../utilities';\n\ntype Props = {\n /**\n * 行数を指定します。デフォルトは３です。\n */\n rowCount?: number;\n} & CommonProps;\n\n/**\n * ローディング中の DescriptionList を表現するために使います\n * This component provides a skeleton image of DescriptionList.\n */\nexport const SkeletonDescriptionList: React.FC = (props) => {\n const { rowCount = 3, ...commonProps } = props;\n\n return (\n ,\n value: ,\n })}\n {...commonProps}\n />\n );\n};\n" }, { "path": "src/lv2/skeleton/SkeletonIcon.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonIcon } from './SkeletonIcon';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: SkeletonIcon,\n};\nexport const SkeletonIconComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonIcon.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * サイズを指定します\n */\n size?: 'small' | 'medium' | 'large';\n} & CommonProps;\n\nconst getLength = (size: 'small' | 'medium' | 'large' = 'medium') => {\n switch (size) {\n case 'small':\n return 1.5;\n case 'medium':\n return 2;\n case 'large':\n return 3;\n }\n};\n\n/**\n * アイコン用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton image of icons.\n */\nexport const SkeletonIcon: React.FC = (props) => (\n \n \n
\n);\n\n/**\n * @deprecated SkeletonIcon を使ってください。 Use SkeletonIcon instead.\n */\nexport const SkeltonIcon = SkeletonIcon;\n" }, { "path": "src/lv2/skeleton/SkeletonInput.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport {\n FormControl,\n Paragraph,\n SectionTitle,\n SkeletonInput,\n Stack,\n TextField,\n} from '../../';\n\nexport default {\n component: SkeletonInput,\n};\n\nexport const SkeletonInputComponent = () => (\n \n);\n\nconst value =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus scelerisque viverra ex ac finibus.';\n\nexport const SizeComparison = () => (\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 \n \n \n \n \n \n \n {''}\n \n {/* Stack children does not expand to 100% width */}\n \n \n \n \n \n \n \n \n \n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonInput.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\nimport { TextFieldWidth } from '../../lv1/forms/TextField';\n\ntype Props = {\n /**\n * Makes the height smaller /サイズを小さくします\n */\n small?: boolean;\n /**\n * Makes the height larger / サイズを大きくします\n */\n large?: boolean;\n /**\n * Changes the width / 幅を指定します\n *\n * - xSmall: 4rem (64px)\n * - small: 7rem (112px)\n * - medium (default): 11rem (176px)\n * - large: 24rem (384px)\n * - full: 100%\n */\n width?: TextFieldWidth;\n} & CommonProps;\n\nconst widthMap = { xSmall: 2, small: 4, medium: 7, large: 16, full: 12 };\n\n/**\n * TextField 等のスケルトンイメージのコンポーネントです。\n * Skeleton image component for TextField related components.\n */\nexport const SkeletonInput: React.FC = (props) => {\n const { small, large, width } = props;\n\n return (\n \n \n \n );\n};\n" }, { "path": "src/lv2/skeleton/SkeletonListTable.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { number } from '@storybook/addon-knobs';\nimport { SkeletonListTable } from './SkeletonListTable';\nimport { SkeletonRectangle } from './SkeletonRectangle';\nimport { SkeletonCircle } from './SkeletonCircle';\nimport { SkeletonIcon } from './SkeletonIcon';\n\nexport default {\n component: SkeletonListTable,\n};\n\nexport const SkeletonListTableComponent = () => (\n \n);\n\nexport const CustomSkeletonComponents = () => (\n },\n { value: },\n { value: },\n ]}\n />\n);\n" }, { "path": "src/lv2/skeleton/SkeletonListTable.tsx", "content": "import React from 'react';\nimport ListTable, { TableCell } from '../listTable/ListTable';\nimport { SkeletonParagraph } from './SkeletonParagraph';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\n\ntype Props = {\n /**\n * 列数を指定します。デフォルトは５です。\n */\n columnCount?: number;\n /**\n * 行数を指定します。デフォルトは３です。\n */\n rowCount?: number;\n /**\n * 各行に表示するコンポーネント等を指定します。\n * デフォルトでは、１列目に `SkeletonParagraph` の `\"medium\"`サイズが、２列目以降には `SkeletonParagraph` の `\"small\"` サイズが表示されます。\n */\n rowCells?: Array;\n} & CommonProps;\n\n/**\n * ローディング中のテーブルを表現するために使います\n * This component provides a skeleton image of ListTable.\n */\nexport const SkeletonListTable: React.FC = (props) => {\n const { columnCount = 5, rowCount = 3, rowCells, ...commonProps } = props;\n const numberOfColumns = rowCells?.length || columnCount;\n\n return (\n ,\n })}\n rows={Array(rowCount).fill({\n cells: rowCells\n ? rowCells\n : Array(numberOfColumns)\n .fill(1)\n .map((_, i) => ({\n value: (\n \n ),\n })),\n })}\n {...commonProps}\n />\n );\n};\n\n/**\n * @deprecated SkeletonListTable を使ってください。 Use SkeletonListTable instead.\n */\nexport const SkeltonListTable = SkeletonListTable;\n" }, { "path": "src/lv2/skeleton/SkeletonPageTitle.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonPageTitle } from './SkeletonPageTitle';\n\nexport default {\n component: SkeletonPageTitle,\n};\n\nexport const SkeletonPageTitleComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonPageTitle.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\n/**\n * PageTitle用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton image of PageTitle component.\n */\nexport const SkeletonPageTitle: React.FC = (props) => (\n
\n \n
\n);\n\n/**\n * @deprecated SkeletonPageTitle を使ってください。 Use SkeletonPageTitle instead.\n */\nexport const SkeltonPageTitle = SkeletonPageTitle;\n" }, { "path": "src/lv2/skeleton/SkeletonParagraph.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { select } from '@storybook/addon-knobs';\nimport { SkeletonParagraph } from './SkeletonParagraph';\n\nexport default {\n component: SkeletonParagraph,\n};\nexport const SkeletonParagraphComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonParagraph.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * サイズを指定します\n */\n size?: 'small' | 'medium' | 'large';\n} & CommonProps;\n\nconst getWidth = (size: 'small' | 'medium' | 'large' = 'medium') => {\n switch (size) {\n case 'small':\n return 6;\n case 'medium':\n return 11;\n case 'large':\n return 24;\n }\n};\n/**\n * Paragraph用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton image of Paragraph component.\n */\nexport const SkeletonParagraph: React.FC = (props) => (\n
\n \n
\n);\n\n/**\n * @deprecated SkeletonParagraph を使ってください。 Use SkeletonParagraph instead.\n */\nexport const SkeltonParagraph = SkeletonParagraph;\n" }, { "path": "src/lv2/skeleton/SkeletonRectangle.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonRectangle } from './SkeletonRectangle';\nimport { select } from '@storybook/addon-knobs';\n\nexport default {\n component: SkeletonRectangle,\n};\nexport const SkeletonRectangleComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonRectangle.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * サイズを指定します\n */\n size?: 'default' | 'large';\n} & CommonProps;\n\nconst getWidth = (size: 'default' | 'large' = 'default') => {\n switch (size) {\n case 'default':\n return 5;\n case 'large':\n return 18;\n }\n};\n\n/**\n * 画像サムネイルなど、大きめの正方形・長方形用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton images for larger squares or rectangles, such as image thumbnails.\n */\nexport const SkeletonRectangle: React.FC = (props) => (\n
\n \n
\n);\n\n/**\n * @deprecated SkeletonRectangle を使ってください。 Use SkeletonRectangle instead.\n */\nexport const SkeltonRectangle = SkeletonRectangle;\n" }, { "path": "src/lv2/skeleton/SkeletonSectionTitle.stories.tsx", "content": "import * as React from 'react';\n\nimport { commonKnobs } from '../../../stories';\nimport { SkeletonSectionTitle } from './SkeletonSectionTitle';\n\nexport default {\n component: SkeletonSectionTitle,\n};\nexport const SkeletonSectionTitleComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonSectionTitle.tsx", "content": "import * as React from 'react';\nimport { SkeletonBase } from '../../lv1/skeleton/SkeletonBase';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\n/**\n * SectionTitle用のスケルトンイメージのコンポーネントです。\n * This component provides a skeleton image of SectionTitle component.\n */\nexport const SkeletonSectionTitle: React.FC = (props) => (\n
\n \n
\n);\n\n/**\n * @deprecated SkeletonSectionTitle を使ってください。 Use SkeletonSectionTitle instead.\n */\nexport const SkeltonSectionTitle = SkeletonSectionTitle;\n" }, { "path": "src/lv2/skeleton/SkeletonStackedBarChart.stories.tsx", "content": "import * as React from 'react';\n\nimport { SkeletonStackedBarChart } from '../skeleton/SkeletonStackedBarChart';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: SkeletonStackedBarChart,\n};\n\nexport const SkeletonStackedBarChartComponent = () => (\n \n);\n" }, { "path": "src/lv2/skeleton/SkeletonStackedBarChart.tsx", "content": "import * as React from 'react';\nimport ContentLoader from 'react-content-loader';\nimport { CommonProps } from '../../utilities';\nimport commonProps from '../../utilities/commonProps';\n\ntype Props = CommonProps;\n\nexport const SkeletonStackedBarChart: React.FC = (props) => {\n const width = '100%';\n const height = '0.875rem';\n\n return (\n
\n \n \n \n
\n );\n};\n" }, { "path": "src/lv2/stackedBarChart/StackedBarChart.stories.tsx", "content": "import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { StackedBarChart } from './StackedBarChart';\nimport { Paragraph } from '../../lv1';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: StackedBarChart,\n};\n\nconst colors = ['RE', 'OR', 'YE', 'YG', 'GR', 'BG', 'PU', 'GY'] as const;\nconst items = colors.map((color, i) => ({\n label: color,\n value: (100 / colors.length) * (i + 1),\n valueLabel: `${(i + 1) * 10}個`,\n color: color,\n}));\n\nexport const StackedBarChartComponent = () => (\n \n);\n\nexport const WithLongLabelItem = () => (\n <>\n ラベルが長い項目は省略されます。\n \n \n);\n\nexport const WithTooSmallValueItem = () => (\n <>\n \n 非情に小さな値をもつ項目であっても消失しないように、一定の幅で表示されます。それ以外の項目には残った領域が割り当てられます。\n \n \n \n ただし、項目の値が 0（すなわち割合が 0\n ％）の場合は、項目は表示されません。\n \n \n \n);\n\nexport const TooManyItems = () => {\n const tooManyItems = items.concat(items, items, items);\n return (\n <>\n \n 親要素の幅に対して項目の数が多すぎる場合、項目が溢れることがあります。そのため、\n 最小幅の 3.375rem × 項目数\n が親要素の幅よりも小さくなることを保証する必要があります。\n \n \n \n );\n};\n" }, { "path": "src/lv2/stackedBarChart/StackedBarChart.tsx", "content": "import * as React from 'react';\nimport { CommonProps } from '../../utilities';\nimport WithBalloon from '../withBalloon/WithBalloon';\nimport commonProps from '../../utilities/commonProps';\nimport vbClassNames from '../../utilities/vbClassNames';\n\nexport type StackedBarChartItem = {\n color: 'RE' | 'OR' | 'YE' | 'YG' | 'GR' | 'BG' | 'PU' | 'GY';\n /**\n * 項目名\n */\n label: string;\n /**\n * 項目の値。各項目の値の比率に基づいて項目の幅を決定します\n */\n value: number;\n /**\n * 実際に表示される項目の値のラベル。例えば「100名」など\n */\n valueLabel: string;\n};\n\ntype Props = {\n items: Array;\n /**\n * 項目のクリック時に呼び出されるコールバック\n * @param index クリックされた item の index\n */\n onClickItem: (index: number) => void;\n} & CommonProps;\n\n/**\n * 与えられた各項目の構成比を、項目の幅によって視覚的に示す帯グラフ。\n * - コンポーネントの振る舞い\n * - 割合が 0 の項目は表示されません。\n * - 表示されている項目はクリッカブルで、クリックすることができます。\n * - 親要素の幅に対して項目の数が多すぎる場合、項目が溢れることがあります。そのため、最小幅の 3.375rem × 項目数が親要素の幅よりも小さくなることを保証する必要があります。\n * - コンポーネントの使用方針\n * - 全体量に対する割合がある項目を視覚化、フィルターとして利用したい時に使用してください。\n * - このコンポーネントを使用する場合は、このコンポーネント以外にすべての項目を網羅して表示させることのできるフィルターを同画面内に配置してください。\n * - Tab や SelectBox など、表示されるものを切り替えられるもの\n * - 割合が 0 の場合などに、このコンポーネントのみだとありうる項目を網羅して表示させることができないため\n * - 項目がクリックされフィルタリングされる際は、項目の詳細コンテンツを表示してください。\n * - 割合が少ない場合、StackedBarChart 内では項目表記が省略されるので視認性観点でも代わりに説明できる手段を残してください。\n * - 最終的に StackedBarChart を使用するにあたって同画面内に必要なパーツ\n * - ありうる項目を網羅するフィルターUI（Tab や SelectBox）\n * - フィルターUIや StackedBarChart の項目をクリックすることで表示される詳細コンテンツ\n */\nexport const StackedBarChart: React.FC = (props) => {\n const { items, onClickItem, ...others } = props;\n const sum = items.reduce((acc, item) => acc + item.value, 0);\n\n // 割合が 0 の項目は非表示\n const visibleItems = React.useMemo(\n () =>\n items.flatMap((item, i) => {\n const proportion = sum > 0 ? item.value / sum : 0;\n\n if (proportion === 0) {\n return [];\n }\n\n return {\n ...item,\n proportion,\n originalIndex: i,\n };\n }),\n [items, sum]\n );\n\n const baseClass = 'vb-stackedBarChart';\n\n return (\n
    \n {visibleItems.map((item, i) => {\n const isFirst = i === 0;\n const isLast = i === visibleItems.length - 1;\n\n const classModifier = {\n first: isFirst,\n last: isLast,\n RE: item.color === 'RE',\n OR: item.color === 'OR',\n YE: item.color === 'YE',\n YG: item.color === 'YG',\n GR: item.color === 'GR',\n BG: item.color === 'BG',\n PU: item.color === 'PU',\n GY: item.color === 'GY',\n };\n\n return (\n \n `${item.label} ${item.valueLabel}`}\n renderContent={() => (\n onClickItem(item.originalIndex)}\n >\n {`${item.label} ${item.valueLabel}`}\n \n )}\n />\n \n );\n })}\n
\n );\n};\n" }, { "path": "src/lv2/statusSelector/StatusSelector.stories.tsx", "content": "import * as React from 'react';\n\nimport { boolean, select, text } from '@storybook/addon-knobs';\nimport { action } from '@storybook/addon-actions';\nimport { commonKnobs } from '../../../stories';\nimport StatusSelector from './StatusSelector';\nimport { DropdownContent } from '../dropdown/types';\n\nexport default {\n component: StatusSelector,\n};\n\nconst dropdownContents: DropdownContent[] = [\n {\n type: 'selectable',\n text: '完了',\n onClick: action('onClick-done'),\n },\n {\n type: 'selectable',\n text: '進行中',\n onClick: action('onClick-success'),\n },\n {\n type: 'selectable',\n text: '却下',\n onClick: action('onClick-warning'),\n },\n];\n\nexport const StatusSelectorComponent = () => (\n \n {text('Children', 'ラベル', 'StatusSelectorComponent')}\n \n);\n\nexport const Samples = () => (\n
\n \n done\n \n \n success\n \n \n progress\n \n \n required\n \n \n disabled\n \n \n emphasis\n \n \n warning\n \n \n error\n \n
\n);\n" }, { "path": "src/lv2/statusSelector/StatusSelector.tsx", "content": "import * as React from 'react';\nimport { StatusType } from '../../lv1/icons/StatusIcon';\nimport WithDropdown from '../withDropdown/WithDropdown';\nimport { DropdownContent } from '../dropdown/types';\nimport { MdArrowDropDown } from 'react-icons/md';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { MarginClassProps } from '../../utilities/marginClasses';\n\ntype Props = {\n children?: React.ReactNode;\n /**\n * color type を指定します\n */\n type?: StatusType;\n /**\n * ドロップダウンで選択するステータスを指定します\n */\n dropdownContents: DropdownContent[];\n /**\n * ドロップダウン選択を disabled に設定します\n */\n disabled?: boolean;\n} & MarginClassProps &\n CommonProps;\n\n/**\n * StatusIconをクリッカブルにし、ドロップダウンから選択してステータスを切り替えられるようにしたコンポーネントです。\n *\n * 用途や type の使い分けについては StatusIcon の doc を参照してください。\n */\nconst StatusSelector: React.FC = (props: Props) => {\n const {\n dropdownContents,\n disabled,\n children,\n type,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n\n const statusSelectorBaseClass = 'vb-statusSelector';\n\n const camelCase = (str: string) => {\n const s = str.charAt(0).toLowerCase() + str.slice(1);\n return s.replace(/[-_](.)/g, (_, group1) => group1.toUpperCase());\n };\n\n const classModifier = [\n 'done',\n 'success',\n 'progress',\n 'required',\n 'disabled',\n 'emphasis',\n 'warning',\n 'error',\n ].reduce(\n (acm, mod) => ({ ...acm, [camelCase(`type_${mod}`)]: type === mod }),\n {\n disabled,\n }\n );\n\n return (\n (\n }\n >\n {children}\n \n \n )}\n />\n );\n};\nexport default StatusSelector;\n" }, { "path": "src/lv2/stepper/Stepper.stories.tsx", "content": "import * as React from 'react';\n\nimport Stepper from './Stepper';\nimport { number, boolean } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: Stepper,\n};\n\nexport const StepperComponent = () => (\n \n);\n\nexport const Small = () => (\n \n);\n\nexport const StepperWithReactNode = () => (\n \n 長いと\n
\n 改行したく\n
\n なる\n ,\n <>\n ちょっと\n
\n 強調\n
\n してみる\n ,\n 'step3',\n 'step4',\n 'step5',\n ]}\n currentStepIndex={number(\n 'currentStepIndex',\n 2,\n { min: 0, max: 4 },\n 'Stepper'\n )}\n disabledStepIndex={[3, 4]}\n small={boolean('small', false, 'Stepper')}\n {...commonKnobs()}\n />\n);\n" }, { "path": "src/lv2/stepper/Stepper.tsx", "content": "import * as React from 'react';\nimport { Stack, StepNumber, Text } from '../../lv1';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n currentStepIndex: number;\n disabledStepIndex: Array;\n small?: boolean;\n steps: Array;\n} & CommonProps;\n\nconst Stepper: React.FC = (props: Props) => {\n const { steps, currentStepIndex, disabledStepIndex, small } = props;\n const stepperBaseClass = 'vb-stepper';\n\n return (\n
    \n {steps.map((name, i) => (\n
  • \n
    \n \n i}\n small={small}\n disabled={disabledStepIndex.includes(i)}\n />\n \n {name}\n \n \n
    \n
    • \n ))}\n
\n );\n};\n\nexport default Stepper;\n" }, { "path": "src/lv2/stepper/VerticalSteps.stories.tsx", "content": "import * as React from 'react';\nimport { select } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport { VerticalSteps } from './VerticalSteps';\nimport {\n Button,\n Paragraph,\n HStack,\n OptionButton,\n RadioButton,\n VStack,\n TextField,\n CheckBox,\n} from '../../lv1';\nimport { DescriptionList, FormattedTextField, FormControl } from '..';\n\nexport default {\n component: VerticalSteps,\n};\n\nexport const StepperComponent = () => {\n const [stepIndex, setStepIndex] = React.useState(0);\n const [formValues, setFormValues] = React.useState({\n paymentMethod: 'prepayment',\n postalCode: '',\n address: '',\n name: '',\n cool: false,\n });\n return (\n \n \n \n \n e.target.checked &&\n setFormValues({\n ...formValues,\n paymentMethod: 'prepayment',\n })\n }\n >\n 元払い\n \n \n \n \n e.target.checked &&\n setFormValues({\n ...formValues,\n paymentMethod: 'postpayment',\n })\n }\n >\n 着払い\n \n \n \n \n ),\n contentSummary: (\n \n {formValues.paymentMethod === 'postpayment' ? '着' : '元'}払い\n \n ),\n actions: (\n setStepIndex(stepIndex + 1)}\n >\n 次へ\n \n ),\n },\n {\n title: '送り先情報を入力してください',\n content: (\n \n \n \n setFormValues({ ...formValues, postalCode: e.target.value })\n }\n autoComplete=\"postal-code\"\n />\n \n \n \n setFormValues({ ...formValues, address: e.target.value })\n }\n autoComplete=\"street-address\"\n />\n \n \n \n setFormValues({ ...formValues, name: e.target.value })\n }\n />\n \n \n ),\n contentSummary: (\n <>\n {formValues.postalCode ? (\n 〒{formValues.postalCode}\n ) : (\n ''\n )}\n {formValues.address || formValues.name ? (\n \n {formValues.address} {formValues.name}\n \n ) : (\n ''\n )}\n \n ),\n actions: (\n \n setStepIndex(stepIndex + 1)}\n >\n 次へ\n \n \n \n ),\n },\n {\n title: 'オプションを選択しましょう',\n content: (\n \n \n setFormValues({ ...formValues, cool: e.target.checked })\n }\n >\n クール便を使用する\n \n \n ),\n contentSummary: (\n <>\n {formValues.cool ? クール便を使用する : ''}\n \n ),\n actions: (\n \n setStepIndex(stepIndex + 1)}\n >\n 次へ\n \n \n \n ),\n },\n {\n title: '内容を確認して、送信しましょう',\n content: (\n <>\n \n {formValues.postalCode ? (\n 〒{formValues.postalCode}\n ) : (\n ''\n )}\n {formValues.address || formValues.name ? (\n \n {formValues.address} {formValues.name}\n \n ) : (\n ''\n )}\n \n ),\n },\n {\n title: 'オプション',\n value: formValues.cool ? 'クール便を使用する' : '',\n },\n ]}\n />\n \n ),\n actions: (\n \n \n \n \n ),\n },\n ]}\n {...commonKnobs()}\n />\n );\n};\n" }, { "path": "src/lv2/stepper/VerticalSteps.tsx", "content": "import * as React from 'react';\nimport useUniqueId from '../../hooks/useUniqueId';\nimport { StepNumber, VisuallyHidden } from '../../lv1';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype Props = {\n /**\n * 現在のステップの位置（0始まり）\n */\n currentStepIndex: number;\n steps: {\n /**\n * ステップのタイトル\n */\n title: React.ReactNode;\n /**\n * ステップの内容。現在のステップの内容のみ表示されます。\n */\n content: React.ReactNode;\n /**\n * ステップから次へ進む/目に戻るアクションのボタン\n */\n actions?: React.ReactNode;\n /**\n * 以前のステップでのユーザーの入力内容のサマリー\n */\n contentSummary?: React.ReactNode;\n }[];\n /**\n * ステップのタイトル部分の見出しレベル。`-1` にすると見出し要素ではなくなります。\n */\n stepHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6 | -1;\n} & CommonProps;\n\n/**\n * ユーザーに手順を提示し、順番に沿って操作させるためのコンポーネントです。\n *\n * - 手順ごとに `title` `content` `contentSummary` `actions` を指定できます。\n * - `title` は常に表示されます\n * - `content` はステップの内容で、フォーム等を配置します。現在のステップのみ表示されます\n * - `actions` はステップを完了する、または前のステップに戻るボタンを配置します。現在のステップにのみ表示されます。\n * - `contentSummary` はステップでのユーザーの入力・選択内容の概要を表現します。通過したステップにのみ表示されます\n * - `contentSummary` にはステップで入力・選択した結果のみを含め、インタラクティブなものを含めないでください\n * - 各ステップの `title` は見出しとなります。デフォルトの見出しレベルは2ですが、 `stepHeadlineLevel` により変更ができます\n * - `-1` にすると、見出しではなくなります。\n */\nexport const VerticalSteps: React.FC = ({\n currentStepIndex,\n steps,\n stepHeadlineLevel = 2,\n ...props\n}) => {\n const className = 'vb-verticalSteps';\n const StepHeadlineTag =\n stepHeadlineLevel === 1\n ? 'h1'\n : stepHeadlineLevel === 2\n ? 'h2'\n : stepHeadlineLevel === 3\n ? 'h3'\n : stepHeadlineLevel === 4\n ? 'h4'\n : stepHeadlineLevel === 5\n ? 'h5'\n : stepHeadlineLevel === 6\n ? 'h6'\n : 'div';\n const uniqueId = useUniqueId(className);\n const selfRef = React.useRef(null);\n const renderedFlagRef = React.useRef(false);\n const getStepTitleIdFromIndex = (index: number, uniqueId: string) =>\n `${uniqueId}__title-${index + 1}`;\n React.useEffect(() => {\n if (renderedFlagRef.current && selfRef.current) {\n const elm = selfRef.current.querySelector(\n `#${getStepTitleIdFromIndex(currentStepIndex, uniqueId)}`\n );\n if (elm) {\n (elm as HTMLElement).focus();\n }\n } else if (uniqueId) {\n renderedFlagRef.current = true;\n }\n }, [currentStepIndex, uniqueId]);\n\n return (\n
\n {steps.map(({ title, content, contentSummary, actions }, i) => (\n
\n {/* マークアップ都合でStepNumber部分を見出しに含められないため、aria-hiddenして、見出し側にVisuallyHiddenで番号を書いている */}\n
\n \n
\n currentStepIndex ? ` ${className}__title--future` : ''\n }`}\n id={getStepTitleIdFromIndex(i, uniqueId)}\n tabIndex={-1}\n aria-current={currentStepIndex === i ? 'step' : undefined}\n >\n {i + 1}\n {title}\n \n
\n {i === currentStepIndex\n ? content\n : i < currentStepIndex\n ? contentSummary\n : ''}\n\n {actions && i === currentStepIndex && (\n
{actions}
\n )}\n
\n
\n ))}\n
\n );\n};\n" }, { "path": "src/lv2/tabBar/TabBar.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\n\nimport TabBar from './TabBar';\nimport { commonKnobs } from '../../../stories';\nimport { select, boolean } from '@storybook/addon-knobs';\nimport Button from '../../lv1/buttons/Button';\nimport IconOnlyButton from '../../lv1/buttons/IconOnlyButton';\nimport { MdDelete, MdEdit } from 'react-icons/md';\nimport StatusIcon from '../../lv1/icons/StatusIcon';\n\nexport default {\n component: TabBar,\n};\n\nexport const TabBarComponent = () => (\n \n);\n\nexport const WithDataAttributes = () => (\n ({\n name,\n 'data-guide': name,\n 'data-test': name,\n 'data-tracking': name,\n }))}\n currentTabIndex={3}\n onClickTab={action('tabclicked')}\n {...commonKnobs()}\n />\n);\n\nexport const WithDataAttributesAndReactElement = () => (\n ({\n name: (\n <>\n {name}\n \n success\n \n \n ),\n 'data-guide': name,\n 'data-test': name,\n 'data-tracking': name,\n }))}\n currentTabIndex={3}\n onClickTab={action('tabclicked')}\n {...commonKnobs()}\n />\n);\n\nexport const WithButtons = () => (\n [\n ,\n ,\n ,\n ]}\n {...commonKnobs()}\n />\n);\n\nexport const WithNotifications = () => (\n \n);\n" }, { "path": "src/lv2/tabBar/TabBar.tsx", "content": "import * as React from 'react';\nimport Tab from '../../lv1/interactiveParts/Tab';\nimport { KeyCodes } from '../../utilities/keyboard';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport ButtonGroup from '../buttonGroup/ButtonGroup';\n\nexport type TabElement =\n | string\n | {\n name: React.ReactNode;\n notification?: string;\n 'data-guide'?: string;\n 'data-test'?: string;\n 'data-tracking'?: string;\n 'data-masking'?: boolean;\n };\ntype Props = {\n tabs: Array;\n currentTabIndex: number;\n small?: boolean;\n onClickTab: (i: number) => void;\n renderButtons?: () => React.ReactNode | React.ReactNodeArray;\n} & CommonProps;\n\nconst TabBar: React.FC = ({\n currentTabIndex,\n onClickTab,\n small,\n tabs,\n renderButtons,\n ...props\n}: Props) => {\n const selfRef = React.useRef(null);\n const [selectedTabIndex, setSelectedTabIndex] =\n React.useState(currentTabIndex);\n\n const handleKeyDown = (e: React.KeyboardEvent): void => {\n const focusableItems = selfRef.current\n ? selfRef.current.querySelectorAll('.vb-tab')\n : null;\n\n if (!focusableItems) {\n return;\n }\n\n switch (e.keyCode) {\n case KeyCodes.LEFT: {\n const newIndex =\n (selectedTabIndex < 0 ? currentTabIndex : selectedTabIndex) - 1;\n const newTab = focusableItems[newIndex];\n if (newTab) {\n setSelectedTabIndex(newIndex);\n (newTab as HTMLButtonElement).focus();\n }\n break;\n }\n case KeyCodes.RIGHT: {\n const newIndex =\n (selectedTabIndex < 0 ? currentTabIndex : selectedTabIndex) + 1;\n\n const newTab = focusableItems[newIndex];\n if (newTab) {\n setSelectedTabIndex(newIndex);\n (newTab as HTMLButtonElement).focus();\n }\n break;\n }\n case KeyCodes.TAB: {\n setSelectedTabIndex(currentTabIndex);\n break;\n }\n }\n };\n const handleFocus = (e: React.FocusEvent): void => {\n const focusableItems = selfRef.current\n ? selfRef.current.querySelectorAll('.vb-tab')\n : null;\n if (focusableItems && e.target) {\n const index = Array.prototype.indexOf.call(focusableItems, e.target);\n if (index >= 0) {\n setSelectedTabIndex(index);\n }\n }\n };\n\n return (\n \n
\n {tabs.map((tab: TabElement, i: number) => (\n onClickTab(i)}\n data-guide={typeof tab !== 'string' ? tab['data-guide'] : undefined}\n data-test={typeof tab !== 'string' ? tab['data-test'] : undefined}\n data-tracking={\n typeof tab !== 'string' ? tab['data-tracking'] : undefined\n }\n data-masking={\n typeof tab !== 'string' ? tab['data-masking'] : undefined\n }\n notification={\n typeof tab !== 'string' && tab.notification\n ? tab.notification\n : undefined\n }\n >\n {typeof tab !== 'string' ? tab.name : tab}\n \n ))}\n
\n {renderButtons && {renderButtons()}}\n
\n );\n};\nexport default TabBar;\n" }, { "path": "src/lv2/tagBox/MiniTag.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, select, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport { MiniTag } from './MiniTag';\n\nexport default {\n component: MiniTag,\n};\n\nexport const MiniTagComponent = () => (\n \n {text('children', 'フリー株式会社', 'MiniTag')}\n \n);\n\nexport const AccentColor = () => (\n <>\n \n None\n \n \n RE\n \n \n OR\n \n \n YE\n \n \n YG\n \n \n GR\n \n \n BG\n \n \n PU\n \n \n GY\n \n \n);\n\nexport const LongText = () => (\n <>\n {Array(1000).fill('あ').join('')}\n {Array(1000).fill('あ').join('')}\n \n);\n" }, { "path": "src/lv2/tagBox/MiniTag.tsx", "content": "import * as React from 'react';\nimport { MdClear } from 'react-icons/md';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport { VisuallyHidden } from '../../lv1';\n\ntype Props = {\n /**\n * タグの名前を指定します\n */\n children: string;\n /**\n * タグの種別（取引先、品目、etc...）を指定します\n */\n type?: string;\n /**\n * 削除ボタンが押せない場合 true を指定します\n */\n disabledRemoveButton?: boolean;\n /**\n * 削除ボタンを表示するかを指定します\n */\n removable?: boolean;\n /**\n * 削除時の処理を指定します\n */\n onRemove?: () => void;\n color?: 'RE' | 'OR' | 'YE' | 'YG' | 'GR' | 'BG' | 'PU' | 'GY';\n /**\n * 削除ボタンの `tabIndex` を指定します。\n * コンボボックスなどで、ボタンにフォーカスして押下する以外のキーボード操作による削除が可能な場合のみ `-1` を指定してください。\n */\n removeButtonTabIndex?: 0 | -1;\n} & CommonProps;\n\n/**\n * TagBoxよりも小さいサイズの、タグ表示用コンポーネントです。コンボボックスの内部などで使う想定です。\n *\n * コンボボックスの内部以外では、**TagBoxを使用することを強く推奨します**。\n * どうしてもこのコンポーネントである必要がある場合のみ、アクセシビリティに細心の注意を払ったうえで使ってください。\n *\n * - サイズを小さくするため、タグの種別が非表示になっています\n * - 可能な限り、色と種別の対応をユーザーが理解できるようにしてください\n * - 色と種別の対応は、Vibes内では定義していません。プロダクト内では一貫したものを使用してください\n * - 種別 (`type`) はoptionalにしていますが、複数の種別を並べて表示する場合には必ず指定してください\n * - VisuallyHiddenにて、スクリーンリーダーからは読み取れるようにしてあります\n */\nexport const MiniTag: React.FC = ({\n type,\n children,\n disabledRemoveButton,\n removable,\n onRemove,\n color = 'YE',\n removeButtonTabIndex,\n ...props\n}: Props) => {\n const baseClass = 'vb-miniTag';\n const classModifier = {\n removable,\n RE: color === 'RE',\n OR: color === 'OR',\n YE: color === 'YE',\n YG: color === 'YG',\n GR: color === 'GR',\n BG: color === 'BG',\n PU: color === 'PU',\n GY: color === 'GY',\n };\n\n const bodyClassName = `${baseClass}__body`;\n const removeButtonColorClassName = ` ${baseClass}__removeButton--${color}`;\n\n return (\n \n \n \n {children}\n \n {type && ({type})}\n {removable && (\n onRemove && onRemove()}\n >\n \n \n )}\n \n \n );\n};\n" }, { "path": "src/lv2/tagBox/TagBox.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport { boolean, select, text } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport TagBox from './TagBox';\n\nexport default {\n component: TagBox,\n};\n\nexport const TagBoxComponent = () => (\n \n {text('Children', 'フリー株式会社', 'TagBox')}\n \n);\n\nexport const MaxWidth = () => (\n <>\n
\n \n これは要素をはみ出るほど長い名前の会社です。とてもながーーーーーーーい\n \n
\n
\n \n これは要素をはみ出るほど長い名前の会社です。とてもながーーーーーーーい\n \n
\n
\n \n これは要素をはみ出るほど長い名前の会社です。とてもながーーーーーーーい\n \n
\n \n);\n\nexport const Color = () => (\n <>\n
\n 正常系の色\n
\n
\n 異常系の色\n
\n \n);\n\nexport const AccentColor = () => (\n <>\n
\n \n RE\n \n
\n
\n \n OR\n \n
\n
\n \n YE\n \n
\n
\n \n YG\n \n
\n
\n \n GR\n \n
\n
\n \n BG\n \n
\n
\n \n PU\n \n
\n
\n \n GY\n \n
\n \n);\n\nexport const DisabledRemoveButton = () => (\n
\n \n フリー株式会社\n \n
\n);\n" }, { "path": "src/lv2/tagBox/TagBox.tsx", "content": "import * as React from 'react';\nimport { MdCancel } from 'react-icons/md';\nimport { Keys } from '../../utilities/keyboard';\n\nimport { MarginClassProps } from '../../utilities/marginClasses';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype TagBoxMaxWidth = 'small' | 'medium' | 'large';\ntype TagBoxColor = 'success' | 'error' | AccentColor;\ntype AccentColor = 'RE' | 'OR' | 'YE' | 'YG' | 'GR' | 'BG' | 'PU' | 'GY';\n\ntype Props = {\n children?: string;\n onRemove?: () => any;\n disabledRemoveButton?: boolean;\n removable?: boolean;\n type?: string;\n maxWidth?: TagBoxMaxWidth;\n color?: TagBoxColor;\n} & MarginClassProps &\n CommonProps;\n\nconst TagBox: React.FC = (props: Props) => {\n const {\n type,\n children,\n removable,\n onRemove,\n disabledRemoveButton,\n maxWidth,\n color,\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n } = props;\n const baseClass = 'vb-tagBox';\n const classModifier = {\n removable,\n maxWidthSmall: maxWidth === 'small',\n maxWidthMedium: maxWidth === 'medium' || !maxWidth,\n maxWidthLarge: maxWidth === 'large',\n success: color === 'success',\n error: color === 'error',\n RE: color === 'RE',\n OR: color === 'OR',\n YE: color === 'YE',\n YG: color === 'YG',\n GR: color === 'GR',\n BG: color === 'BG',\n PU: color === 'PU',\n GY: color === 'GY',\n };\n\n const isAccentColor = color && color !== 'success' && color !== 'error';\n\n const bodyClassName = color\n ? `${baseClass}__body ${baseClass}__body--${color}`\n : `${baseClass}__body`;\n\n const typeClassName = isAccentColor\n ? `${baseClass}__type ${baseClass}__type--${color}`\n : `${baseClass}__type`;\n\n const removeButtonColorClassName = isAccentColor\n ? ` ${baseClass}__removeButton--${color}`\n : '';\n\n return (\n \n \n {type && {type}}\n \n {children}\n \n {removable && (\n onRemove && onRemove()}\n onKeyDown={(e) => {\n if (onRemove && (e.key === Keys.ENTER || e.key === Keys.SPACE)) {\n e.preventDefault();\n onRemove();\n }\n }}\n >\n \n \n )}\n \n \n );\n};\n\nexport default TagBox;\n" }, { "path": "src/lv2/withAccordionContent/WithAccordionContent.stories.tsx", "content": "import * as React from 'react';\n\nimport { boolean, select } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport Paragraph from '../../lv1/typography/Paragraph';\nimport ColumnBase from '../../lv1/bases/ColumnBase';\nimport WithAccordionContent from './WithAccordionContent';\n\nexport default {\n component: WithAccordionContent,\n};\n\nexport const WithAccordionContentComponent = () => {\n const [isOpen, setOpen] = React.useState(false);\n return (\n (\n setOpen(!isOpen)}\n {...commonKnobs()}\n >\n アコーディオンボタン\n \n )}\n isOpen={isOpen}\n {...commonKnobs()}\n >\n \n ほげほげほげほげ\n ふがふがふがふが\n \n \n );\n};\n\nexport const UseAsHeading = () => {\n const [isOpen, setOpen] = React.useState(false);\n return (\n (\n \n setOpen(!isOpen)}\n {...commonKnobs()}\n >\n 見出しを入れられるよ\n \n \n )}\n isOpen={isOpen}\n {...commonKnobs()}\n >\n \n \n そのまま見出しを入れると h\n タグ標準のスタイルがついてくるので自分でスタイル打ち消しとか入れないといけないかも\n \n ふがふがふがふが\n \n \n );\n};\n" }, { "path": "src/lv2/withAccordionContent/WithAccordionContent.tsx", "content": "import * as React from 'react';\nimport { MdExpandLess, MdExpandMore } from 'react-icons/md';\nimport Button from '../../lv1/buttons/Button';\nimport commonProps, {\n CommonProps,\n pickCommonProps,\n} from '../../utilities/commonProps';\nimport useUniqueId from '../../hooks/useUniqueId';\n\ntype AccordionButtonProps = {\n /**\n * 開閉される要素のidを設定します。このidはaria-controlsに用います。\n */\n contentId: string;\n /**\n * 開閉状態を設定します。\n */\n open: boolean;\n} & Pick<\n Parameters[0],\n 'onClick' | 'children' | 'appearance' | 'small' | 'large'\n> &\n CommonProps;\n\nconst AccordionButton: React.FC = (\n props: AccordionButtonProps\n) => {\n const { contentId, open, onClick, children, appearance, small, large } =\n props;\n\n return (\n \n {children}\n \n );\n};\n\ntype Props = {\n /**\n * AccordionButtonを含む要素を返します。\n * contentIdはAccordionButtonの引数として渡してください。\n */\n renderAccordionButtonArea: (\n AccordionButton: React.FC,\n contentId: string\n ) => React.ReactNode;\n /**\n * 開閉状態を設定します。\n */\n isOpen: boolean;\n /**\n * 開閉される要素を設定します。\n */\n children: React.ReactNode;\n} & CommonProps;\n\n/**\n * 開閉される要素に用いるコンポーネントです。\n * 同ファイル内に定義されているAccordionButtonと併せて使われる想定です。\n */\nconst WithAccordionContent: React.FC = (props: Props) => {\n const { renderAccordionButtonArea, isOpen, children } = props;\n const contentId = useUniqueId('accordionContent');\n\n return (\n
\n {renderAccordionButtonArea(AccordionButton, contentId)}\n {isOpen && (\n
\n {children}\n
\n )}\n
\n );\n};\n\nexport default WithAccordionContent;\n" }, { "path": "src/lv2/withBalloon/WithBalloon.stories.tsx", "content": "import * as React from 'react';\n\nimport WithBalloon from './WithBalloon';\nimport { commonKnobs } from '../../../stories';\nimport ScrollableBase from '../../lv1/bases/ScrollableBase';\nimport { select, text } from '@storybook/addon-knobs';\nimport Button from '../../lv1/buttons/Button';\nimport { Avatar, Paragraph } from '../../lv1';\nimport dsSquare from '../../lv1/icons/storyAssets/ds_square.jpeg';\n\nexport default {\n component: WithBalloon,\n};\n\nexport const WithBalloonComponent = () => (\n \n text('balloonContent', 'こういう感じでバルーンを出せます', 'WithBalloon')\n }\n renderContent={() =>\n text(\n 'content',\n 'コンテンツに対する注釈をバルーンで表示できます。タッチ操作やキーボード操作では開けないことがあるため、バルーンコンテンツには代替アクセス手段を用意してください。',\n 'WithBalloon'\n )\n }\n {...commonKnobs()}\n />\n);\n\nexport const FocusableElement = () => (\n (\n <>\n このように\n \n フォーカス可能な要素\n \n があると、フォーカス時にバルーンが表示されます。\n 採用情報\n \n )}\n {...commonKnobs()}\n />\n);\n\nexport const LazyImageLoading = () => (\n (\n <>\n \n \n freee株式会社 CEO\n \n \n )}\n renderContent={() => '佐々木大輔'}\n {...commonKnobs()}\n />\n);\nexport const InsideBigScroll = () => (\n
\n \n
\n
\n \n text(\n 'balloonContent',\n 'こういう感じでバルーンを出せます',\n 'WithBalloon'\n )\n }\n {...commonKnobs()}\n renderContent={() => 'あああ'}\n />\n
\n
\n \n
\n);\n\nexport const DisabledButton = () => (\n
\n 'こういう感じでバルーンを出せます'}\n renderContent={(balloonId) => (\n \n )}\n {...commonKnobs()}\n >\n
\n);\n\nexport const DeprecatedProps = () => (\n \n {text(\n 'content',\n 'コンテンツに対する注釈をバルーンで表示できます。タッチ操作やキーボード操作では開けないことがあるため、バルーンコンテンツには代替アクセス手段を用意してください。',\n 'WithBalloon'\n )}\n \n);\n" }, { "path": "src/lv2/withBalloon/WithBalloon.tsx", "content": "import * as React from 'react';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport Balloon from '../../lv1/bases/Balloon';\nimport ScrollPortal from '../../utilities/ScrollPortal';\nimport { FocusTrap } from '../../lv1';\nimport useUniqueId from '../../hooks/useUniqueId';\nimport { Keys } from '../../utilities/keyboard';\nimport { getFocusableElements, isFocusableElement } from '../../utilities';\nimport { useBalloon } from './useBalloon';\n\ntype Props = Pick[0], 'border'> & {\n /**\n * バルーンの中身を描画します。ホバーやフォーカスによってバルーンが表示されているとき、`isVisible` が `true` になります。 `balloonContent` より優先して使用されます。\n */\n renderBalloonContent?: (isVisible: boolean) => React.ReactNode;\n /**\n * (deprecated) バルーンの中身を描画します。バルーンの表示状態を取得できないため、なるべく `renderBalloonContent` を使用してください。\n * @deprecated `renderBalloonContent` を使用してください\n */\n balloonContent?: React.ReactNode;\n /**\n * バルーンを付ける側（呼び出し側）をrenderします。\n * ボタンや入力フォームなどのインタラクティブなコンポーネントがある場合には、`balloonId` を `aria-describedby` に渡してください\n */\n renderContent?: (balloonId: string) => React.ReactNode;\n /**\n * (deprecated) renderContentが渡されていない場合に使用されます。aria-describedbyが使用できないため、なるべく `renderContent` を使用してください。\n * @deprecated `renderContent` を使用してください\n */\n children?: React.ReactNode;\n\n /**\n * trueにしておくとバルーンを表示しません。特定の条件でのみバルーンを表示したい場合に使用してください。\n */\n balloonDisabled?: boolean;\n} & CommonProps;\n\nconst findNextFocusable = (\n el: HTMLElement,\n backward = false\n): Element | undefined => {\n let e = backward ? el.previousElementSibling : el.nextElementSibling;\n while (e) {\n if (isFocusableElement(e)) {\n return e;\n }\n const focusables = getFocusableElements(e as HTMLElement);\n const focusableIndex = findFocusableElIndex(focusables);\n if (focusables.length > 0) {\n return focusables[backward ? focusableIndex : 0];\n }\n e = backward ? e.previousElementSibling : e.nextElementSibling;\n }\n const parent = el.parentElement;\n return parent ? findNextFocusable(parent, backward) : undefined;\n};\n\nconst findFocusableElIndex = (focusables: NodeListOf): number => {\n let focusableLastIndex = 0;\n focusables.forEach((node, i) => {\n let isVisible = true;\n let parent = node.parentElement;\n while (parent) {\n if (parent.style.display === 'none') {\n isVisible = false;\n break;\n }\n parent = parent.parentElement;\n }\n if (isVisible) {\n focusableLastIndex = i;\n }\n });\n return focusableLastIndex;\n};\n\n/**\n * `children` の要素にマウスホバーした際に表示されるバルーンを付与します。\n *\n * - タッチスクリーンによる操作ではバルーンを表示できません。**読めないことで使用できなくなる情報を配置しないでください**。\n * - バルーン内にはキーボード操作で到達できないため、何かの操作のUIを配置する場合は **必ず代替アクセス手段を用意してください**。\n * - バルーンの要素の `id` を `renderContent` の `balloonId` 引数で取得できます。`aria-describedby` で使用してください。\n * - バルーン表示中に `Esc` キーを押下すると、バルーンを非表示にできます。\n */\nconst WithBalloon: React.FC = (props: Props) => {\n const {\n children,\n renderContent,\n balloonContent,\n renderBalloonContent,\n balloonDisabled,\n border,\n } = props;\n const baseClass = 'vb-withBalloon';\n const wrapperRef = React.useRef(null);\n const uniqueId = useUniqueId(baseClass);\n\n const {\n balloonIsVisibleByHover,\n clearHoverFlags,\n handleTargetMouseEnter,\n handleTargetMouseLeave,\n handleBalloonMouseEnter,\n handleBalloonMouseLeave,\n position,\n verticalPosition,\n adjustPosition,\n baseRef,\n balloonRef,\n } = useBalloon();\n const [focused, setFocused] = React.useState(false);\n const showBalloon = !balloonDisabled && (balloonIsVisibleByHover || focused);\n const balloonId = `${uniqueId}__balloonWrapper`;\n\n React.useEffect(() => {\n const handleEsc = (e: KeyboardEvent) => {\n if (e.key === Keys.ESC) {\n clearHoverFlags();\n setFocused(false);\n }\n };\n if (showBalloon) {\n window.addEventListener('keydown', handleEsc);\n return () => window.removeEventListener('keydown', handleEsc);\n }\n }, [showBalloon, clearHoverFlags]);\n\n return (\n \n {/* フォーカス可能なものがrenderContentに存在しなかった場合に、無理やりフォーカスする挙動を作るために、FocusTrapを使用している */}\n {\n // Shift+Tabでフォーカスを外に出そうとしたときの挙動\n // 前のほうのフォーカス可能な要素を探してフォーカスする\n const target = baseRef.current\n ? findNextFocusable(baseRef.current, true)\n : undefined;\n if (target) {\n (target as HTMLElement).focus();\n }\n return true;\n }}\n onFocusInsideBottom={() => {\n // Tabでフォーカスを外に出そうとしたときの挙動\n // 後ろのほうのフォーカス可能な要素を探してフォーカスする\n const target = baseRef.current\n ? findNextFocusable(baseRef.current)\n : undefined;\n if (target) {\n (target as HTMLElement).focus();\n }\n return true;\n }}\n onFocusOutsideTop={() => {\n // Tabでフォーカスを内側に入れるときの挙動\n // フォーカス可能なものがあればそれに、無ければwrapperにフォーカスを移す\n if (wrapperRef.current) {\n const focusable = getFocusableElements(wrapperRef.current);\n if (focusable.length > 0) {\n (focusable.item(0) as HTMLElement).focus();\n } else {\n wrapperRef.current.focus();\n }\n }\n return true;\n }}\n onFocusOutsideBottom={() => {\n // Shift+Tabでフォーカスを内側に入れるときの挙動\n // フォーカス可能なものがあればそれに、無ければwrapperにフォーカスを移す\n if (wrapperRef.current) {\n const focusable = getFocusableElements(wrapperRef.current);\n if (focusable.length > 0) {\n (focusable.item(focusable.length - 1) as HTMLElement).focus();\n } else {\n wrapperRef.current.focus();\n }\n }\n return true;\n }}\n >\n setFocused(true)}\n onBlur={() => setFocused(false)}\n >\n {renderContent ? renderContent(balloonId) : children}\n \n \n {\n clearHoverFlags();\n setFocused(false);\n }}\n onScroll={adjustPosition}\n data-masking={props['data-masking']}\n >\n \n \n {renderBalloonContent\n ? renderBalloonContent(showBalloon)\n : balloonContent}\n \n
\n \n \n );\n};\n\nexport default WithBalloon;\n" }, { "path": "src/lv2/withBalloon/useBalloon.ts", "content": "import * as React from 'react';\n\n// バルーンが表示されるまでの時間（ミリ秒）\n// マウスがちょっとアイコンを通過しただけとかを無視できるよう、ある程度待ってから表示されるようにする\nconst BALLOON_SHOW_DELAY = 200;\n// バルーンが消えるまでの時間（ミリ秒）\n// アイコンからバルーン内へのマウス移動時に消えてしまいにくいよう、ある程度待ってから消えるようにしている\nconst BALLOON_HIDE_DELAY = 400;\n\nexport const useBalloon = () => {\n const [targetHovered, setTargetHovered] = React.useState(false);\n const [balloonHovered, setBalloonHovered] = React.useState(false);\n const hoverTimeoutRef = React.useRef(null);\n const messageHoverTimeoutRef = React.useRef(null);\n const baseRef = React.useRef(null);\n const balloonRef = React.useRef(null);\n\n const [position, setPosition] = React.useState<'left' | 'right' | 'center'>(\n 'center'\n );\n const [verticalPosition, setVerticalPosition] = React.useState<\n 'top' | 'bottom'\n >('top');\n\n const handleMouseHover = (entered: boolean) => {\n if (hoverTimeoutRef.current) {\n window.clearTimeout(hoverTimeoutRef.current);\n }\n hoverTimeoutRef.current = window.setTimeout(\n () => setTargetHovered(entered),\n entered ? BALLOON_SHOW_DELAY : BALLOON_HIDE_DELAY\n );\n };\n\n const handleTargetMouseEnter = (): void => {\n handleMouseHover(true);\n };\n const handleTargetMouseLeave = (): void => {\n handleMouseHover(false);\n };\n const handleBalloonMouseEnter = (): void => {\n if (messageHoverTimeoutRef.current) {\n window.clearTimeout(messageHoverTimeoutRef.current);\n }\n hoverTimeoutRef.current = null;\n setBalloonHovered(true);\n };\n const handleBalloonMouseLeave = (): void => {\n if (messageHoverTimeoutRef.current) {\n window.clearTimeout(messageHoverTimeoutRef.current);\n }\n\n messageHoverTimeoutRef.current = window.setTimeout(\n () => setBalloonHovered(false),\n BALLOON_HIDE_DELAY\n );\n };\n\n const clearHoverFlags = () => {\n if (hoverTimeoutRef.current) {\n window.clearTimeout(hoverTimeoutRef.current);\n hoverTimeoutRef.current = null;\n }\n if (messageHoverTimeoutRef.current) {\n window.clearTimeout(messageHoverTimeoutRef.current);\n messageHoverTimeoutRef.current = null;\n }\n setTargetHovered(false);\n setBalloonHovered(false);\n };\n\n // アンマウント時にタイムアウトを破棄する\n React.useEffect(() => {\n return () => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n if (messageHoverTimeoutRef.current) {\n clearTimeout(messageHoverTimeoutRef.current);\n }\n };\n }, [hoverTimeoutRef, messageHoverTimeoutRef]);\n\n const adjustPosition = () => {\n if (!baseRef.current || !balloonRef.current) {\n return;\n }\n const rect = baseRef.current.getBoundingClientRect();\n const balloonRect = balloonRef.current.getBoundingClientRect();\n\n const horizontalCenter = rect.left + rect.width / 2;\n\n if (horizontalCenter < balloonRect.width / 2) {\n setPosition('left');\n } else if (horizontalCenter > window.innerWidth - balloonRect.width / 2) {\n setPosition('right');\n } else {\n setPosition('center');\n }\n\n if (rect.top < balloonRect.height + 16) {\n setVerticalPosition('bottom');\n } else {\n setVerticalPosition('top');\n }\n };\n\n React.useLayoutEffect(() => {\n adjustPosition();\n }, [targetHovered, balloonHovered]);\n\n return {\n balloonIsVisibleByHover: targetHovered || balloonHovered,\n handleTargetMouseEnter,\n handleTargetMouseLeave,\n handleBalloonMouseEnter,\n handleBalloonMouseLeave,\n clearHoverFlags,\n position,\n verticalPosition,\n adjustPosition,\n baseRef,\n balloonRef,\n };\n};\n" }, { "path": "src/lv2/withDropdown/WithDropdown.stories.tsx", "content": "import * as React from 'react';\n\nimport { action } from '@storybook/addon-actions';\nimport WithDropdown from './WithDropdown';\nimport { boolean } from '@storybook/addon-knobs';\n\nexport default {\n component: WithDropdown,\n};\n\nexport const WithDropdownComponent = () => {\n const disabled = boolean('disabled', false, 'WithDropdown');\n return (\n (\n で実装した例を載せています。\n // あくまでメニューの開閉ボタンはボタンであり、本来\n )}\n onFilterChange={action('onFilterChange')}\n onOpen={action('onOpen')}\n render={(dropdownId, isOpen, buttonRef, togglePopup) => (\n で実装した例を載せています。\n // あくまでメニューの開閉ボタンはボタンであり、本来
\n );\n};\n\ntype FixedItem = {\n disableOnRequestClose?: boolean;\n isVisible: (filterValue: string) => boolean;\n label: React.ReactNode | ((filterValue: string) => React.ReactNode);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onSelect: (filterValue: string) => any;\n};\n\nexport type FilterableDropdownContent = (\n | DropdownContentCheckbox\n | DropdownContentSelectable\n) & {\n /**\n * 項目の読みがなやショートカットコードを指定してください（複数指定可能）\n */\n keywords?: string[];\n};\ntype Props = Pick[0], 'render' | 'disabled'> & {\n /**\n * メニューの項目です。`keywords` として、複数の読みがなやショートカットコードを指定できます。\n */\n dropdownContents: FilterableDropdownContent[];\n /**\n * `SearchField` の変化時に発火します\n */\n onFilterChange?: React.ChangeEventHandler;\n /**\n * Dropdownの展開時に発火します\n */\n onOpen?: () => void;\n /**\n * スピナーを表示します。\n */\n isLoading?: boolean;\n /**\n * リストの最後尾に追加するアイテム 一つ目はもっと見る、二つ目新規登録を想定しています\n */\n fixedItems?: FixedItem[];\n noResultsMessage?: React.ReactNode;\n noDataMessage?: React.ReactNode;\n renderDropdownBottomContent?: (requestClose: () => void) => React.ReactNode;\n} & CommonProps;\n\n/**\n * ボタン部分のカスタマイズがどうしても必要な場合を除いて `FilterableDropdownButton` を使用してください。\n */\nconst WithFilterableDropdown: React.FC = (props: Props) => {\n const {\n disabled,\n dropdownContents,\n fixedItems = [],\n isLoading,\n onFilterChange,\n onOpen,\n render,\n noResultsMessage,\n noDataMessage,\n renderDropdownBottomContent,\n } = props;\n const [filterValue, setFilterValue] = React.useState('');\n const menuContentRef = React.useRef(null);\n\n const handleFilterChange = (e: React.ChangeEvent) => {\n setFilterValue(e.target.value);\n onFilterChange && onFilterChange(e);\n };\n\n const filteredContents =\n filterValue.length > 0\n ? dropdownContents.filter(\n (c) =>\n (c.type === 'checkbox' && c.checked) ||\n (typeof c.text === 'string' && c.text.indexOf(filterValue) >= 0) ||\n (c.keywords &&\n c.keywords.some((k) =>\n filterValue\n .toLowerCase()\n .split(/\\s+/)\n .every((word) => k.toLowerCase().indexOf(word) >= 0)\n ))\n )\n : dropdownContents;\n\n const visibleContents = [\n ...filteredContents,\n ...fixedItems\n .filter((fixedItem) => fixedItem.isVisible(filterValue))\n .map(\n ({ label, onSelect, disableOnRequestClose }) =>\n ({\n type: 'selectable',\n text: typeof label === 'function' ? label(filterValue) : label,\n onClick: () => onSelect(filterValue),\n disableOnRequestClose,\n } as DropdownContentSelectable)\n ),\n ];\n\n const memorizedOnClose = React.useCallback(\n () => setFilterValue(''),\n [setFilterValue]\n );\n\n return (\n (\n \n \n \n )}\n {...pickCommonProps(props)}\n />\n );\n};\n\nexport default WithFilterableDropdown;\n" }, { "path": "src/lv2/withPopup/WithPopup.stories.tsx", "content": "import * as React from 'react';\n\nimport WithPopup from './WithPopup';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\nimport { commonKnobs } from '../../../stories';\nimport PopupBase from '../../lv1/bases/PopupBase';\nimport Button from '../../lv1/buttons/Button';\nimport Paragraph from '../../lv1/typography/Paragraph';\nimport TextField from '../../lv1/forms/TextField';\nimport TaskDialog from '../dialogs/TaskDialog';\nimport Container from '../../lv1/bases/Container';\n\nexport default {\n component: WithPopup,\n};\n\nexport const WithWithPopupComponent = () => {\n const disabled = boolean('disabled', false, 'WithPopup');\n return (\n (\n で実装した例を載せています。\n // あくまでメニューの開閉ボタンはボタンであり、本来\n \n \n )}\n disabled={disabled}\n onOpen={action('open')}\n onClose={action('close')}\n {...commonKnobs()}\n >\n );\n};\n\nexport const MultipleComponents = () => (\n <>\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose, firstSelectableItemRef) => (\n \n }\n onClick={() => requestClose()}\n mr={1}\n >\n ボタン1\n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose, firstSelectableItemRef) => (\n \n }\n onClick={() => requestClose()}\n mr={1}\n >\n ボタン1\n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n \n);\n\nexport const WithoutFirstSelectableItemRef = () => (\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose) => (\n \n \n firstSelectableItemRef\n 使わない場合、最初にTabキーでフォーカスするのはPopupになります。\n \n \n ボタンやフォームコントロールより前に説明を乗せたりする場合はfirstSelectableItemRefを使わないようにすると良いです\n \n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n);\nexport const InBigBlock = () => (\n
\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose, firstSelectableItemRef) => (\n \n }\n onClick={() => requestClose()}\n mr={1}\n >\n ボタン1\n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n
\n);\n\nconst TaskDialogSample = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n return (\n <>\n \n\n {\n setIsOpen(false);\n }}\n title=\"TaskDialog\"\n isOpen={isOpen}\n closeButtonLabel=\"閉じる\"\n >\n
\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose, firstSelectableItemRef) => (\n \n \n }\n onClick={() => requestClose()}\n mr={1}\n >\n ボタン1\n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n
\n \n \n );\n};\n\nexport const InsideTaskDialog = () => ;\nexport const InsideContainer = () => (\n \n
\n (\n }\n >\n 開閉ボタン\n \n )}\n renderPopup={(requestClose, firstSelectableItemRef) => (\n \n }\n onClick={() => requestClose()}\n mr={1}\n >\n ボタン1\n \n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n
\n \n);\n\nexport const OpenCloseCallback = () => {\n const [log, setLog] = React.useState([]);\n return (\n <>\n (\n \n \n \n )}\n render={(popupId, isOpen, controlRef) => (\n }\n >\n Open Popup\n \n )}\n onOpen={() => setLog(log.concat(['open']))}\n onClose={() => setLog(log.concat(['close']))}\n />\n \n {log.map((e, i) => (\n
{e}
\n ))}\n \n \n );\n};\n\nconst InputSupportExample = () => {\n const [handling, setHandling] = React.useState(false);\n const [value, setValue] = React.useState(0);\n\n React.useEffect(() => {\n if (handling) {\n const closeMenu = () => {\n setHandling(false);\n };\n window.addEventListener('click', closeMenu);\n return () => window.removeEventListener('click', closeMenu);\n }\n }, [handling]);\n return (\n (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n e.stopPropagation()}\n onKeyDown={() => {\n /* do nothing */\n }}\n >\n setValue(Number(e.target.value))}\n aria-controls={popupId}\n aria-haspopup={true}\n aria-expanded={isOpen}\n role=\"combobox\"\n ref={controlRef as React.RefObject}\n onFocus={() => {\n if (!handling) {\n toggleOpen(true);\n setHandling(true);\n }\n }}\n onBlur={() => {\n if (!isOpen) {\n setHandling(false);\n }\n }}\n onKeyDown={(e) => {\n if (e.keyCode === 27 /* ESC */) {\n toggleOpen(false);\n } else if (e.keyCode !== 9 /* TAB */) {\n toggleOpen(true);\n }\n }}\n />\n \n )}\n renderPopup={(_requestClose, firstSelectableItemRef) => (\n \n }\n onClick={() => {\n setValue(value + 1);\n }}\n mr={1}\n >\n +1\n \n {\n setValue(value + 10);\n }}\n mr={1}\n >\n +10\n \n {\n setValue(value + 100);\n }}\n mr={1}\n >\n +100\n \n \n )}\n disabled={boolean('disabled', false, 'WithPopup')}\n {...commonKnobs()}\n >\n );\n};\n\nexport const InputSupport = () => (\n <>\n \n 入力サポートUIみたいなものを作れないか実験してみているサンプル\n \n \n \n);\n" }, { "path": "src/lv2/withPopup/WithPopup.tsx", "content": "import * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\nimport ScrollPortal from '../../utilities/ScrollPortal';\nimport { Keys } from '../../utilities/keyboard';\nimport useUniqueId from '../../hooks/useUniqueId';\nimport { FocusTrap } from '../../lv1';\nimport Button from '../../lv1/buttons/Button';\nimport VisuallyHidden from '../../lv1/a11y/VisuallyHidden';\n\ntype Props = {\n /**\n * ポップアップ開閉コントロール描画用 render function\n *\n * - `popupId` を開閉コントロールの `aria-controls` に渡してください\n * - `isOpen` を開閉コントロールの `aria-expanded` に渡してください\n * - `controlRef` を開閉コントロールの `ref` に渡してください\n * - `togglePopup` はクリック以外のタイミングでポップアップを開閉したい際に使用してください。\n */\n render: (\n /**\n * ポップアップのid: ボタンのaria-controlsに渡してください\n */\n popupId: string,\n /**\n * ドロップダウンメニューの開閉状況: ボタンのaria-expandedに渡してください\n */\n isOpen: boolean,\n /**\n * 開閉コントロールのrefに渡してください\n */\n controlRef: React.RefObject,\n /**\n * 強制的に表示/非表示を切り替えます。要素のクリック以外のタイミングでポップアップを開閉する際に使用します。\n */\n togglePopup: (open: boolean) => void\n ) => React.ReactNode;\n /**\n * ポップアップ描画用 render function\n *\n * - requestClose を呼ぶことでポップアップを閉じさせます\n * - firstSelectedItemRef は、フォーカス可能な要素のうち最初の要素のrefに渡してください。\n * - フォーカス可能な要素より前に説明文等がある場合は、firstSelectedItemRef をどの要素にも渡さないでください\n */\n renderPopup: (\n /**\n * これを呼ぶことでポップアップを閉じます\n */\n requestClose: () => void,\n /**\n * - フォーカス可能な要素のうち最初の要素のrefに渡してください。\n * - フォーカス可能な要素より前に説明文等がある場合は、firstSelectedItemRef をどの要素にも渡さないでください\n */\n firstSelectableItemRef: React.RefObject,\n /**\n * renderに渡さるのと同じRefオブジェクトです。ボタンへの参照として使用し、ref属性には渡さないでください。\n */\n controlRefDoNotUseAsRefAttribute: React.RefObject\n ) => React.ReactNode;\n disabled?: boolean;\n /**\n * popupを開いた時に発火します。useEffectのトリガーになるためメモ化したものを渡すことを推奨します。\n */\n onOpen?: () => void;\n /**\n * popupを閉じた時に発火します。useEffectのトリガーになるためメモ化したものを渡すことを推奨します。\n */\n onClose?: () => void;\n} & CommonProps;\n\n/**\n * ポップアップを実装するためのコンポーネントです。\n *\n * - ボタンからドロップダウンメニューを表示したい場合は、 `DropdownButton` コンポーネントを使用してください\n * - 作ろうとしている機能と同じ機能を持つコンポーネントが存在する場合はそちらを使用してください。このコンポーネントは扱いが面倒です。\n * - `render` の引数は以下のように使用してください\n * - `popupId` を開閉コントロールの `aria-controls` に渡してください\n * - `isOpen` を開閉コントロールの `aria-expanded` に渡してください\n * - `controlRef` を開閉コントロールの `ref` に渡してください\n * - `renderPopup` の引数は以下のように使用してください\n * - requestClose を呼ぶことでポップアップを閉じさせます\n * - firstSelectedItemRef は、フォーカス可能な要素のうち最初の要素のrefに渡してください。\n * - フォーカス可能な要素より前に説明文等がある場合は、firstSelectedItemRef をどの要素にも渡さないでください\n */\nconst WithPopup: React.FC = (props: Props) => {\n const { render, disabled, renderPopup, onOpen, onClose } = props;\n const baseClass = 'vb-withPopup';\n const [open, setOpen] = React.useState(false);\n const firstSelectableItemRef = React.useRef(null);\n const popupRef = React.useRef(null);\n\n const contentWrapperRef = React.useRef(null);\n const [horizontalPosition, setHorizontalPosition] = React.useState<\n 'left' | 'right'\n >('left');\n const [verticalPosition, setVerticalPosition] = React.useState<\n 'top' | 'bottom'\n >('bottom');\n const uid = useUniqueId(baseClass);\n const popupId = `${uid}__popup`;\n const controlRef = React.useRef(null);\n\n const adjustPosition = () => {\n if (!(contentWrapperRef.current && popupRef.current)) {\n return;\n }\n const buttonRect = contentWrapperRef.current.getBoundingClientRect();\n const popupRect = popupRef.current.getBoundingClientRect();\n\n setHorizontalPosition(\n buttonRect.left + popupRect.width > document.documentElement.clientWidth\n ? 'right'\n : 'left'\n );\n setVerticalPosition(\n buttonRect.bottom + popupRect.height >\n document.documentElement.clientHeight &&\n buttonRect.bottom > popupRect.height\n ? 'top'\n : 'bottom'\n );\n };\n\n const openCallbackFlagRef = React.useRef(false);\n const closeCallbackFlagRef = React.useRef(false);\n\n const openMenu = () => {\n setOpen(true);\n openCallbackFlagRef.current = true;\n };\n const closeMenu = React.useCallback(() => {\n setOpen(false);\n closeCallbackFlagRef.current = true;\n }, []);\n\n const openCallback = React.useCallback(() => {\n if (openCallbackFlagRef.current) {\n onOpen?.();\n openCallbackFlagRef.current = false;\n }\n }, [onOpen]);\n const closeCallback = React.useCallback(() => {\n if (closeCallbackFlagRef.current) {\n onClose?.();\n closeCallbackFlagRef.current = false;\n }\n }, [onClose]);\n\n React.useEffect(() => {\n if (open) {\n openCallback();\n // 開いた瞬間にwindowにイベントが伝播して閉じてしまうのを防ぐため、setTimeoutしてaddEventListenerを遅らせている\n setTimeout(() => {\n (firstSelectableItemRef.current || popupRef.current)?.focus();\n window.addEventListener('click', closeMenu);\n });\n return () => window.removeEventListener('click', closeMenu);\n } else {\n closeCallback();\n }\n }, [closeMenu, open, openCallback, closeCallback]);\n\n React.useLayoutEffect(() => {\n adjustPosition();\n }, [open]);\n\n const requestClose = () => {\n closeMenu();\n if (controlRef.current) {\n controlRef.current.focus();\n }\n };\n\n const togglePopup = (open: boolean) => {\n if (disabled) {\n return;\n }\n if (open) {\n openMenu();\n } else {\n closeMenu();\n }\n if (controlRef.current) {\n controlRef.current.focus();\n }\n };\n\n const popupWrapper = () => {\n return (\n \n
\n {\n if (controlRef.current) {\n controlRef.current.focus();\n } else if (popupRef.current) {\n popupRef.current.focus();\n }\n return true;\n }}\n onFocusInsideBottom={() => {\n if (controlRef.current) {\n controlRef.current.focus();\n } else if (popupRef.current) {\n popupRef.current.focus();\n }\n return true;\n }}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n {\n e.stopPropagation();\n if (e.key === Keys.ESC) {\n closeMenu();\n if (controlRef.current) {\n controlRef.current.focus();\n }\n }\n }}\n onClick={(e) => e.stopPropagation()}\n ref={popupRef}\n >\n {renderPopup(requestClose, firstSelectableItemRef, controlRef)}\n
\n \n {/* iOS VoiceOver/Android Talkbackでポップアップを閉じられるように明示的に閉じるUIを置いておく */}\n \n \n \n
\n \n );\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n {\n open && e.stopPropagation();\n if (!disabled) {\n if (open) {\n closeMenu();\n } else {\n openMenu();\n }\n }\n }}\n onKeyDown={(e) => {\n if (!open) {\n return;\n }\n if (\n (e.key === Keys.TAB || e.key === Keys.DOWN) &&\n (popupRef.current || firstSelectableItemRef.current)\n ) {\n e.preventDefault();\n if (firstSelectableItemRef.current) {\n firstSelectableItemRef.current.focus();\n } else if (popupRef.current) {\n popupRef.current.focus();\n }\n }\n }}\n >\n {/* Dropdownの位置調整は、contentWrapperをdisplay:blockにして、これを基準にする */}\n \n {render(popupId, open, controlRef, togglePopup)}\n \n closeMenu()}\n popupRef={popupRef}\n data-masking={props['data-masking']}\n >\n {popupWrapper()}\n \n \n );\n};\nexport default WithPopup;\n" }, { "path": "src/lv2/withTOC/WithTOC.stories.tsx", "content": "import React, { useMemo } from 'react';\n\nimport { MdHome } from 'react-icons/md';\nimport {\n Colors2021GY02,\n ColumnBase,\n GlobalNavi,\n MarginBase,\n PageTitle,\n Paragraph,\n SectionTitle,\n WithTOC,\n} from '../../';\nimport { commonKnobs } from '../../../stories';\n\nexport default {\n component: WithTOC,\n};\n\nconst Skelton = () => (\n \n \n \n \n);\n\nexport const WithTOCComponent = () => {\n const contents = useMemo(\n () =>\n ['Section 1', 'Section 2', 'Lorem ipsum dolor sit amet'].map(\n (label, i) => ({\n id: `WithTOCComponent--section${i}`,\n label,\n content: (\n \n {label}\n \n \n ),\n })\n ),\n []\n );\n return ;\n};\n\nexport const OffsetExample = () => {\n const contents = useMemo(\n () =>\n [\n 'Section 1',\n 'Section 2',\n 'セクション３',\n 'Lorem ipsum dolor sit amet',\n '寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末',\n ].map((label, i) => ({\n id: `OffsetExample--section${i}`,\n label,\n content: (\n \n {label}\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam\n vitae ligula id augue ultrices mollis vitae eget neque.\n Pellentesque nibh ex, dictum ac tempor eget, mollis a nulla. Sed\n semper velit lectus, eu convallis tellus dapibus nec. Orci varius\n natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Fusce eget enim nunc. Morbi ac egestas mi. Integer\n aliquet quam vel commodo molestie.\n \n {[...Array(5)].map((_, n) => (\n \n \n \n ))}\n \n ),\n })),\n []\n );\n\n return (\n \n
\n \n
\n \n Lorem Ipsum Dolor\n \n {[...Array(3)].map((_, n) => (\n \n \n \n ))}\n \n {[...Array(10)].map((_, n) => (\n \n \n \n ))}\n
\n );\n};\n" }, { "path": "src/lv2/withTOC/WithTOC.tsx", "content": "import React, { useMemo, useRef } from 'react';\nimport { Link } from 'react-scroll';\nimport commonProps, { CommonProps } from '../../utilities/commonProps';\n\ntype WithTOCContent = {\n id: string;\n label: string;\n content: React.ReactNode;\n};\n\ntype Props = {\n /**\n * Content bodies and definitions across each sections.\n * 項目ごとの内容および定義一覧。\n *\n * - `id`: Section ID which users can refer to as an anchor. アンカーとして利用される、各項目ごとの要素ID。\n * - `label`: Section name appears in the ToC. 目次に表示される項目名。\n * - `content`: Body of each sections. 各項目の内容。\n */\n contents: Array;\n\n /**\n * Container to perform scrolling in.\n * スクロールさせる親コンテナ要素。\n */\n containerID?: string;\n\n /**\n * Scroll position offset from top in screen pixels (`px`).\n * スクロールのオフセット値を指定。\n */\n offsetTop?: number;\n\n /**\n * Callback fired on ToC link clicks.\n * 目次のリンク押下時に呼び出されるコールバック。\n *\n * Usage example: `id => history.push({ hash: id })`\n */\n onNavigateTo?: (id: string) => void;\n} & CommonProps;\n\n/**\n * `` represents a list of content sections with an automatically generated table of contents.\n * 目次付きのコンテンツリストです。\n */\nconst WithTOC: React.FC = (props: Props) => {\n const baseClass = 'vb-withTOC';\n const { containerID, contents, offsetTop, onNavigateTo } = props;\n\n const contentsRef = useRef(null);\n\n const toc = useMemo(\n () =>\n contents.map((c) => (\n
  • \n {\n (\n contentsRef.current?.querySelector(\n `.${baseClass}__contents__section#${c.id}`\n ) as HTMLElement | null\n )?.focus({ preventScroll: true });\n onNavigateTo && onNavigateTo(c.id);\n }}\n containerId={containerID}\n offset={offsetTop && 0 - offsetTop}\n smooth=\"easeOutCubic\"\n duration={500}\n spy\n hashSpy\n >\n {c.label}\n \n
    • \n )),\n [containerID, contents, offsetTop, onNavigateTo]\n );\n\n const bodies = useMemo(\n () =>\n contents.map((c) => (\n \n {c.content}\n \n )),\n [contents]\n );\n\n const containerStyle = useMemo(\n () => (offsetTop ? { top: `${offsetTop}px` } : {}),\n [offsetTop]\n );\n\n return (\n
    \n \n
    \n {bodies}\n
    \n
    \n );\n};\nexport default WithTOC;\n" }, { "path": "src/utilities/AriaProps.ts", "content": "/*\n roleごとに使用できるaria属性を定義しておくことで、WAI-ARIAを扱う上で便利にしたいものの、量が多くてしんどそう。\n 普段使わないものまでここに定義していくのはしんどいので、よく使うもの/必要になったものを定義していっています。\n */\n\ntype AriaExpandedT = boolean;\ntype AriaPressedT = boolean | 'mixed';\ntype AriaControlsT = string;\ntype AriaOwnsT = string;\ntype AriaHaspopupT = boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\ntype AriaDescribedbyT = string;\ntype AriaActivedescendantT = string;\ntype AriaAutocompleteT = 'inline' | 'list' | 'both' | 'none';\ntype AriaAtomicT = boolean;\ntype AriaNumberValueT = number;\ntype AriaLevelT = number;\ntype AriaSetSizeT = number;\ntype AriaPosinsetT = number;\n\nexport type ButtonAriaProps = {\n 'aria-expanded'?: AriaExpandedT;\n 'aria-pressed'?: AriaPressedT;\n 'aria-controls'?: AriaControlsT;\n 'aria-owns'?: AriaOwnsT;\n 'aria-haspopup'?: AriaHaspopupT;\n 'aria-describedby'?: AriaDescribedbyT;\n 'aria-atomic'?: AriaAtomicT;\n};\n\nexport type LinkAriaProps = {\n 'aria-expanded'?: AriaExpandedT;\n 'aria-controls'?: AriaControlsT;\n 'aria-owns'?: AriaOwnsT;\n 'aria-haspopup'?: AriaHaspopupT;\n 'aria-describedby'?: AriaDescribedbyT;\n 'aria-atomic'?: AriaAtomicT;\n};\n\nexport type TextBoxAriaProps = {\n 'aria-expanded'?: AriaExpandedT;\n 'aria-activedescendant'?: AriaActivedescendantT;\n 'aria-controls'?: AriaControlsT;\n 'aria-owns'?: AriaOwnsT;\n 'aria-haspopup'?: AriaHaspopupT;\n 'aria-describedby'?: AriaDescribedbyT;\n 'aria-autocomplete'?: AriaAutocompleteT;\n 'aria-atomic'?: AriaAtomicT;\n};\n\nexport type NumberInputAriaProps = {\n 'aria-valuemin'?: AriaNumberValueT;\n 'aria-valuemax'?: AriaNumberValueT;\n 'aria-valuenow'?: AriaNumberValueT;\n};\n\nexport type TableRowAriaProps = {\n 'aria-level'?: AriaLevelT;\n 'aria-setsize'?: AriaSetSizeT;\n 'aria-posinset'?: AriaPosinsetT;\n 'aria-expanded'?: AriaExpandedT;\n};\n\nexport function filterButtonAriaProps(props: ButtonAriaProps): ButtonAriaProps {\n return {\n 'aria-expanded': props['aria-expanded'],\n 'aria-pressed': props['aria-pressed'],\n 'aria-controls': props['aria-controls'],\n 'aria-owns': props['aria-owns'],\n 'aria-haspopup': props['aria-haspopup'],\n 'aria-describedby': props['aria-describedby'],\n 'aria-atomic': props['aria-atomic'],\n };\n}\n\nexport function filterLinkAriaProps(props: LinkAriaProps): LinkAriaProps {\n return {\n 'aria-expanded': props['aria-expanded'],\n 'aria-controls': props['aria-controls'],\n 'aria-owns': props['aria-owns'],\n 'aria-haspopup': props['aria-haspopup'],\n 'aria-describedby': props['aria-describedby'],\n 'aria-atomic': props['aria-atomic'],\n };\n}\n\nexport function filterTextBoxAriaProps(\n props: TextBoxAriaProps\n): TextBoxAriaProps {\n return {\n 'aria-expanded': props['aria-expanded'],\n 'aria-activedescendant': props['aria-activedescendant'],\n 'aria-controls': props['aria-controls'],\n 'aria-owns': props['aria-owns'],\n 'aria-haspopup': props['aria-haspopup'],\n 'aria-describedby': props['aria-describedby'],\n 'aria-autocomplete': props['aria-autocomplete'],\n 'aria-atomic': props['aria-atomic'],\n };\n}\n\nexport function filterNumberInputAriaProps(\n props: NumberInputAriaProps\n): NumberInputAriaProps {\n return {\n 'aria-valuemin': props['aria-valuemin'],\n 'aria-valuemax': props['aria-valuemax'],\n 'aria-valuenow': props['aria-valuenow'],\n };\n}\n\nexport function filterTableRowAriaProps(\n props: TableRowAriaProps\n): TableRowAriaProps {\n return {\n 'aria-expanded': props['aria-expanded'],\n 'aria-setsize': props['aria-setsize'],\n 'aria-posinset': props['aria-posinset'],\n 'aria-level': props['aria-level'],\n };\n}\n" }, { "path": "src/utilities/Ascii.test.ts", "content": "import { Ascii } from './Ascii';\n\ndescribe('Ascii', () => {\n const zenkaku =\n '１２３４５６７８９０－＝ｑｗｅｒｔｙｕｉｏｐ［］＼ａｓｄｆｇｈｊｋｌ；＇ｚｘｃｖｂｎｍ，．／！＠＃＄％＾＆＊（）＿＋ＱＷＥＲＴＹＵＩＯＰ｛｝｜ＡＳＤＦＧＨＪＫＬ：＂ＺＸＣＶＢＮＭ＜＞？';\n const hankaku =\n '1234567890-=qwertyuiop[]\\\\asdfghjkl;\\'zxcvbnm,./!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?';\n describe('zenkakuToHankaku', () => {\n it('converts zenkaku to ASCII code', () => {\n const subject = Ascii.zenkakuToHankaku(zenkaku);\n expect(subject).toEqual(hankaku);\n });\n it('converts not convert hankaku', () => {\n const subject = Ascii.zenkakuToHankaku(hankaku);\n expect(subject).toEqual(hankaku);\n });\n });\n describe('hankakuToZenkaku', () => {\n it('converts hankaku to zenkaku code', () => {\n const subject = Ascii.hankakuToZenkaku(hankaku);\n expect(subject).toEqual(zenkaku);\n });\n it('converts not convert zenkaku', () => {\n const subject = Ascii.hankakuToZenkaku(zenkaku);\n expect(subject).toEqual(zenkaku);\n });\n });\n});\n" }, { "path": "src/utilities/Ascii.ts", "content": "const hankakuToZenkaku = (str: string): string => {\n // 全角スペースは離れてるので先にやる\n return str.replace(/\\u0020/g, '\\u3000').replace(\n // 半角「!」(0021) から半角チルダ(007E)\n /[\\u0021-\\u007E]/g,\n (s) => String.fromCharCode(s.charCodeAt(0) + 0xfee0)\n );\n};\n\nconst zenkakuToHankaku = (str: string): string => {\n // 全角スペースは離れてるので先にやる\n return str.replace(/\\u3000/g, '\\u0020').replace(\n // 全角「！」(FF01)から全角チルダ(FF5E)\n /[\\uFF01-\\uFF5E]/g,\n (s) => String.fromCharCode(s.charCodeAt(0) - 0xfee0)\n );\n};\n\nexport const Ascii = { hankakuToZenkaku, zenkakuToHankaku };\n" }, { "path": "src/utilities/DOMUtil.ts", "content": "export const scrollableParent = (\n el: HTMLElement | null\n): HTMLElement | null => {\n if (\n !el ||\n el === window.document.documentElement ||\n el === window.document.body\n ) {\n return null;\n }\n const styles = window.getComputedStyle(el);\n if (\n ['auto', 'scroll'].indexOf(styles.overflowY) >= 0 ||\n ['auto', 'scroll'].indexOf(styles.overflowX) >= 0\n ) {\n return el;\n } else if (styles.position === 'fixed' || styles.position === 'sticky') {\n return window.document.body;\n }\n return scrollableParent(el.parentElement);\n};\n" }, { "path": "src/utilities/Dialog.tsx", "content": "import * as React from 'react';\nimport Modal from 'react-modal';\nimport useUniqueId from '../hooks/useUniqueId';\nimport { usePortalParentContext } from '../utilities/VibesProvider';\n\nconst overlayStyle: React.CSSProperties = {\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n display: 'flex',\n};\nconst contentStyle: React.CSSProperties = {\n alignSelf: 'center',\n position: 'static',\n background: 'transparent',\n borderRadius: 0,\n border: 0,\n top: 'auto',\n left: 'auto',\n right: 'auto',\n bottom: 'auto',\n padding: 0,\n margin: 'auto',\n};\n\ntype DialogProps = {\n /**\n * ダイアログのid属性を指定します。\n * 指定しない場合は、重複しないように生成された文字列が使用されます。\n */\n id?: string;\n /**\n * アラートダイアログ（他のダイアログの上に表示されるダイアログ）の場合はtrueにしてください\n */\n alertDialog: boolean;\n render: (props: {\n /**\n * モーダルの固有のidが指定されます\n */\n id: string;\n /**\n * モーダルのタイトルを表示する要素のidが指定されます\n * aria-labelledbyに使用されるため、必ずタイトルを表示する要素にidとして渡してください\n */\n titleId: string;\n }) => React.ReactNode;\n /**\n * ダイアログの開閉状態を指定します\n */\n isOpen: boolean;\n /**\n * Close ボタンの click ハンドラを設定します。\n */\n onRequestClose: React.MouseEventHandler;\n /**\n * `true` のとき、ダイアログの外（オーバーレイ部分）のクリックまたは、Escキーの押下によりダイアログを閉じられるようにします。\n * ユーザーの意図しないタイミングで閉じられることがない場合のみ、`true` にしてください。\n */\n shouldCloseOnOverlayClickOrEsc: boolean;\n /**\n * ダイアログを閉じたときにフォーカスする要素を指定します。\n * 指定しない場合には、ダイアログが開く直前にフォーカスしていた要素にフォーカスします。\n */\n elementFocusAfterClose?: HTMLElement;\n /**\n * モーダルのaria-labelを指定できます。\n * 指定しなかった場合はaria-labelledbyによってタイトルの文言が参照されます。\n */\n contentLabel?: string;\n /**\n * react-modal の contentRef に渡す値です。\n */\n contentRef?: React.ComponentProps['contentRef'];\n};\n\nexport type DialogContentProps = {\n /**\n * ダイアログのid属性を指定します。\n */\n id?: string;\n /**\n * ダイアログの見出しのid属性を指定します\n */\n titleId?: string;\n} & Pick;\n\nconst Dialog = (props: DialogProps) => {\n const {\n id,\n alertDialog,\n render,\n isOpen,\n onRequestClose,\n shouldCloseOnOverlayClickOrEsc,\n elementFocusAfterClose,\n contentRef,\n } = props;\n const uniqueId = useUniqueId('vb-Dialog', id);\n const portalParent = usePortalParentContext();\n const titleId = `${uniqueId}__title`;\n\n return (\n {\n if (elementFocusAfterClose) {\n elementFocusAfterClose.focus();\n }\n }}\n style={{\n overlay: {\n ...overlayStyle,\n // $vbMessageModalZIndex もしくは $vbModalZIndex\n zIndex: alertDialog ? 1500 - 1 : 1000 - 1,\n },\n content: contentStyle,\n }}\n contentLabel={props.contentLabel}\n ariaHideApp={false}\n aria={{\n labelledby: props.contentLabel ? undefined : titleId,\n }}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClickOrEsc}\n shouldCloseOnEsc={shouldCloseOnOverlayClickOrEsc}\n // 閉じたときにフォーカスする要素が指定されている場合は、react-modalのフォーカスを戻す機構を使用しない\n shouldReturnFocusAfterClose={!elementFocusAfterClose}\n id={`${uniqueId}__screen`}\n bodyOpenClassName=\"vb-ReactModal__Body--open\"\n parentSelector={() => portalParent}\n contentRef={contentRef}\n closeTimeoutMS={300}\n >\n {render({ id: uniqueId, titleId })}\n \n );\n};\n\nexport default Dialog;\n" }, { "path": "src/utilities/Digits.test.ts", "content": "import { Digits } from './Digits';\n\ndescribe('Digits', () => {\n describe('formalize', () => {\n it('converts undefined to 0', () =>\n expect(Digits.formalize()).toEqual('0'));\n it('converts number to comma-separated', () =>\n expect(Digits.formalize(12345678)).toEqual('12,345,678'));\n it('converts string to comma-separated', () =>\n expect(Digits.formalize('12345678')).toEqual('12,345,678'));\n it('converts negative value', () =>\n expect(Digits.formalize('-12345678')).toEqual('-12,345,678'));\n it('converts float number', () => {\n expect(Digits.formalize('12345678.90123456')).toEqual(\n '12,345,678.90123456'\n );\n expect(Digits.formalize('-12345678.90123456')).toEqual(\n '-12,345,678.90123456'\n );\n });\n });\n describe('numberize', () => {\n it('converts number-string to number', () =>\n expect(Digits.numberize('1234')).toEqual(1234));\n it('ignores non-number string', () =>\n expect(Digits.numberize('a1b2c3d4')).toEqual(1234));\n it('convers negative value', () =>\n expect(Digits.numberize('-1234')).toEqual(-1234));\n });\n describe('toPercent', () => {\n it('converts number to percentage', () =>\n expect(Digits.toPercent(0.123456)).toEqual('12.346'));\n it('converts string to percentage', () =>\n expect(Digits.toPercent('0.123456')).toEqual('12.346'));\n it('uses toPercent', () =>\n expect(Digits.toPercent('0.123456', 2)).toEqual('12.35'));\n });\n});\n" }, { "path": "src/utilities/Digits.ts", "content": "/**\n * 数値の3桁毎に `,` を挿入した文字列を返す。小数点以下は `,` を挿入しない\n * @param str 数値または文字列化された数値\n */\nconst formalize = (str?: string | number): string => {\n return str\n ? String(str).replace(\n /^(-?\\d+)(\\..*)?/,\n (_matched, p1: string, p2?: string): string => {\n return `${p1.replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1,')}${p2 || ''}`;\n }\n )\n : '0';\n};\n\n/**\n * 文字列を数値にする\n * @param str 文字列化された数値\n */\nconst numberize = (str: string): number => {\n return Number(str.replace(/[^0-9\\-.]/g, ''));\n};\n\n/**\n * 数値からパーセントに変換する\n * @param val 数値または文字列化された数値\n * @param toFixed 桁数(デフォルトは3)\n */\nconst toPercent = (val: string | number, toFixed = 3): string => {\n return (Number(val) * 100).toFixed(toFixed);\n};\n\nexport const Digits = { formalize, numberize, toPercent };\n" }, { "path": "src/utilities/FixedPortal.tsx", "content": "" }, { "path": "src/utilities/FocusableEelements.ts", "content": "export const getFocusableElements = (el: HTMLElement) =>\n el.querySelectorAll(\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), *[tabindex]:not([tabindex=\"-1\"])'\n );\n\nexport const isFocusableElement = (el: Element): boolean => {\n if (el.getAttribute('aria-hidden') === 'true') {\n return false;\n }\n switch (el.tagName) {\n case 'A':\n return el.hasAttribute('href');\n case 'BUTTON':\n case 'INPUT':\n case 'TEXTAREA':\n case 'SELECT':\n return !el.hasAttribute('disabled');\n default:\n return (\n el.hasAttribute('tabindex') && el.getAttribute('tabindex') !== '-1'\n );\n }\n};\n" }, { "path": "src/utilities/Mins.ts", "content": "import { TimeString } from './TimeString';\n\nconst strToMin = (str: string): number => {\n const min = TimeString.getMin(str);\n const hour = TimeString.getHour(str);\n return hour * 60 + min;\n};\n\nconst minToStr = (min: number): string => {\n return TimeString.createTimeString(0, min);\n};\n\nexport const Mins = {\n strToMin,\n minToStr,\n};\n" }, { "path": "src/utilities/ScrollPortal.tsx", "content": "import * as React from 'react';\nimport { scrollableParent } from './DOMUtil';\nimport ReactDOM from 'react-dom';\nimport { usePortalParentContext } from '../utilities/VibesProvider';\n\ntype Props = {\n children: React.ReactNode;\n isActive: boolean;\n onOverflow?: () => void;\n onScroll?: () => void;\n portalTargetElement?: HTMLElement | undefined;\n positionalBaseElement: HTMLElement | undefined;\n verticalPosition?: 'top' | 'bottom';\n horizontalPosition?: 'left' | 'center' | 'right';\n popupRef?: React.RefObject;\n 'data-masking'?: boolean;\n};\n\n/**\n * children をスクロールに追従する要素でラップして Portal 化する\n */\nconst ScrollPortal: React.FC = ({\n children,\n isActive,\n onOverflow,\n onScroll,\n portalTargetElement,\n positionalBaseElement,\n verticalPosition = 'bottom',\n horizontalPosition = 'left',\n popupRef,\n ...props\n}: Props) => {\n const [listBoxLeft, setListBoxLeft] = React.useState('0');\n const [listBoxTop, setListBoxTop] = React.useState('0');\n const portalParent = usePortalParentContext();\n // positionalBaseElementが画面から隠れていればonOverflowを呼ぶ\n const checkScrollPosition = React.useCallback(() => {\n if (!(onOverflow && positionalBaseElement)) {\n return;\n }\n const scrollableElement = scrollableParent(positionalBaseElement);\n if (scrollableElement) {\n // positionalBaseElementの上端座標（scrollableElement相対）\n // スクロール量によって変動\n const topEdge =\n positionalBaseElement.getBoundingClientRect().top -\n scrollableElement.getBoundingClientRect().top;\n // positionalBaseElementの下端座標（scrollableElement相対）\n const bottomEdge =\n topEdge + positionalBaseElement.getBoundingClientRect().height;\n const leftEdge =\n positionalBaseElement.getBoundingClientRect().left -\n scrollableElement.getBoundingClientRect().left;\n const rightEdge =\n leftEdge + positionalBaseElement.getBoundingClientRect().width;\n // スクロールコンテンツの上端/下端/左端/右端に到達\n if (\n bottomEdge < 0 ||\n topEdge > scrollableElement.clientHeight ||\n rightEdge < 0 ||\n leftEdge > scrollableElement.clientWidth\n ) {\n onOverflow();\n return;\n }\n }\n }, [onOverflow, positionalBaseElement]);\n\n // positionalBaseElement の下端または上端につく形で位置を調整する\n const calculatePosition = React.useCallback(() => {\n if (!positionalBaseElement) {\n return;\n }\n const { left, top, bottom, height, width } =\n positionalBaseElement.getBoundingClientRect();\n\n setListBoxLeft(\n `${\n left +\n (horizontalPosition === 'right'\n ? width\n : horizontalPosition === 'center'\n ? width / 2\n : 0) +\n window.pageXOffset\n }px`\n );\n if (!popupRef) {\n setListBoxTop(\n `${\n top +\n (verticalPosition === 'bottom' ? height : 0) +\n window.pageYOffset\n }px`\n );\n } else {\n const popupHeight = popupRef.current?.getBoundingClientRect().height;\n if (verticalPosition === 'bottom') {\n setListBoxTop(`${top + height + window.pageYOffset}px`);\n } else {\n if (popupHeight) {\n setListBoxTop(\n `${bottom - popupHeight - height + window.pageYOffset}px`\n );\n }\n }\n }\n }, [popupRef, horizontalPosition, positionalBaseElement, verticalPosition]);\n\n // 要素がactiveになったら表示位置を再計算する\n React.useLayoutEffect(() => {\n if (!isActive) {\n return;\n }\n calculatePosition();\n\n // scroll可能なElement がある時はscrollに追従するようにする\n const handleScroll = () => {\n calculatePosition();\n checkScrollPosition();\n onScroll && onScroll();\n };\n\n if (positionalBaseElement) {\n const target = scrollableParent(positionalBaseElement);\n\n window.addEventListener('resize', handleScroll);\n if (target) {\n window.addEventListener('scroll', handleScroll);\n target.addEventListener('scroll', handleScroll);\n }\n return () => {\n window.removeEventListener('resize', handleScroll);\n if (target) {\n window.removeEventListener('scroll', handleScroll);\n target.removeEventListener('scroll', handleScroll);\n }\n };\n }\n }, [\n isActive,\n onScroll,\n calculatePosition,\n checkScrollPosition,\n positionalBaseElement,\n ]);\n\n return ReactDOM.createPortal(\n \n {children}\n
    ,\n portalTargetElement || portalParent\n );\n};\n\nexport default ScrollPortal;\n" }, { "path": "src/utilities/TimeString.ts", "content": "import { differenceInMinutes } from 'date-fns';\nimport { Ascii } from './Ascii';\n\nconst createTimeString = (hour: number, min: number): string => {\n // 分が60以上だったら時間を加算する\n // ex) 01:70→ 02:10\n if (min >= 60) {\n hour = hour + Math.floor(min / 60);\n min = min % 60;\n } else if (min < 0) {\n hour = hour + Math.floor(min / 60);\n min = 60 + (min % 60);\n }\n // 10未満の時は2桁になるようにゼロ埋めして 12:34 形式に\n return `${hour < 10 ? ('0' + hour).slice(-2) : hour}:${('0' + min).slice(\n -2\n )}`;\n};\n\nconst getHour = (timeStr: string): number => {\n if (timeStr) {\n const matched =\n timeStr.match(/^(\\d+):/) ||\n timeStr.match(/(\\d+)\\d{2}$/) ||\n timeStr.match(/^(\\d+)$/);\n if (matched) {\n return Number(matched[1]);\n }\n }\n return 0;\n};\n\nconst getMin = (timeStr: string): number => {\n if (timeStr) {\n const matched = timeStr.match(/:(\\d+)$/) || timeStr.match(/^\\d+(\\d{2})$/);\n if (matched) {\n return Number(matched[1]);\n }\n }\n return 0;\n};\n\nconst convert = (str: string, minTime?: string, maxTime?: string): string => {\n const replaced = Ascii.zenkakuToHankaku(str.replace(/[^:0-9]/g, ''));\n const hour = getHour(replaced);\n const min = getMin(replaced);\n\n const timeString = createTimeString(hour, min);\n const timeByDate = new Date(2000, 0, 1, hour, min);\n const minTimeByDate = minTime\n ? new Date(2000, 0, 1, getHour(minTime), getMin(minTime))\n : undefined;\n const maxTimeByDate = maxTime\n ? new Date(2000, 0, 1, getHour(maxTime), getMin(maxTime))\n : undefined;\n\n const isSameOrAfterThanMinTime = minTimeByDate\n ? differenceInMinutes(timeByDate, minTimeByDate) >= 0\n : true;\n\n if (minTime && !isSameOrAfterThanMinTime) {\n return minTime;\n }\n\n const isSameOrBeforeThanMaxTime = maxTimeByDate\n ? differenceInMinutes(maxTimeByDate, timeByDate) >= 0\n : true;\n\n if (maxTime && !isSameOrBeforeThanMaxTime) {\n return maxTime;\n }\n\n return timeString;\n};\n\nexport const TimeString = {\n createTimeString,\n getHour,\n getMin,\n convert,\n};\n" }, { "path": "src/utilities/VibesContext.ts", "content": "import * as React from 'react';\n\ntype VibesContextValue = {\n /**\n * trueにすると、一部のコンポーネントの表示が画面幅に応じて変化するようになります。\n */\n responsive: boolean;\n /**\n * ポップアップやダイアログ等のポータルを作成する際の親要素を指定します。\n * 指定しない場合、document.bodyが親要素となります。\n */\n portalParent?: HTMLElement;\n /**\n * portalParentをrefで指定する場合に使用します。\n */\n portalParentRef?: React.RefObject;\n /**\n * 言語を指定します。\n * 対応コンポーネントに埋め込まれたテキストが指定した言語で表示されます。\n * デフォルトは 'ja' です。\n */\n lang?: 'ja' | 'en';\n};\n\n/**\n * VibesContextを単体で利用することもできますが、できる限りVibesProviderを通して利用してください。\n */\nexport const VibesContext = React.createContext({\n responsive: false,\n portalParent: document.body,\n portalParentRef: undefined,\n lang: 'ja',\n});\n" }, { "path": "src/utilities/VibesProvider.tsx", "content": "import * as React from 'react';\nimport { useMedia } from './useMedia';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { VibesContext } from './VibesContext';\nimport {\n TabletBoundaryWidth,\n MobileBoundaryWidth,\n NarrowMobileBoundaryWidth,\n} from '../constants';\n\nexport type MediaType = 'pc' | 'tablet' | 'mobile';\n\nconst baseRemSize = 16;\nconst deviceRemSize =\n typeof document === 'undefined'\n ? baseRemSize\n : parseFloat(getComputedStyle(document.documentElement).fontSize);\n\n/**\n * Vibes共通のコンテクストを提供するProviderコンポーネントです。\n *\n * Provider component which determine media type according to screen width.\n *\n * 320 ~ 767px mobile\n * 768 ~ 1024px tablet\n * 1025px ~ pc\n *\n * (when 1rem = 16px)\n */\nexport const VibesProvider = ({\n children,\n fixedLayout = false,\n portalParent = document.body,\n portalParentRef = undefined,\n lang = 'ja',\n}: {\n children: React.ReactNode;\n /**\n * レイアウトを固定するかどうかを設定します\n * styled-componentsでは常にpcレイアウトとして扱われます。\n * VibesContextValueのresponsiveの値は!fixedLayoutで計算されます\n * （fixedLayoutがfalseの場合、一部のコンポーネントの表示が画面幅に応じて変化するようになります。）\n */\n fixedLayout?: boolean;\n /**\n * ポップアップやダイアログ等のポータルを作成する際の親要素を指定します。\n * 指定しない場合、document.bodyが親要素となります。\n */\n portalParent?: HTMLElement;\n /**\n * portalParentをrefで指定する場合に使用します。\n */\n portalParentRef?: React.RefObject;\n /**\n * 言語を指定します。\n * 対応コンポーネントに埋め込まれたテキストが指定した言語で表示されます。\n * デフォルトは 'ja' です。\n */\n lang?: 'ja' | 'en';\n}) => {\n const isTablet = useMedia(\n `not (min-width: ${TabletBoundaryWidth})`,\n window.innerWidth <\n deviceRemSize * Number(TabletBoundaryWidth.replace('rem', ''))\n );\n const isMobile = useMedia(\n `not (min-width: ${MobileBoundaryWidth})`,\n window.innerWidth <\n deviceRemSize * Number(MobileBoundaryWidth.replace('rem', ''))\n );\n // Narrower than iPhone8 (375px)\n const isNarrowMobile = useMedia(\n `not (min-width: ${NarrowMobileBoundaryWidth})`,\n window.innerWidth <\n deviceRemSize * Number(NarrowMobileBoundaryWidth.replace('rem', ''))\n );\n\n const media = {\n mediaType: (fixedLayout\n ? 'pc'\n : isMobile\n ? 'mobile'\n : isTablet\n ? 'tablet'\n : 'pc') as MediaType,\n isNarrowMobile,\n };\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport const useVibes = () => React.useContext(ThemeContext);\n\nexport const useResponsive = (responsiveProp?: boolean) => {\n const contextValue = React.useContext(VibesContext);\n return responsiveProp === undefined\n ? contextValue.responsive\n : responsiveProp;\n};\n\nexport const usePortalParentContext = () => {\n const { portalParent, portalParentRef } = React.useContext(VibesContext);\n return portalParent || portalParentRef?.current || document.body;\n};\n\nexport const useLang = () => {\n const { lang } = React.useContext(VibesContext);\n return lang || 'ja';\n};\n" }, { "path": "src/utilities/browsers.ts", "content": "/**\n * Returns true if using Microsoft Edge\n * Microsoft Edgeを使用している場合にtrueを返す\n */\nexport const isEdge = () => !!navigator.userAgent.match(/Edg\\//);\n" }, { "path": "src/utilities/commonProps.test.ts", "content": "import commonProps, { pickCommonProps } from './commonProps';\nimport { MarginSize } from './functionalMarginClasses';\n\nconst ma: MarginSize = 0.5;\nconst mt: MarginSize = 1;\nconst mb: MarginSize = 1.5;\nconst mr: MarginSize = 2;\nconst ml: MarginSize = 3;\nconst dataGuide = 'data-guide-example';\nconst dataTest = 'data-test-example';\nconst dataTracking = 'data-tracking-example';\nconst dataMasking = true;\n\nconst base = 'vb-base';\nconst deprecatedMarginClassProps = {\n marginBottom: true,\n marginLeft: true,\n marginRight: true,\n marginTop: true,\n};\n\ndescribe('commonProps', () => {\n it('succeed with full props', () => {\n const props = {\n ma,\n mt,\n mb,\n mr,\n ml,\n 'data-guide': dataGuide,\n 'data-test': dataTest,\n 'data-tracking': dataTracking,\n 'data-masking': dataMasking,\n };\n const subject = commonProps(\n props,\n base,\n {\n foo: true,\n bar: true,\n baz: true,\n },\n deprecatedMarginClassProps\n );\n\n expect(subject).toEqual(\n expect.objectContaining({\n className: `${base} ${base}--foo ${base}--bar ${base}--baz vb-mt100 vb-mb100 vb-mr100 vb-ml100 vb-ma50 vb-mt100 vb-mb150 vb-mr200 vb-ml300`,\n 'data-guide': dataGuide,\n 'data-test': dataTest,\n 'data-tracking': dataTracking,\n 'data-masking': dataMasking,\n })\n );\n });\n\n it('succeed with minimum props', () => {\n const subject = commonProps({}, base);\n\n expect(subject).toEqual(\n expect.objectContaining({\n className: base,\n })\n );\n });\n});\n\ndescribe('pickCommonProps', () => {\n it('succeed with full props and etc.', () => {\n const props = {\n ma,\n mt,\n mb,\n mr,\n ml,\n 'data-guide': dataGuide,\n 'data-test': dataTest,\n 'data-tracking': dataTracking,\n 'data-masking': dataMasking,\n dummy: 42,\n };\n const subject = pickCommonProps(props);\n\n expect(subject.ma).toBe(ma);\n expect(subject.mt).toBe(mt);\n expect(subject.mb).toBe(mb);\n expect(subject.ml).toBe(ml);\n expect(subject.mr).toBe(mr);\n expect(subject['data-guide']).toBe(dataGuide);\n expect(subject['data-test']).toBe(dataTest);\n expect(subject['data-tracking']).toBe(dataTracking);\n expect(subject['data-masking']).toBe(dataMasking);\n expect(subject).not.toHaveProperty('dummy');\n });\n\n it('succeed with blank props', () => {\n const subject = pickCommonProps({});\n\n expect(subject.ma).toBeUndefined();\n expect(subject.mt).toBeUndefined();\n expect(subject.mb).toBeUndefined();\n expect(subject.ml).toBeUndefined();\n expect(subject.mr).toBeUndefined();\n expect(subject['data-guide']).toBeUndefined();\n expect(subject['data-test']).toBeUndefined();\n expect(subject['data-tracking']).toBeUndefined();\n expect(subject['data-masking']).toBeUndefined();\n });\n});\n" }, { "path": "src/utilities/commonProps.ts", "content": "import {\n pickFunctionalMarginProps,\n FunctionalMarginProps,\n} from './functionalMarginClasses';\nimport vbClassNames, { ModifierClassProps } from './vbClassNames';\nimport { MarginClassProps } from './marginClasses';\n\nexport type CommonDataProps = {\n 'data-guide'?: string;\n 'data-test'?: string;\n 'data-tracking'?: string;\n 'data-masking'?: boolean;\n};\n\nexport type CommonProps = CommonDataProps & FunctionalMarginProps;\n\nexport const pickCommonProps = (props: CommonProps): CommonProps => {\n return {\n ...pickCommonDataProps(props),\n ...pickFunctionalMarginProps(props),\n };\n};\n\nexport const pickCommonDataProps = (props: CommonProps): CommonDataProps => ({\n 'data-guide': props['data-guide'],\n 'data-test': props['data-test'],\n 'data-tracking': props['data-tracking'],\n 'data-masking': props['data-masking'],\n});\n\nexport default function commonProps(\n props: CommonProps,\n baseClassName: string,\n classModifiers: ModifierClassProps = {},\n deprecatedMarginClassProps: MarginClassProps = {}\n): CommonDataProps & { className: string } {\n return {\n 'data-guide': props['data-guide'],\n 'data-test': props['data-test'],\n 'data-tracking': props['data-tracking'],\n 'data-masking': props['data-masking'],\n className: vbClassNames(baseClassName, {\n props,\n modifier: classModifiers,\n margin: deprecatedMarginClassProps,\n }),\n };\n}\n" }, { "path": "src/utilities/convertRemToPixel.ts", "content": "export const convertRemToPixel = (rem: number) => {\n const baseFontSize =\n parseInt(\n getComputedStyle(document.documentElement).fontSize.split('px')[0]\n ) || 16;\n return rem * baseFontSize;\n};\n" }, { "path": "src/utilities/date.test.ts", "content": "import {\n isValidDateInRange,\n getValidDateNearestTarget,\n formatDate,\n formatDayOfWeek,\n} from './date';\n\ndescribe('isValidDateInRange', () => {\n describe('when date is empty', () => {\n it('return false', () =>\n expect(isValidDateInRange('', '', '')).toEqual(false));\n });\n});\n\ndescribe('getValidDateNearestTarget', () => {\n describe('when a target is in the range', () => {\n it('returns the target.', () =>\n expect(\n getValidDateNearestTarget(\n new Date('2022-01-01'),\n new Date('2021-01-01'),\n new Date('2023-01-01')\n )\n ).toEqual(new Date('2022-01-01')));\n });\n\n describe('without the range', () => {\n it('returns the target.', () =>\n expect(\n getValidDateNearestTarget(new Date('2022-01-01'), undefined, undefined)\n ).toEqual(new Date('2022-01-01')));\n });\n\n describe('when a target is before minDate', () => {\n it('returns the minDate.', () =>\n expect(\n getValidDateNearestTarget(\n new Date('2020-01-01'),\n new Date('2021-01-01'),\n new Date('2023-01-01')\n )\n ).toEqual(new Date('2021-01-01')));\n });\n\n describe('when a target is after maxDate', () => {\n it('returns the maxDate.', () =>\n expect(\n getValidDateNearestTarget(\n new Date('2024-01-01'),\n new Date('2021-01-01'),\n new Date('2023-01-01')\n )\n ).toEqual(new Date('2023-01-01')));\n });\n\n describe('with only minDate that is after the target', () => {\n it('returns the mixDate.', () =>\n expect(\n getValidDateNearestTarget(\n new Date('2020-01-01'),\n new Date('2021-01-01'),\n undefined\n )\n ).toEqual(new Date('2021-01-01')));\n });\n\n describe('when the range is invalid', () => {\n it('returns null.', () =>\n expect(\n getValidDateNearestTarget(\n new Date('2020-01-01'),\n new Date('2023-01-01'),\n new Date('2021-01-01')\n )\n ).toEqual(null));\n });\n\n describe('when the target is invalid', () => {\n it('returns null.', () =>\n expect(\n getValidDateNearestTarget(new Date('2020-01-41'), undefined, undefined)\n ).toEqual(null));\n });\n});\n\ndescribe('formatDate', () => {\n describe('when date is empty', () => {\n it('return empty string', () => expect(formatDate('')).toEqual(''));\n });\n\n describe('when date is not empty', () => {\n it('return formatted date', () =>\n expect(formatDate('2021-01-01')).toEqual('2021-01-01'));\n });\n});\n\ndescribe('formatDayOfWeek', () => {\n describe('when date is empty', () => {\n it('return empty string', () => expect(formatDayOfWeek('')).toEqual(''));\n });\n\n describe('when date is not empty', () => {\n it('return formatted date', () => {\n expect(formatDayOfWeek('2021-01-01')).toEqual('金曜日');\n expect(formatDayOfWeek('2021-01-02')).toEqual('土曜日');\n expect(formatDayOfWeek('2021-01-03')).toEqual('日曜日');\n expect(formatDayOfWeek('2021-01-04')).toEqual('月曜日');\n expect(formatDayOfWeek('2021-01-05')).toEqual('火曜日');\n expect(formatDayOfWeek('2021-01-06')).toEqual('水曜日');\n expect(formatDayOfWeek('2021-01-07')).toEqual('木曜日');\n });\n });\n});\n" }, { "path": "src/utilities/date.ts", "content": "import {\n parse,\n isValid,\n isSameDay,\n isAfter,\n isBefore,\n format,\n getDay,\n} from 'date-fns';\n\n// パースに成功し妥当な値のとき Date を\n// そうでなければ null を返却する\nexport function parseDate(date: Date | string | null | undefined): Date | null {\n if (!date) {\n return null;\n }\n\n const parsedDate = parse(date);\n if (!isValid(parsedDate)) {\n return null;\n }\n\n return parsedDate;\n}\n\nexport function isValidDateInRange(\n date: string | Date,\n minDate?: string | Date,\n maxDate?: string | Date\n): boolean {\n if (!date) {\n return false;\n }\n const parsedDate = parse(date);\n const parsedMinDate = minDate && parse(minDate);\n const parsedMaxDate = maxDate && parse(maxDate);\n return (\n isValid(parsedDate) &&\n (parsedMinDate && isValid(parsedMinDate)\n ? isSameDay(parsedDate, parsedMinDate) ||\n isAfter(parsedDate, parsedMinDate)\n : true) &&\n (parsedMaxDate && isValid(parsedMaxDate)\n ? isSameDay(parsedDate, parsedMaxDate) ||\n isBefore(parsedDate, parsedMaxDate)\n : true)\n );\n}\n\nexport function getValidDateNearestTarget(\n target: Date | string,\n minDate?: Date | string,\n maxDate?: Date | string\n): Date | null {\n const parsedTarget = parseDate(target);\n const parsedMinDate = parseDate(minDate);\n const parsedMaxDate = parseDate(maxDate);\n\n if (\n !parsedTarget ||\n (parsedMinDate && parsedMaxDate && isAfter(parsedMinDate, parsedMaxDate))\n ) {\n return null;\n }\n\n if (isValidDateInRange(target, minDate, maxDate)) {\n return parsedTarget;\n }\n\n const diffByMin = parsedMinDate\n ? Math.abs(parsedMinDate.getTime() - parsedTarget.getTime())\n : Number.MAX_VALUE;\n const diffByMax = parsedMaxDate\n ? Math.abs(parsedMaxDate.getTime() - parsedTarget.getTime())\n : Number.MAX_VALUE;\n\n if (diffByMin <= diffByMax) {\n return parsedMinDate;\n } else {\n return parsedMaxDate;\n }\n}\n\nexport function formatDate(date: string | Date): string {\n const parsedDate = parse(date);\n return isValid(parsedDate) ? format(parsedDate, 'YYYY-MM-DD') : '';\n}\n\nexport function formatDayOfWeek(date: string | Date): string {\n const parsedDate = parse(date);\n if (isValid(parsedDate)) {\n switch (getDay(parsedDate)) {\n case 0:\n return '日曜日';\n case 1:\n return '月曜日';\n case 2:\n return '火曜日';\n case 3:\n return '水曜日';\n case 4:\n return '木曜日';\n case 5:\n return '金曜日';\n case 6:\n return '土曜日';\n }\n }\n return '';\n}\n" }, { "path": "src/utilities/functionalMarginClasses.test.ts", "content": "import functionalMarginClasses, {\n pickFunctionalMarginProps,\n MarginSize,\n} from './functionalMarginClasses';\n\nconst ma: MarginSize = 0.5;\nconst mt: MarginSize = 1;\nconst mb: MarginSize = 1.5;\nconst mr: MarginSize = 2;\nconst ml: MarginSize = 3;\n\ndescribe('functionalMarginClasses', () => {\n it('succeed with full props', () => {\n const props = {\n ma,\n mt,\n mb,\n mr,\n ml,\n };\n const subject = functionalMarginClasses(props);\n\n expect(subject).toBe('vb-ma50 vb-mt100 vb-mb150 vb-mr200 vb-ml300');\n });\n\n it('succeed with blank props', () => {\n const subject = functionalMarginClasses({});\n\n expect(subject).toBe('');\n });\n});\n\ndescribe('pickFunctionalMarginProps', () => {\n it('succeed with full props and etc.', () => {\n const props = {\n ma,\n mt,\n mb,\n mr,\n ml,\n dummy: 42,\n };\n const subject = pickFunctionalMarginProps(props);\n\n expect(subject.ma).toBe(ma);\n expect(subject.mt).toBe(mt);\n expect(subject.mb).toBe(mb);\n expect(subject.ml).toBe(ml);\n expect(subject.mr).toBe(mr);\n expect(subject).not.toHaveProperty('dummy');\n });\n\n it('succeed with blank props', () => {\n const subject = pickFunctionalMarginProps({});\n\n expect(subject.ma).toBeUndefined();\n expect(subject.mt).toBeUndefined();\n expect(subject.mb).toBeUndefined();\n expect(subject.ml).toBeUndefined();\n expect(subject.mr).toBeUndefined();\n });\n});\n" }, { "path": "src/utilities/functionalMarginClasses.ts", "content": "export type MarginSize =\n | 0.25\n | 0.5\n | 1\n | 1.5\n | 2\n | 3\n | -0.25\n | -0.5\n | -1\n | -1.5\n | -2\n | -3\n | 'auto';\n\nexport type FunctionalMarginProps = {\n /**\n * 全方向のマージン (rem)\n */\n ma?: MarginSize;\n /**\n * 上方向のマージン (rem)\n */\n mt?: MarginSize;\n /**\n * 下方向のマージン (rem)\n */\n mb?: MarginSize;\n /**\n * 左方向のマージン (rem)\n */\n ml?: MarginSize;\n /**\n * 右方向のマージン (rem)\n */\n mr?: MarginSize;\n};\n\nexport const pickFunctionalMarginProps = ({\n ma,\n mt,\n mb,\n ml,\n mr,\n}: FunctionalMarginProps): FunctionalMarginProps => {\n return { ma, mt, mb, ml, mr };\n};\n\nconst formatMarginSize = (ms: MarginSize): string =>\n ms === 'auto' ? '-auto' : String(ms * 100);\n\nconst functionalMarginClasses = ({\n ma,\n mt,\n mb,\n ml,\n mr,\n}: FunctionalMarginProps): string => {\n return [\n ma ? `vb-ma${formatMarginSize(ma)}` : '',\n mt ? `vb-mt${formatMarginSize(mt)}` : '',\n mb ? `vb-mb${formatMarginSize(mb)}` : '',\n mr ? `vb-mr${formatMarginSize(mr)}` : '',\n ml ? `vb-ml${formatMarginSize(ml)}` : '',\n ]\n .filter((e) => e)\n .join(' ');\n};\n\nexport default functionalMarginClasses;\n" }, { "path": "src/utilities/index.ts", "content": "// utilities ディレクトリの中身はVibes内部でしか使わないものとVibes外でも使いたいものの\n// 整理ができていないので、Vibes外でも使うことが想定されるものだけexportする方針とします\n\nexport { Ascii } from './Ascii';\nexport { pickCommonProps } from './commonProps';\nexport type { CommonProps } from './commonProps';\nexport { convertRemToPixel } from './convertRemToPixel';\nexport { Digits } from './Digits';\nexport { Mins } from './Mins';\nexport { TimeString } from './TimeString';\nexport { VibesContext } from './VibesContext';\nexport { VibesProvider, useVibes } from './VibesProvider';\nexport * from './FocusableEelements';\nexport const VibesVersion = '100.1.0';\n" }, { "path": "src/utilities/keyboard.ts", "content": "export const KeyCodes = {\n BACKSPACE: 8,\n TAB: 9,\n ENTER: 13,\n ESC: 27,\n LEFT: 37,\n UP: 38,\n RIGHT: 39,\n DOWN: 40,\n H: 72,\n J: 74,\n K: 75,\n L: 76,\n} as const;\n\nexport const Keys = {\n BACKSPACE: 'Backspace',\n TAB: 'Tab',\n ENTER: 'Enter',\n ESC: 'Escape',\n LEFT: 'ArrowLeft',\n UP: 'ArrowUp',\n RIGHT: 'ArrowRight',\n DOWN: 'ArrowDown',\n SPACE: ' ',\n} as const;\n" }, { "path": "src/utilities/marginClasses.ts", "content": "import functionalMarginClasses, {\n MarginSize as FunctionalMarginSize,\n} from './functionalMarginClasses';\n\nexport type MarginClassProps = {\n /**\n * 上方向にマージンを付けるか否か（ `mt` propsが使用できる場合はそちらを使用してください）\n */\n marginTop?: boolean;\n /**\n * 左方向にマージンを付けるか否か（ `ml` propsが使用できる場合はそちらを使用してください）\n */\n marginLeft?: boolean;\n /**\n * 右方向にマージンを付けるか否か（ `mr` propsが使用できる場合はそちらを使用してください）\n */\n marginRight?: boolean;\n /**\n * 下方向にマージンを付けるか否か（ `mb` propsが使用できる場合はそちらを使用してください）\n */\n marginBottom?: boolean;\n /**\n * `marginTop`, `marginLeft`, `marginRight`, `marginBottom` によるマージンの大きさ。無指定であれば 1rem。\n * `xSmall` = 0.25rem, `small` = 0.5rem, `large` = 1.5rem, `xLarge` = 2rem, `xxlarge` = 3rem\n */\n marginSize?: 'xSmall' | 'small' | 'large' | 'xLarge' | 'xxLarge';\n};\n\ntype MarginSize = 'xSmall' | 'small' | 'large' | 'xLarge' | 'xxLarge';\n\nfunction marginSizeToRem(\n marginSize: MarginSize | undefined\n): FunctionalMarginSize {\n switch (marginSize) {\n case 'xSmall':\n return 0.25;\n case 'small':\n return 0.5;\n case 'large':\n return 1.5;\n case 'xLarge':\n return 2;\n case 'xxLarge':\n return 3;\n }\n return 1;\n}\n\nexport const pickMarginClassProps = ({\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n}: MarginClassProps): MarginClassProps => ({\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n});\n\nexport const marginClassPropsToFunctionalMarginProps = ({\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n marginSize,\n}: MarginClassProps) => {\n const remSize = marginSizeToRem(marginSize);\n return {\n mt: marginTop ? remSize : undefined,\n mb: marginBottom ? remSize : undefined,\n ml: marginLeft ? remSize : undefined,\n mr: marginRight ? remSize : undefined,\n };\n};\n\nexport default function marginClasses(props: MarginClassProps): Array {\n return functionalMarginClasses(\n marginClassPropsToFunctionalMarginProps(props)\n ).split(' ');\n}\n" }, { "path": "src/utilities/selfWindowNavigator.ts", "content": "const isModifiedEvent = (event: React.MouseEvent | MouseEvent): boolean => {\n return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);\n};\n\nexport type SelfWindowNavigationProp = {\n /**\n * react-router等で、画面遷移時にデフォルトとは違う挙動をさせたいときに使用します。\n * Ctrlキー等を押しながらのクリックや、コンテキストメニューから新しいタブを開いた場合などには発火しません。\n */\n onSelfWindowNavigation?: (url?: string) => void;\n};\n\n/**\n * A要素でCtrl + Clickを有効にしつつ（＝別タブで開く挙動を残しつつ）、react-routerでハンドリングできるようにする。\n * （実際のハンドリングはコンポーネント呼び出し側が行う。Vibesはあくまでその口を用意するスタンス）\n * 通常のリンク等の onClick とは違う挙動となるため、onClickとは別名のインタフェースとして用意することを推奨します\n * 実装はreact-routerのものを参考にしています https://github.com/ReactTraining/react-router/blob/c0b8ce42d3c6b85e3a53d1c56ae12c88205d00d8/packages/react-router-dom/modules/Link.js#L35-L52\n * */\nconst selfWindowNavigator = (navigate?: (url?: string) => void) => {\n if (navigate) {\n return (event: React.MouseEvent | MouseEvent, url?: string) => {\n if (\n event.defaultPrevented || // 既にdefault以外の挙動になっているものは無視\n event.button !== 0 || // 左ボタンクリック以外は無視\n isModifiedEvent(event) // Ctrlキーなどを押している場合は無視\n ) {\n return;\n }\n\n event.preventDefault();\n navigate(url);\n };\n }\n};\n\nexport default selfWindowNavigator;\n" }, { "path": "src/utilities/useMedia.ts", "content": "import { useState, useEffect } from 'react';\n\n/**\n * ウインドウ幅に応じてメディアクエリの状態を変更するカスタムフック\n * ref: https://github.com/streamich/use-media/blob/master/src/useMedia.ts\n * query: window.matchMedia() に渡すメディアクエリ文字列\n * defaultState: 初期値\n */\nexport const useMedia = (query: string, defaultState?: boolean) => {\n const [currentState, setCurrentState] = useState(defaultState);\n\n useEffect(() => {\n let mounted = true;\n const mql = window.matchMedia(query);\n const onChange = () => {\n if (!mounted) {\n return;\n }\n setCurrentState(!!mql.matches);\n };\n mql.addEventListener('change', onChange);\n setCurrentState(mql.matches);\n\n return () => {\n mounted = false;\n mql.removeEventListener('change', onChange);\n };\n }, [query]);\n\n return currentState;\n};\n" }, { "path": "src/utilities/vbClassNames.ts", "content": "import classNames from 'classnames';\nimport marginClasses, { MarginClassProps } from './marginClasses';\nimport functionalMarginClasses, {\n FunctionalMarginProps,\n} from './functionalMarginClasses';\n\nexport type ModifierClassProps = {\n [key: string]: boolean | null | undefined;\n};\n\n/**\n * { propName: 'property-value' }形式のpropsを { propNamePropertyValue: true } 形式にする\n */\nexport const convertClassModifiers = (props: {\n [key: string]: string | undefined;\n}): { [key: string]: boolean } =>\n Object.fromEntries(\n Object.entries(props)\n .map(([key, value]) =>\n 'string' === typeof value\n ? [\n `${key}${value\n .split(/[-]/)\n .reduce(\n (prev, curr) =>\n `${prev}${curr[0].toUpperCase()}${curr.slice(1)}`,\n ''\n )}`,\n true,\n ]\n : []\n )\n .filter((e) => e.length > 0)\n );\n\nconst modifierClasses = (\n baseClassName: string,\n modifierClassProps: ModifierClassProps\n): string[] =>\n classNames(modifierClassProps)\n .split(' ')\n .map((modifierName) =>\n modifierName ? `${baseClassName}--${modifierName}` : ''\n );\n\nconst vbClassNames = (\n baseClassName: string,\n {\n modifier,\n margin,\n props,\n }: {\n modifier?: ModifierClassProps;\n margin?: MarginClassProps;\n props?: FunctionalMarginProps; // 今後、共通でクラスを付けたいやつがきたらここに & で増やすやつ\n }\n): string =>\n [\n baseClassName,\n ...(modifier ? modifierClasses(baseClassName, modifier) : []),\n ...(margin ? marginClasses(margin) : []),\n props ? functionalMarginClasses(props) : '',\n ]\n .filter((e) => e)\n .join(' ');\n\nexport default vbClassNames;\n" }, { "path": "stories/commonKnobs.ts", "content": "import { select, text, boolean } from '@storybook/addon-knobs';\nconst marginOptions = {\n '0': '',\n '0.25rem': 0.25,\n '0.5rem': 0.5,\n '1rem': 1,\n '1.5rem': 1.5,\n '2rem': 2,\n '3rem': 3,\n '-0.25r': -0.25,\n '-0.5rem': -0.5,\n '-1rem': -1,\n '-1.5rem': -1.5,\n '-2rem': -2,\n '-3rem': -3,\n auto: 'auto'\n} as const;\nconst commonKnobs = () => ({\n ma: select('MarginAll', marginOptions, '', 'CommonProps') || undefined,\n mt: select('MarginTop', marginOptions, '', 'CommonProps') || undefined,\n mb: select('MarginBottom', marginOptions, '', 'CommonProps') || undefined,\n mr: select('MarginRight', marginOptions, '', 'CommonProps') || undefined,\n ml: select('MarginLeft', marginOptions, '', 'CommonProps') || undefined,\n 'data-guide': text('Data-Guide', '', 'CommonProps'),\n 'data-test': text('Data-Test', '', 'CommonProps'),\n 'data-tracking': text('Data-Tracking', '', 'CommonProps'),\n 'data-masking': boolean('Data-Masking', false, 'CommonProps') || undefined\n});\nexport default commonKnobs;\n" }, { "path": "stories/index.ts", "content": "export { default as commonKnobs } from './commonKnobs';\n" }, { "path": "stylelint.config.js", "content": "module.exports = {\n extends: ['stylelint-config-standard', 'stylelint-config-prettier'],\n rules: {\n 'property-no-unknown': [\n true,\n {\n ignoreProperties: ['container-name', 'container-type'],\n },\n ],\n 'at-rule-no-unknown': [\n true,\n {\n ignoreAtRules: [\n 'extend',\n 'at-root',\n 'each',\n 'for',\n 'mixin',\n 'include',\n 'if',\n 'else',\n 'use',\n 'function',\n 'return',\n 'container',\n ],\n },\n ],\n 'unit-no-unknown': [true, { ignoreUnits: ['svh'] }],\n },\n};\n" }, { "path": "stylesheets/_container_query.scss", "content": "// VSCode 上での syntax error 回避のため、@container 相当の mixin を定義します\n// ビルドして出力される CSS を確認しながら利用してください\n@mixin at-container($x, $y: '') {\n $name: '';\n $rule: '';\n\n @if $y == '' {\n $rule: $x;\n } @else {\n $name: $x;\n $rule: $y;\n }\n\n // 以下が VSCode 上で syntax error となっていても問題ありません (このファイルに syntax error を閉じ込めています)\n @container #{$name} (#{$rule}) {\n @content;\n }\n}\n" }, { "path": "stylesheets/_lv1.scss", "content": "@import './lv1/Loading';\n@import './lv1/base';\n@import './lv1/button';\n@import './lv1/calendar';\n@import './lv1/content';\n@import './lv1/focusHighlight';\n@import './lv1/focusTrap';\n@import './lv1/form';\n@import './lv1/grid';\n@import './lv1/headline';\n@import './lv1/icon';\n@import './lv1/image';\n@import './lv1/interactive-parts';\n@import './lv1/list';\n@import './lv1/layout';\n@import './lv1/message';\n@import './lv1/margin-option';\n@import './lv1/InlineSpinner';\n@import './lv1/progress';\n" }, { "path": "stylesheets/_lv2.scss", "content": "@import './lv2/accordionPanel';\n@import './lv2/bulletedList';\n@import './lv2/buttonGroup';\n@import './lv2/breadcrumbs';\n@import './lv2/calendar';\n@import './lv2/cardNavigation';\n@import './lv2/comboBox';\n@import './lv2/descriptionList';\n@import './lv2/dateInput';\n@import './lv2/dialog';\n@import './lv2/dialogFooter';\n@import './lv2/dropdown';\n@import './lv2/dropdownButton';\n@import './lv2/formBlock';\n@import './lv2/formField';\n@import './lv2/filterTag';\n@import './lv2/fileUploader';\n@import './lv2/fileDropArea';\n@import './lv2/footer';\n@import './lv2/formGroup';\n@import './lv2/globalNavi';\n@import './lv2/guidanceMessage';\n@import './lv2/guidedContent';\n@import './lv2/header';\n@import './lv2/headlineArea';\n@import './lv2/indexSearchField';\n@import './lv2/lineSeparatedList';\n@import './lv2/listButtonSelector';\n@import './lv2/listTable';\n@import './lv2/listCard';\n@import './lv2/messageBlock';\n@import './lv2/pageSelector';\n@import './lv2/messageIcon';\n@import './lv2/modal';\n@import './lv2/numericTable';\n@import './lv2/emptyStates';\n@import './lv2/pager';\n@import './lv2/selectableButton';\n@import './lv2/stackedBarChart';\n@import './lv2/statusSelector';\n@import './lv2/stepper';\n@import './lv2/tabbar';\n@import './lv2/tagBox';\n@import './lv2/withAccordionContent';\n@import './lv2/withBalloon';\n@import './lv2/withPopup';\n@import './lv2/withTOC';\n@import './lv2/withFilterableDropdown';\n@import './lv2/personTag';\n@import './lv2/popupProgressBar';\n@import './lv2/popupProgressBarPortal';\n@import './lv2/skeleton';\n@import './lv2/hierarchicalTable';\n@import './lv2/propListForm';\n" }, { "path": "stylesheets/freee.scss", "content": "@import './lv0/colors';\n\n$basicFont: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\n 'ヒラギノ角ゴ ProN', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo,\n sans-serif;\n\nbody {\n background: $vbColorsP01;\n color: $vbColorsGY07;\n font-family: $basicFont;\n margin: 0;\n padding: 0;\n}\n\na {\n color: $vbColorsP07;\n}\n" }, { "path": "stylesheets/lv0/_colors.scss", "content": "@use 'sass:color';\n@use 'sass:math';\n\n$vbColorsP01: #ebf3ff;\n$vbColorsP02: #dce8ff;\n$vbColorsP03: #aac8ff;\n$vbColorsP04: #73a5ff;\n$vbColorsP05: #2864f0;\n$vbColorsP06: #3264dc;\n$vbColorsP07: #285ac8;\n$vbColorsP08: #1e46aa;\n$vbColorsP09: #23418c;\n$vbColorsP10: #143278;\n\n$vbColorsS01: #f7f5f5;\n$vbColorsS02: #f0eded;\n$vbColorsS03: #e9e7e7;\n$vbColorsS04: #e1dcdc;\n$vbColorsS05: #d7d2d2;\n$vbColorsS06: #bebaba;\n$vbColorsS07: #aaa7a7;\n$vbColorsS08: #8c8989;\n$vbColorsS09: #6e6b6b;\n$vbColorsS10: #464343;\n\n$vbColorsRE02: #fad2d7;\n$vbColorsRE04: #f07882;\n$vbColorsRE05: #dc1e32;\n$vbColorsRE07: #a51428;\n$vbColorsRE10: #6e0f19;\n\n$vbColorsOR02: #ffe1d2;\n$vbColorsOR04: #ffaa78;\n$vbColorsOR05: #fa6414;\n$vbColorsOR07: #be4b0f;\n$vbColorsOR10: #7d320a;\n\n$vbColorsYE02: #fff0d2;\n$vbColorsYE04: #ffd278;\n$vbColorsYE05: #ffb91e;\n$vbColorsYE07: #be8c14;\n$vbColorsYE10: #825a0f;\n\n$vbColorsYG02: #e6f0d2;\n$vbColorsYG04: #b4dc7d;\n$vbColorsYG05: #82c31e;\n$vbColorsYG07: #50961e;\n$vbColorsYG10: #3c5f14;\n\n$vbColorsGR02: #cdebd7;\n$vbColorsGR04: #64be8c;\n$vbColorsGR05: #00963c;\n$vbColorsGR07: #006e2d;\n$vbColorsGR10: #004b1e;\n\n$vbColorsBG02: #cdf0f0;\n$vbColorsBG04: #64d2d2;\n$vbColorsBG05: #00b9b9;\n$vbColorsBG07: #008c8c;\n$vbColorsBG10: #146464;\n\n$vbColorsPU02: #e6d7fa;\n$vbColorsPU04: #b482f0;\n$vbColorsPU05: #733ce6;\n$vbColorsPU07: #5a2daa;\n$vbColorsPU10: #3c1e73;\n\n$vbColorsGY01: #fbfbfb;\n$vbColorsGY02: #dcdcdc;\n$vbColorsGY04: #a0a0a0;\n$vbColorsGY05: #5a5a5a;\n$vbColorsGY07: #323232;\n$vbColorsGY10: #1e1e1e;\n\n$vbPrimaryColor: $vbColorsP07;\n$vbAccentColor: $vbColorsP04;\n$vbLinkColor: $vbColorsP07;\n$vbColumnColor: $vbColorsS01;\n$vbBaseColor1: $vbColorsS02;\n$vbBaseColor2: $vbColorsS03;\n$vbBaseColor3: $vbColorsS08;\n$vbBurntColor: $vbColorsS09;\n$vbBlackColor: $vbColorsGY07;\n$vbAlertColor: $vbColorsRE05;\n$vbNoticeColor: $vbColorsYE07;\n\n$vbBackgroundColor: $vbColorsP01;\n\n$vbScrimColor: rgba(0, 0, 0, 0.5);\n$vbThinScrimColor: rgba(0, 0, 0, 0.12);\n\n$vbCardShadow: 0 0 1rem rgba(0, 0, 0, 0.1),\n 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);\n$vbFloatingShadow: 0 0 1.5rem rgba(0, 0, 0, 0.1),\n 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n$vbPopupShadow: 0 0 2rem rgba(0, 0, 0, 0.1),\n 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);\n\n$use2021Style: true;\n\n// #FFFFFF の上に置いたときに $color に指定した色に見える、 opacity: $alpha な色を返す\n@function add-transparency($color, $alpha) {\n @return color.change(\n $color,\n $red: math.div((color.red($color) - 255 * (1 - $alpha)), $alpha),\n $green: math.div((color.green($color) - 255 * (1 - $alpha)), $alpha),\n $blue: math.div((color.blue($color) - 255 * (1 - $alpha)), $alpha),\n $alpha: $alpha\n );\n}\n" }, { "path": "stylesheets/lv0/_focus.scss", "content": "@import './colors';\n@import './size';\n\n$vbFocusHighlightWidth: 2;\n\n$vbFocusHighlightShadow: 0 0 0 $vbMinimum #fff,\n //内側に白1px\n 0 0 0 $vbMinimum * ($vbFocusHighlightWidth + 1) $vbColorsP05,\n //内側の白1px+フォーカスインジケーターの幅(#vbFocusHighlightWidth)\n 0 0 0 $vbMinimum * (\n $vbFocusHighlightWidth + 2\n ) #fff; //内側の白1px+フォーカスインジケーターの幅(#vbFocusHighlightWidth)+外側の1px\n\n$vbFocusHighlightShadowInset: inset 0 0 0 $vbMinimum #fff,\n inset 0 0 0 $vbMinimum * ($vbFocusHighlightWidth + 1) $vbColorsP05,\n inset 0 0 0 $vbMinimum * ($vbFocusHighlightWidth + 2) #fff;\n" }, { "path": "stylesheets/lv0/_fonts.scss", "content": "@font-face {\n font-family: 'freee-logo';\n font-style: normal;\n src: local('Noto Sans CJK JP Medium'),\n url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2)\n format('woff2'),\n url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff)\n format('woff'),\n url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf)\n format('opentype');\n}\n" }, { "path": "stylesheets/lv0/_size.scss", "content": "$vbMinimum: 1px;\n\n$vbXSmallSize: 0.25rem; // 4dp\n$vbSmallSize: 0.5rem; // 8dp\n$vbBasicSize: 1rem; // 16dp\n$vbLargeSize: 1.5rem; // 24dp\n$vbXLargeSize: 2rem; // 32dp\n$vbXXLargeSize: 3rem; // 48dp\n\n$vbContainerSize: 70rem; // 1120dp\n\n$vbFormControlHeight: 2.25rem; //36dp\n$vbFormControlSmallHeight: 1.5rem; // 24dp\n$vbFormControlLargeHeight: 3rem; // 48dp\n\n// type-scale\n// design-token （各コンポーネントの実装に直接使わないでください）\n$vbFontSize0625: 0.625rem; // 10dp\n$vbFontSize0750: 0.75rem; // 12dp\n$vbFontSize0875: 0.875rem; // 14dp\n$vbFontSize1000: 1rem; // 16dp\n$vbFontSize1500: 1.5rem; // 24dp\n\n// semantic-token （各componentでfont-sizeを扱うときにはこちらを利用）\n$vbSmallestIconFontSize: $vbFontSize0625; // 10dp\n$vbCaptionFontSize: $vbFontSize0750; // 12dp\n$vbNormalFontSize: $vbFontSize0875; // 14dp\n$vbHeadline3FontSize: $vbFontSize0875; // 14dp\n$vbHeadline2FontSize: $vbFontSize1000; // 16dp\n$vbHeadline1FontSize: $vbFontSize1500; // 24dp\n\n$vbMobileHeadline3FontSize: $vbFontSize0875; // 14dp\n$vbMobileHeadline2FontSize: $vbFontSize0875; // 14dp\n$vbMobileHeadline1FontSize: $vbFontSize1000; // 16dp\n\n$vbOverlayZIndex: 100;\n$vbFormActionsZIndex: 200;\n$vbFloatingZIndex: 500;\n$vbFullScreenZIndex: 700;\n$vbModalZIndex: 1000;\n$vbMessageModalZIndex: 1500;\n$vbPopupZIndex: 2000;\n$vbPopupMessageZIndex: 3000;\n$vbFixedMessageZIndex: 4000;\n$vbMaxZIndex: 2147483647;\n\n// モバイルを想定した横幅の閾値(320 ~ 768px)\n$vbMobileBoundaryWidth: 48rem;\n\n// フォントの設定はサイズが絡むのでfonts.scssじゃなくてこのファイルに書いてるよ\n$vbFontFamily: '-apple-system', BlinkMacSystemFont, 'Helvetica Neue',\n 'ヒラギノ角ゴ ProN', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo,\n sans-serif;\n\n$vbLineHeight: 1.5;\n\n// 地の文\n$vbNormalFont: normal #{$vbNormalFontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// キャプション（地の文よりも小さめ）\n$vbCaptionFont: normal #{$vbCaptionFontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// フォームのラベルや表の見出し（キャプションと同じ内容だが目的が違うので分けている）\n$vbItemNameFont: normal #{$vbCaptionFontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// 見出し最大\n$vbHeadlineFont1: bold #{$vbHeadline1FontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// 見出し中間\n$vbHeadlineFont2: bold #{$vbHeadline2FontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// 見出し最小\n$vbHeadlineFont3: bold #{$vbNormalFontSize}/#{$vbLineHeight} $vbFontFamily;\n\n// 見出し最大 (モバイル)\n$vbMobileHeadlineFont1: bold #{$vbMobileHeadline1FontSize}/#{$vbLineHeight}\n $vbFontFamily;\n\n// 見出し中間 (モバイル)\n$vbMobileHeadlineFont2: bold #{$vbMobileHeadline2FontSize}/#{$vbLineHeight}\n $vbFontFamily;\n\n// 見出し最小 (モバイル)\n$vbMobileHeadlineFont3: bold #{$vbMobileHeadline3FontSize}/#{$vbLineHeight}\n $vbFontFamily;\n\n// border-radius-size\n// design-token （各コンポーネントの実装に直接使わないでください）\n$vbBorderRadius0250: 0.25rem; // 4dp\n$vbBorderRadius0500: 0.5rem; // 8dp\n$vbBorderRadius0750: 0.75rem; // 12dp\n$vbBorderRadius1000: 1rem; // 16dp\n$vbBorderRadius1500: 1.5rem; // 24dp\n$vbBorderRadius9900: 99rem; // 円形にするための大きい数字\n\n// semantic-token （各コンポーネントの実装に原則直接使わないでください）\n$vbXSmallBorderRadius: $vbBorderRadius0250; // 4dp\n$vbSmallBorderRadius: $vbBorderRadius0500; // 8dp\n$vbMediumBorderRadius: $vbBorderRadius0750; // 12dp\n$vbLargeBorderRadius: $vbBorderRadius1000; // 16dp\n$vbXLargeBorderRadius: $vbBorderRadius1500; // 24dp\n$vbFullBorderRadius: $vbBorderRadius9900; // この変数のみ単体で利用可能\n\n// alias-token（各componentでborder-radiusを扱うときにはこちらを利用）\n$vbBaseBorderRadius: $vbSmallBorderRadius; // Base系コンポーネント\n$vbCardBorderRadius: $vbMediumBorderRadius; // Card系コンポーネント\n$vbFloatingBorderRadius: $vbLargeBorderRadius; // Floating系コンポーネント\n$vbPopupBorderRadius: $vbLargeBorderRadius; // Popup系コンポーネント\n$vbDialogBorderRadius: $vbXLargeBorderRadius; // Dialog系コンポーネント\n$vbFontBorderRadius: $vbSmallBorderRadius; // Button,Inputなどテキストを含むコンポーネント\n$vbMiniPaddingBorderRadius: $vbXSmallBorderRadius; // テキストを含むコンポーネントの中でもPaddingが小さいコンポーネント\n$vbFocusHighlightBorderRadius: $vbXSmallBorderRadius; // フォーカスハイライト系コンポーネント\n" }, { "path": "stylesheets/lv1/InlineSpinner.scss", "content": ".vb-spinner {\n display: inline-block;\n vertical-align: middle;\n width: 1rem;\n height: 1rem;\n pointer-events: none;\n position: relative;\n\n &--large {\n width: 1.75rem;\n height: 1.75rem;\n }\n\n &__base {\n position: absolute;\n top: -0.25rem;\n left: -0.25rem;\n }\n\n &__fade-enter-active,\n &__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n\n &__animation {\n width: 1.5rem;\n height: 1.5rem;\n\n &--large {\n width: 2.25rem;\n height: 2.25rem;\n }\n }\n}\n" }, { "path": "stylesheets/lv1/Loading.scss", "content": ".vb-loading {\n &--block {\n position: relative;\n }\n\n &--inline {\n display: inline-block;\n }\n\n &__fade-enter,\n &__fade-exit {\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n &__fade-enter-active,\n &__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n\n &__cover {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.7);\n z-index: $vbOverlayZIndex;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n &--coverAll {\n position: fixed;\n z-index: $vbMaxZIndex;\n }\n }\n\n &__animation {\n position: relative;\n width: 3rem;\n height: 3rem;\n max-width: 100%;\n max-height: 100%;\n\n &--coverAll {\n width: 31.5rem;\n height: 10.5rem;\n max-width: 80vw;\n }\n }\n\n &__message {\n font: $vbNormalFont;\n color: $vbBlackColor;\n margin-top: $vbLargeSize;\n }\n}\n" }, { "path": "stylesheets/lv1/base.scss", "content": "/** @define base */\n%vbBase {\n box-sizing: border-box;\n padding: $vbLargeSize;\n background-color: $vbColumnColor;\n}\n\n.vb-marginBase {\n &--fitContent {\n max-width: fit-content;\n }\n}\n\n.vb-columnBase {\n @extend %vbBase;\n\n &--overflowHidden {\n // `ColumnBase`内で`Portal`を利用していない`DropDown`があった場合、\n // `overflow: hidden;`によって見切れてしまう問題が発生しているので、\n // それを避けるために暫定的にオンオフできるようにしています\n overflow: hidden;\n }\n\n &--rounded {\n border-radius: $vbBaseBorderRadius;\n }\n}\n\n.vb-floatingBase {\n @extend %vbBase;\n\n background-color: #fff;\n box-shadow: $vbFloatingShadow;\n z-index: $vbFloatingZIndex;\n position: relative;\n border-radius: $vbFloatingBorderRadius;\n overflow: hidden;\n\n &--fitContent {\n max-width: fit-content;\n }\n}\n\n.vb-scrimBase {\n @extend %vbBase;\n\n background-color: $vbScrimColor;\n color: #fff;\n z-index: $vbModalZIndex - 1;\n\n &--small {\n padding: $vbBasicSize;\n }\n}\n\n.vb-popupBase {\n @extend %vbBase;\n\n background-color: #fff;\n box-shadow: $vbPopupShadow;\n z-index: $vbPopupZIndex;\n position: relative;\n border-radius: $vbPopupBorderRadius;\n overflow: hidden;\n\n &--fitContent {\n max-width: fit-content;\n }\n}\n\n.vb-dialogBase {\n @extend %vbBase;\n\n background-color: #fff;\n z-index: $vbModalZIndex;\n position: relative;\n border-radius: $vbDialogBorderRadius;\n overflow: hidden;\n\n &--message {\n z-index: $vbMessageModalZIndex;\n }\n}\n\n.vb-cardBase {\n @extend %vbBase;\n\n background-color: #fff;\n box-shadow: $vbCardShadow;\n position: relative;\n border-radius: $vbCardBorderRadius;\n\n &--overflowHidden {\n // `CardBase`内で`Portal`を利用していない`DropDown`があった場合、\n // `overflow: hidden;`によって見切れてしまう問題が発生しているので、\n // それを避けるために暫定的にオンオフできるようにしています\n overflow: hidden;\n }\n\n &:not(&--disabled) &--clickable {\n border-radius: $vbCardBorderRadius;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n\n &:hover {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n }\n\n &--disabled {\n background-color: $vbBaseColor1;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &__link,\n &__button {\n text-decoration: none;\n color: $vbBlackColor;\n display: block;\n text-align: left;\n border: 0;\n background-color: transparent;\n font-size: 100%;\n padding: 0;\n font-family: inherit;\n cursor: pointer;\n\n &::after {\n // クリックできる領域をカード全体に広げる\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n border-radius: $vbCardBorderRadius;\n // blur 時の挙動が意図通りでないため一旦コメントアウトする\n // transition-property: background-color;\n // transition-duration: 0.2s;\n }\n\n &:hover::after {\n background-color: $vbColorsP01;\n mix-blend-mode: multiply;\n }\n\n &--disabled {\n cursor: not-allowed;\n }\n }\n\n &__content {\n position: relative;\n }\n}\n\n.vb-zebraBase {\n padding: $vbLargeSize;\n background-color: $vbColumnColor;\n}\n\n.vb-columnBase,\n.vb-floatingBase,\n.vb-popupBase,\n.vb-dialogBase {\n &--border {\n &Default {\n border: 1px solid $vbBaseColor2;\n background-color: #fff;\n }\n\n &Alert {\n border: 1px solid $vbAlertColor;\n background-color: #fff;\n }\n\n &Notice {\n border: 1px solid $vbNoticeColor;\n background-color: #fff;\n }\n\n &Success {\n border: 1px solid $vbPrimaryColor;\n background-color: #fff;\n }\n }\n}\n\n.vb-columnBase,\n.vb-popupBase,\n.vb-floatingBase,\n.vb-dialogBase,\n.vb-cardBase {\n &--inline {\n display: inline-block;\n vertical-align: middle;\n }\n}\n\n.vb-columnBase,\n.vb-popupBase,\n.vb-floatingBase,\n.vb-dialogBase,\n.vb-zebraBase,\n.vb-cardBase {\n &--padding {\n &Small {\n padding: $vbBasicSize;\n }\n\n &Large {\n padding: $vbXLargeSize;\n }\n\n &Zero {\n padding: 0;\n }\n }\n}\n\n.vb-columnBase,\n.vb-zebraBase,\n.vb-cardBase {\n &--paddingResponsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding: $vbLargeSize $vbBasicSize;\n }\n }\n}\n\n.vb-zebraBase:nth-child(even) {\n background-color: #fff;\n}\n\n%balloon-tail-base {\n content: '';\n display: block;\n border-top: 0.5rem solid $vbColumnColor;\n border-left: 0.314rem solid transparent;\n border-right: 0.314rem solid transparent;\n position: absolute;\n bottom: -0.5rem;\n transform: translateX(-50%);\n}\n\n%balloon-tail-border-base {\n content: '';\n display: block;\n border-top: 0.6rem solid $vbBaseColor2;\n border-left: 0.414rem solid transparent;\n border-right: 0.414rem solid transparent;\n position: absolute;\n bottom: -0.6rem;\n transform: translateX(-50%);\n}\n\n.vb-balloon {\n box-sizing: border-box;\n width: max-content;\n min-width: 13rem; // for IE (min非対応)\n min-width: #{'min(13rem, 66vw)'};\n max-width: 44rem; // for IE (min非対応)\n max-width: #{'min(44rem, calc(100vw - 5rem), 66vw)'};\n padding: $vbBasicSize;\n background-color: $vbColumnColor;\n box-shadow: $vbPopupShadow;\n position: absolute;\n left: 50%;\n bottom: calc(100% + 0.5rem);\n transform: translateX(-50%);\n font-size: $vbCaptionFontSize;\n z-index: $vbPopupMessageZIndex;\n\n &::after {\n @extend %balloon-tail-base;\n\n left: 50%;\n transform: translateX(-50%);\n }\n\n &::before {\n @extend %balloon-tail-border-base;\n\n left: 50%;\n transform: translateX(-50%);\n }\n\n &--left {\n &::before,\n &::after {\n left: calc(1rem - 1px);\n transform: translateX(-50%);\n }\n\n transform: none;\n left: calc(-50% + 0.414rem + 1px);\n }\n\n &--right {\n &::before,\n &::after {\n left: auto;\n right: calc(1rem - 1px);\n transform: translateX(50%);\n }\n\n transform: none;\n left: auto;\n right: calc(-50% + 0.414rem + 1px);\n }\n\n &--bottom {\n bottom: auto;\n top: 0.5rem;\n\n &::after {\n border-top: 0;\n border-bottom: 0.5rem solid $vbColumnColor;\n bottom: auto;\n top: -0.5rem;\n }\n\n &::before {\n border-top: 0;\n border-bottom: 0.6rem solid $vbBaseColor2;\n bottom: auto;\n top: -0.6rem;\n }\n }\n\n &--border {\n &-default {\n border: 1px solid $vbBaseColor2;\n background-color: #fff;\n\n &::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n }\n }\n\n &-alert {\n border: 1px solid $vbAlertColor;\n background-color: #fff;\n\n &::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n }\n\n &::before {\n border-top-color: $vbAlertColor;\n border-bottom-color: $vbAlertColor;\n }\n }\n\n &-notice {\n border: 1px solid $vbNoticeColor;\n background-color: #fff;\n\n &::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n }\n\n &::before {\n border-top-color: $vbNoticeColor;\n border-bottom-color: $vbNoticeColor;\n }\n }\n\n &-success {\n border: 1px solid $vbPrimaryColor;\n background-color: #fff;\n\n &::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n }\n\n &::before {\n border-top-color: $vbPrimaryColor;\n border-bottom-color: $vbPrimaryColor;\n }\n }\n }\n}\n\n.vb-container {\n display: block;\n width: calc(100vw - 3rem);\n margin: 0 auto;\n position: relative;\n box-sizing: border-box;\n max-width: $vbContainerSize;\n min-width: $vbContainerSize;\n\n &--widthWide {\n max-width: 100rem;\n }\n\n &--widthNarrow {\n max-width: 40rem;\n min-width: 40rem;\n }\n\n &--responsive {\n min-width: 20rem;\n\n @media (max-width: $vbMobileBoundaryWidth) {\n width: 100vw;\n }\n }\n}\n\n.vb-contentsBase {\n display: block;\n background-color: #fff;\n padding: $vbLargeSize;\n position: relative;\n box-sizing: border-box;\n\n &--padding {\n &-small {\n padding: $vbBasicSize;\n }\n\n &-large {\n padding: $vbXLargeSize;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding: $vbBasicSize;\n }\n\n & + & {\n margin-top: $vbLargeSize;\n\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-top: 0;\n border-top: $vbMinimum solid $vbBaseColor2;\n }\n }\n }\n}\n\n.vb-negativeContentsBase {\n $componentClass: &;\n\n margin-left: -$vbLargeSize;\n margin-right: -$vbLargeSize;\n\n &:last-child {\n margin-bottom: -$vbLargeSize;\n }\n\n &--negativeMarginSmall {\n margin-left: -$vbBasicSize;\n margin-right: -$vbBasicSize;\n\n &:last-child {\n margin-bottom: -$vbLargeSize;\n }\n }\n\n &--negativeMarginLarge {\n margin-left: -$vbXLargeSize;\n margin-right: -$vbXLargeSize;\n\n &:last-child {\n margin-bottom: -$vbXLargeSize;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-left: -$vbBasicSize;\n margin-right: -$vbBasicSize;\n\n &:last-child {\n margin-bottom: -$vbBasicSize;\n }\n }\n }\n}\n\n.vb-negativeMargin {\n &--small {\n &--top {\n margin-top: -$vbBasicSize;\n }\n\n &--left {\n margin-left: -$vbBasicSize;\n }\n\n &--right {\n margin-right: -$vbBasicSize;\n }\n\n &--bottom {\n margin-bottom: -$vbBasicSize;\n }\n }\n\n &--medium {\n &--top {\n margin-top: -$vbLargeSize;\n }\n\n &--left {\n margin-left: -$vbLargeSize;\n }\n\n &--right {\n margin-right: -$vbLargeSize;\n }\n\n &--bottom {\n margin-bottom: -$vbLargeSize;\n }\n }\n\n &--large {\n &--top {\n margin-top: -$vbXLargeSize;\n }\n\n &--left {\n margin-left: -$vbXLargeSize;\n }\n\n &--right {\n margin-right: -$vbXLargeSize;\n }\n\n &--bottom {\n margin-bottom: -$vbXLargeSize;\n }\n }\n}\n\n.vb-scrollableBase {\n &--scrollableY {\n overflow-y: auto;\n }\n\n &--scrollableX {\n overflow-x: auto;\n }\n}\n" }, { "path": "stylesheets/lv1/button.scss", "content": "%button-disabled-face {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n}\n\n%button-base {\n display: inline-block;\n margin: 0;\n padding: 0 $vbBasicSize;\n text-align: center;\n text-decoration: none;\n box-sizing: border-box;\n border-radius: $vbFontBorderRadius;\n border: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, box-shadow, border-color;\n font-family: $vbFontFamily;\n font-size: $vbNormalFontSize;\n height: $vbFormControlHeight;\n vertical-align: middle;\n white-space: nowrap;\n line-height: calc(#{$vbFormControlHeight} - #{$vbMinimum * 2});\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n outline: none;\n box-shadow: $vbFocusHighlightShadow;\n }\n}\n\n%button-small-base {\n height: $vbFormControlSmallHeight;\n padding: 0 $vbSmallSize;\n font-size: $vbCaptionFontSize;\n line-height: calc(#{$vbFormControlSmallHeight} - #{$vbMinimum * 2});\n}\n\n%button-large-base {\n height: $vbFormControlLargeHeight;\n padding: 0 $vbBasicSize;\n font-size: $vbHeadline2FontSize;\n line-height: calc(#{$vbFormControlLargeHeight} - #{$vbMinimum * 2});\n}\n\n%button-face {\n background-color: #fff;\n color: $vbBlackColor;\n border: $vbMinimum solid $vbColorsGY02;\n font-weight: bold;\n\n @if not $use2021Style {\n color: $vbLinkColor;\n border-color: $vbBaseColor3;\n }\n\n &:hover {\n color: $vbColorsP08;\n background-color: $vbColorsP02;\n border-color: $vbColorsP08;\n }\n}\n\n%tab-button-face {\n background-color: $vbBaseColor1;\n color: $vbBlackColor;\n font-weight: normal;\n\n &:hover {\n background-color: darken($vbBaseColor1, 9%);\n }\n}\n\n%button-primary-face {\n border: 0;\n background-color: $vbPrimaryColor;\n color: #fff;\n font-weight: bold;\n\n &:hover {\n background-color: $vbColorsP09;\n }\n\n &:hover,\n &:focus {\n // 読み込みプロダクト内のグローバル定義側で:hover, :focus時にボタン文字色が意図せず変更されるケースを防止する\n color: #fff;\n }\n}\n\n%button-danger-face {\n border: 0;\n background-color: $vbAlertColor;\n color: #fff;\n font-weight: bold;\n\n &:hover {\n background-color: $vbColorsRE07;\n }\n}\n\n%button-current-face {\n border: 0;\n background-color: $vbPrimaryColor;\n color: #fff;\n font-weight: bold;\n cursor: default;\n\n &:hover {\n background-color: $vbPrimaryColor;\n }\n}\n\n%button-icon-base {\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n%leftIconButton {\n padding-left: 2.75em;\n position: relative;\n text-align: left;\n\n &__icon {\n @extend %button-icon-base;\n\n left: 0.625em;\n }\n}\n\n%rightIconButton {\n padding-right: 2.75em;\n position: relative;\n text-align: left;\n\n &__icon {\n @extend %button-icon-base;\n\n right: 0.625em;\n }\n}\n\n/** @define button */\n.vb-button {\n @extend %button-base;\n\n &--small {\n @extend %button-small-base;\n }\n\n &--large {\n @extend %button-large-base;\n }\n\n &--disabled {\n @extend %button-disabled-face;\n }\n\n &--leftIcon {\n padding-left: 2.75em;\n position: relative;\n text-align: left;\n }\n\n &--rightIcon {\n padding-right: 2.75em;\n position: relative;\n text-align: left;\n }\n\n &__icon {\n @extend %button-icon-base;\n\n &--left {\n left: 0.625em;\n }\n\n &--right {\n right: 0.625em;\n }\n }\n\n &--appearancePrimary {\n @extend %button-primary-face;\n }\n\n @at-root #{selector-append(#{&}--appearancePrimary, #{&}--danger)} {\n @extend %button-danger-face;\n }\n\n &--appearanceSecondary {\n @extend %button-face;\n }\n\n @at-root #{selector-append(#{&}--appearanceSecondary, #{&}--danger)} {\n color: $vbAlertColor;\n\n &:hover {\n border-color: $vbColorsRE07;\n color: $vbColorsRE07;\n background-color: $vbColorsRE02;\n }\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--hasMinWidth {\n min-width: 6rem;\n }\n\n &#{&}--hasMinWidth#{&}--small {\n min-width: 5rem;\n }\n\n &#{&}--hasMinWidth#{&}--large {\n min-width: 11rem;\n }\n\n &--appearanceTertiary {\n min-width: auto;\n background-color: transparent;\n color: $vbBlackColor;\n font-weight: bold;\n border: $vbMinimum solid transparent;\n\n @if not $use2021Style {\n color: $vbLinkColor;\n }\n\n &:hover {\n color: $vbColorsP08;\n background-color: add-transparency($vbColorsP02, 0.3);\n }\n }\n\n // Tertiaryボタンの左側にアイコンがないときはpaddingを詰める\n @at-root #{selector-append(#{&}--appearanceTertiary, \"#{&}:not(#{&}--leftIcon)\")} {\n padding-left: $vbSmallSize;\n }\n\n // Tertiaryボタンの右側にアイコンがないときはpaddingを詰める\n @at-root #{selector-append(#{&}--appearanceTertiary, \"#{&}:not(#{&}--rightIcon)\",)} {\n padding-right: $vbSmallSize;\n }\n\n @at-root #{selector-append(#{&}--appearanceTertiary, #{&}--danger)} {\n color: $vbAlertColor;\n\n &:hover {\n color: $vbColorsRE07;\n background-color: add-transparency($vbColorsRE02, 0.3);\n }\n }\n}\n\n/** @define textButton */\n.vb-textButton {\n display: inline-block;\n font-family: $vbFontFamily;\n $block: &;\n\n & &__icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n margin-right: $vbXSmallSize;\n fill: $vbBlackColor;\n vertical-align: middle;\n\n &--right {\n margin-right: 0;\n margin-left: $vbXSmallSize;\n }\n }\n\n &__link {\n text-decoration: underline;\n color: $vbLinkColor;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: color;\n }\n\n &__button {\n text-decoration: underline;\n color: $vbLinkColor;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: color;\n }\n\n &--noBorder &__link,\n &--noBorder &__button {\n text-decoration: none;\n }\n\n &:not(&--disabled) &__link:hover,\n &:not(&--disabled) &__button:hover {\n color: $vbAccentColor;\n cursor: pointer;\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &--small {\n font-size: $vbCaptionFontSize;\n }\n}\n\n.vb-globalNaviButton {\n font-weight: bold;\n font-family: $vbFontFamily;\n text-decoration: none;\n color: #fff;\n display: block;\n padding: $vbBasicSize;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n\n @if $use2021Style {\n box-sizing: border-box;\n color: $vbBlackColor;\n padding: 0 $vbBasicSize;\n height: calc(#{$vbXXLargeSize} - #{$vbMinimum});\n line-height: calc(#{$vbXXLargeSize - $vbXSmallSize} - #{$vbMinimum});\n }\n\n &__icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n margin-right: 0.375em;\n vertical-align: middle;\n }\n\n & &__text {\n vertical-align: middle;\n }\n\n &:not(&--current):hover {\n background-color: rgba(255, 255, 255, 0.1);\n\n @if $use2021Style {\n background-color: $vbColorsP01;\n color: $vbPrimaryColor;\n }\n }\n\n &--current {\n background-color: rgba(0, 0, 0, 0.15);\n\n @if $use2021Style {\n color: $vbPrimaryColor;\n background-color: #fff;\n border-bottom: $vbXSmallSize solid $vbColorsP05;\n }\n }\n}\n\n/** @define jumpButton */\n%jumpButton {\n background: #fff;\n border: $vbMinimum solid $vbPrimaryColor;\n color: $vbPrimaryColor;\n text-align: left;\n font-weight: bold;\n text-decoration: none;\n}\n\n.vb-jumpButton,\n.vb-backwardButton {\n display: inline-block;\n padding: 0;\n}\n\n/** @define tabButton */\n.vb-tabButton {\n @extend %button-base;\n @extend %tab-button-face;\n\n //color: $vbBurntColor;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n &:hover:not(.vb-tabButton--current) {\n color: $vbBlackColor;\n }\n\n &#{&}--current {\n @extend %button-current-face;\n\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n cursor: default;\n }\n\n &#{&}--small {\n min-width: 7rem;\n padding: 0.5rem;\n font-size: $vbCaptionFontSize;\n }\n}\n\n/** @define pagerButton */\n.vb-pagerButton {\n @extend %button-face;\n\n padding: 0 $vbSmallSize;\n box-sizing: border-box;\n min-width: $vbXLargeSize;\n height: $vbXLargeSize;\n border-radius: $vbFontBorderRadius;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n font-size: $vbNormalFontSize;\n font-family: $vbFontFamily;\n\n &#{&}--current {\n @extend %button-current-face;\n\n font-size: $vbHeadline2FontSize;\n cursor: default;\n outline: 0;\n }\n\n &#{&}--small {\n height: $vbLargeSize;\n min-width: $vbLargeSize;\n font-size: $vbCaptionFontSize;\n }\n\n &--disabled {\n @extend %button-disabled-face;\n }\n}\n\n/** @define iconOnlyButton */\n.vb-iconOnlyButton {\n padding: 0;\n box-sizing: border-box;\n width: $vbFormControlHeight;\n height: $vbFormControlHeight;\n border-radius: $vbFontBorderRadius;\n text-align: center;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, border;\n font-size: $vbLargeSize;\n display: inline-block;\n\n & &__icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &--appearancePrimary {\n @extend %button-primary-face;\n\n &:hover {\n color: #fff;\n }\n }\n\n @at-root #{selector-append(#{&}--appearancePrimary, #{&}--danger)} {\n @extend %button-danger-face;\n }\n\n &--appearanceSecondary {\n @extend %button-face;\n }\n\n @at-root #{selector-append(#{&}--appearanceSecondary, #{&}--danger)} {\n color: $vbAlertColor;\n\n &:hover {\n border-color: $vbColorsRE07;\n color: $vbColorsRE07;\n background-color: $vbColorsRE02;\n }\n }\n\n &--appearanceTertiary {\n background-color: transparent;\n color: $vbBlackColor;\n border: $vbMinimum solid transparent;\n\n @if not $use2021Style {\n color: $vbLinkColor;\n }\n\n &:hover {\n color: $vbColorsP08;\n background-color: add-transparency($vbColorsP02, 0.3);\n }\n }\n\n @at-root #{selector-append(#{&}--appearanceTertiary, #{&}--danger)} {\n color: $vbAlertColor;\n\n &:hover {\n background-color: add-transparency($vbColorsRE02, 0.3);\n }\n }\n\n &--small {\n height: $vbFormControlSmallHeight;\n width: $vbFormControlSmallHeight;\n font-size: $vbBasicSize;\n }\n\n &--large {\n height: $vbFormControlLargeHeight;\n width: $vbFormControlLargeHeight;\n font-size: $vbXLargeSize;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &--disabled {\n @extend %button-disabled-face;\n }\n}\n\n.vb-listButton {\n @extend %button-base;\n\n display: block;\n width: 100%;\n border-radius: 0;\n background-color: $vbColumnColor;\n font-weight: bold;\n text-align: left;\n color: inherit;\n word-break: keep-all;\n\n &:hover:not([aria-selected]) {\n background-color: $vbBaseColor1;\n }\n\n &--selected {\n cursor: default;\n color: $vbBurntColor;\n }\n\n &--bgTransparent {\n background-color: transparent;\n }\n\n &__leftIcon {\n margin-right: 0.375em;\n }\n\n &__farRightIcon {\n float: right;\n }\n}\n\n.vb-inlineLink {\n transition-duration: 0.2s;\n transition-property: color, background-color;\n display: inline;\n border: 0;\n padding: 0;\n background: transparent;\n font-size: 1em;\n font-family: $vbFontFamily;\n color: $vbLinkColor;\n cursor: pointer;\n text-decoration: underline;\n\n &:hover {\n color: $vbColorsP09;\n }\n\n &__iconWrapper {\n height: 1em;\n width: 1.5em;\n vertical-align: middle;\n display: inline-block;\n position: relative;\n line-height: 1;\n }\n\n &__icon {\n font-size: 1.5em;\n position: absolute;\n left: 0;\n top: 50%;\n margin-top: -50%;\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n" }, { "path": "stylesheets/lv1/calendar.scss", "content": "%calendar-date-base {\n padding: 0;\n margin: 0;\n border-bottom: 1px solid $vbBaseColor2;\n position: relative;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n\n &::before {\n content: '';\n display: block;\n padding-top: 100%;\n }\n}\n\n%calendar-date-face {\n color: $vbBlackColor;\n cursor: pointer;\n\n &:hover {\n background-color: $vbBaseColor1;\n }\n}\n\n%calendar-date-input-face {\n background-color: $vbPrimaryColor;\n color: #fff;\n cursor: pointer;\n\n &:hover {\n background-color: $vbAccentColor;\n }\n}\n\n%calendar-date-secondary-holiday-face {\n color: $vbBurntColor;\n cursor: pointer;\n\n &:hover {\n background-color: $vbBaseColor1;\n }\n}\n\n%calendar-date-primary-holiday-face {\n color: $vbAlertColor;\n cursor: pointer;\n\n &:hover {\n background-color: $vbBaseColor1;\n }\n}\n\n%calendar-date-disabled-face {\n background-color: $vbColumnColor;\n color: $vbBaseColor3;\n cursor: not-allowed;\n outline: none;\n pointer-events: none;\n}\n\n%calendar-date-number-base {\n display: block;\n font-size: $vbHeadline1FontSize;\n line-height: 1;\n position: absolute;\n top: $vbBasicSize;\n left: $vbBasicSize;\n}\n\n%calendar-date-number-today-face {\n width: 2em;\n height: 2em;\n margin: -0.5em 0 0 -0.5em;\n border-radius: $vbFullBorderRadius;\n background-color: $vbPrimaryColor;\n color: #fff;\n font-size: 1em;\n text-align: center;\n line-height: 2em;\n}\n\n%calendar-date-number-today-input-face {\n width: 2em;\n height: 2em;\n margin: -0.5em 0 0 -0.5em;\n border-radius: $vbFullBorderRadius;\n background-color: #fff;\n color: $vbPrimaryColor;\n font-size: 1em;\n text-align: center;\n line-height: 2em;\n}\n\n/** @define calendar */\n.vb-calendarDate {\n @extend %calendar-date-base;\n @extend %calendar-date-face;\n\n &__inner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &--input {\n @extend %calendar-date-input-face;\n }\n\n &--secondary-holiday {\n @extend %calendar-date-secondary-holiday-face;\n }\n\n &--primary-holiday {\n @extend %calendar-date-primary-holiday-face;\n }\n\n &--disabled {\n @extend %calendar-date-disabled-face;\n }\n\n &__status {\n &--alert {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid $vbAlertColor;\n }\n }\n\n &--notice {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid $vbNoticeColor;\n }\n }\n\n &--success {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid $vbAccentColor;\n }\n }\n }\n\n &__icon {\n display: block;\n position: absolute;\n color: #fff;\n top: 0.25em;\n right: 0.25em;\n }\n\n &__number {\n @extend %calendar-date-number-base;\n\n &--today {\n @extend %calendar-date-number-today-face;\n\n &--input {\n @extend %calendar-date-number-today-input-face;\n }\n }\n }\n\n &--disabled &__number--today {\n color: #fff;\n background: $vbBaseColor3;\n }\n\n &__type {\n display: block;\n font-size: $vbCaptionFontSize;\n line-height: 1;\n position: absolute;\n top: $vbXXLargeSize;\n left: $vbBasicSize;\n }\n\n &__time {\n display: block;\n font-size: $vbNormalFontSize;\n text-align: right;\n line-height: 1;\n position: absolute;\n right: $vbBasicSize;\n bottom: $vbBasicSize;\n }\n}\n\n.vb-calendarHead {\n border-bottom: 1px solid $vbBaseColor2;\n\n &__cell {\n text-align: left;\n font-weight: $vbNormalFontSize;\n font-weight: normal;\n padding: 0 0 1rem 1rem;\n\n &--secondary-holiday {\n color: #001478;\n }\n\n &--primary-holiday {\n color: #c7423a;\n }\n }\n}\n" }, { "path": "stylesheets/lv1/content.scss", "content": "/** @define iconWrapper */\n.vb-iconWrapper {\n display: inline-block;\n margin: 0;\n padding: 0.5rem;\n background-color: #fff;\n line-height: 1;\n}\n" }, { "path": "stylesheets/lv1/focusHighlight.scss", "content": ".vb-focusHighlight {\n display: block;\n width: fit-content;\n position: relative;\n\n &--inline {\n display: inline-block;\n }\n\n &--full {\n width: 100%;\n }\n\n $element: &;\n\n // 表示順などの問題（フォーカスハイライトを手前に表示したい）で、 :after がフォーカスハイライトの本体になります。\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n opacity: 0;\n transition-duration: 0.2s;\n transition-property: opacity;\n }\n\n &--round::after {\n border-radius: $vbFocusHighlightBorderRadius;\n }\n\n @at-root #{selector-append(\"#{$element}:focus-within\",\"#{$element}:after\")} {\n box-shadow: $vbFocusHighlightShadow;\n opacity: 1;\n }\n\n @at-root #{selector-append(\"#{$element}:focus-within\",\"#{$element}--inset:after\")} {\n box-shadow: $vbFocusHighlightShadowInset;\n }\n}\n" }, { "path": "stylesheets/lv1/focusTrap.scss", "content": ".vb-focusTrap {\n &--inline {\n display: inline-block;\n }\n}\n" }, { "path": "stylesheets/lv1/form.scss", "content": "@use 'sass:math';\n\n/** @define form */\n\n%form-base {\n display: inline-flex;\n padding: 0;\n margin: 0;\n border: none;\n box-shadow: none;\n box-sizing: border-box;\n font: $vbNormalFont;\n vertical-align: inherit;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n -ms-appearance: none;\n\n &::-ms-expand {\n display: none;\n }\n}\n\n%form-text-base {\n @extend %form-base;\n\n height: $vbFormControlHeight;\n padding: 0 $vbSmallSize;\n border: 1px solid $vbColorsGY02;\n border-radius: $vbFontBorderRadius;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: border-color, background-color, color;\n\n @if not $use2021Style {\n border-color: $vbBaseColor2;\n }\n\n &:-ms-input-placeholder {\n color: $vbBaseColor3;\n transition-duration: 0.3s;\n transition-property: opacity;\n }\n\n &::placeholder {\n color: $vbBaseColor3;\n transition-duration: 0.3s;\n transition-property: opacity;\n }\n\n &:focus {\n &:-ms-input-placeholder {\n opacity: 0;\n }\n\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[disabled] {\n background-color: $vbBaseColor1;\n cursor: not-allowed;\n color: revert;\n }\n}\n\n%form-text-error-face {\n border-color: $vbAlertColor;\n color: $vbAlertColor;\n\n &:-ms-input-placeholder {\n color: $vbAlertColor;\n }\n\n &::placeholder {\n color: $vbAlertColor;\n }\n}\n\n%form-text-small-face {\n height: $vbFormControlSmallHeight;\n padding: 0 $vbSmallSize;\n font-size: $vbCaptionFontSize;\n}\n\n%form-text-large-face {\n height: $vbFormControlLargeHeight;\n padding: 0 $vbBasicSize;\n font-size: $vbHeadline2FontSize;\n}\n\n%form-text-borderless-face {\n border: 0;\n border-radius: 0;\n outline: none;\n}\n\n%form-textarea-base {\n @extend %form-text-base;\n\n min-width: 55em;\n height: 5em;\n max-width: 100%;\n padding-top: $vbSmallSize;\n padding-bottom: $vbSmallSize;\n}\n\n%form-control-base {\n cursor: pointer;\n margin: 0;\n vertical-align: middle;\n}\n\n%form-label-base {\n margin-left: $vbSmallSize;\n vertical-align: middle;\n}\n\n%form-control-disabled-face {\n color: $vbBaseColor2;\n cursor: not-allowed;\n}\n\n%form-control-error-face {\n color: $vbAlertColor;\n}\n\n%form-control-small-face {\n font-size: $vbCaptionFontSize;\n}\n\n/**\n @define radio\n @define checkbox\n*/\n.vb-radio,\n.vb-checkbox {\n @extend %form-base;\n\n align-items: baseline;\n cursor: pointer;\n\n & &__control {\n @extend %form-control-base;\n\n &--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n\n & &__label {\n @extend %form-label-base;\n }\n\n &--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &--error {\n @extend %form-control-error-face;\n }\n\n &--small {\n @extend %form-control-small-face;\n }\n}\n\n/** @define searchField */\n.vb-searchField {\n display: inline-block;\n position: relative;\n max-width: 100%;\n min-width: 4rem;\n\n &--widthFull {\n width: 100%;\n }\n\n & &__input {\n @extend %form-text-base;\n\n padding-left: 2.75em;\n max-width: 100%;\n min-width: 4rem;\n\n &::-webkit-search-cancel-button {\n cursor: pointer;\n }\n\n + svg {\n fill: $vbBaseColor2;\n }\n\n &--error {\n @extend %form-text-error-face;\n\n + svg {\n fill: $vbAlertColor;\n }\n }\n\n &--small {\n @extend %form-text-small-face;\n\n padding-left: 1.75rem;\n }\n\n &--large {\n @extend %form-text-large-face;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--borderless {\n @extend %form-text-borderless-face;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font-size: $vbFontSize1000;\n }\n }\n }\n\n & &__icon {\n display: block;\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n left: 0.75em;\n transform: translateY(-50%);\n\n &--small {\n display: block;\n width: 1em;\n height: 1em;\n position: absolute;\n top: 50%;\n left: 0.5em;\n transform: translateY(-50%);\n }\n }\n}\n\n/** @define select */\n.vb-select {\n display: inline-flex;\n position: relative;\n min-width: 4rem;\n max-width: 100%;\n overflow: hidden;\n border-radius: $vbFontBorderRadius;\n\n &:focus-within {\n box-shadow: $vbFocusHighlightShadow;\n }\n\n &::before,\n &::after {\n content: '';\n display: block;\n width: 0;\n border-left: 0.1875em solid transparent;\n border-right: 0.1875em solid transparent;\n position: absolute;\n right: 0.5em;\n pointer-events: none;\n z-index: 1;\n }\n\n &::before {\n border-bottom: 0.315em solid $vbBlackColor;\n bottom: 50%;\n transform: translateY(-0.08em);\n }\n\n &::after {\n border-top: 0.315em solid $vbBlackColor;\n top: 50%;\n transform: translateY(0.08em);\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--error {\n &::before {\n border-bottom-color: $vbAlertColor;\n }\n\n &::after {\n border-top-color: $vbAlertColor;\n }\n }\n\n &__body {\n @extend %form-text-base;\n\n padding-right: $vbBasicSize;\n width: 100%;\n text-overflow: ellipsis;\n\n &:focus {\n outline: none;\n }\n\n &:not(&--error) {\n color: $vbBlackColor;\n }\n\n &--small {\n @extend %form-text-small-face;\n }\n\n &--large {\n @extend %form-text-large-face;\n }\n\n &--error {\n @extend %form-text-error-face;\n\n optgroup:not(:disabled),\n option:not(:disabled) {\n color: initial;\n }\n }\n\n &--alignCenter {\n text-align: center;\n }\n\n &--alignRight {\n text-align: right;\n }\n }\n}\n\n/** @define textarea */\n.vb-textarea {\n @extend %form-textarea-base;\n\n font-family: inherit;\n\n &--small {\n @extend %form-text-small-face;\n }\n\n &--large {\n @extend %form-text-large-face;\n }\n\n &--error {\n @extend %form-text-error-face;\n }\n\n &--resizeNone {\n resize: none;\n }\n\n &--resizeHorizontal {\n resize: horizontal;\n }\n\n &--resizeVertical {\n resize: vertical;\n }\n\n &--resizeBoth {\n resize: both;\n }\n\n &--widthSmall {\n min-width: 24rem;\n }\n\n &--widthMedium {\n min-width: 55rem;\n }\n\n &--widthLarge {\n min-width: 67rem;\n }\n\n &--widthFull {\n min-width: 100%;\n }\n\n @for $i from 1 through 70 {\n &--height#{$i} {\n height: #{$i}rem;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font-size: $vbFontSize1000;\n }\n }\n}\n\n/** @define textField */\n.vb-textField {\n @extend %form-text-base;\n\n min-width: 4rem;\n max-width: 100%;\n\n &__wrapper {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n\n &--widthFull {\n width: 100%;\n }\n }\n\n &--alignCenter {\n text-align: center;\n }\n\n &--alignRight {\n text-align: right;\n }\n\n &--small {\n @extend %form-text-small-face;\n }\n\n &--large {\n @extend %form-text-large-face;\n }\n\n &--error {\n @extend %form-text-error-face;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--hideSpinner {\n -moz-appearance: textfield;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n }\n\n &--borderless {\n @extend %form-text-borderless-face;\n }\n\n &--withIcon {\n padding-right: 1.25rem;\n }\n\n &__suffix {\n font: $vbNormalFont;\n margin-left: $vbXSmallSize;\n\n &--small {\n font-size: $vbCaptionFontSize;\n }\n\n &--large {\n font-size: $vbHeadline2FontSize;\n }\n }\n\n &__icon,\n &__iconButton {\n position: absolute;\n right: $vbXSmallSize;\n top: 0;\n bottom: 0;\n font-size: $vbBasicSize;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n text-align: center;\n line-height: 1;\n color: $vbBaseColor3;\n box-sizing: border-box;\n\n // アイコンが小さいので、クリック可能領域を24px四方になるように広げる\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n right: -$vbXSmallSize;\n width: $vbLargeSize;\n }\n }\n\n &__icon {\n pointer-events: none;\n }\n\n &__iconButton {\n border: 0;\n background: transparent;\n padding: 0;\n\n &[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &:not([disabled]):hover {\n cursor: pointer;\n color: $vbColorsP07;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font-size: $vbFontSize1000;\n }\n }\n}\n\n.vb-readOnlyField {\n display: inline-block;\n min-height: $vbFormControlHeight;\n font-size: $vbNormalFontSize;\n vertical-align: middle;\n\n &__inner {\n display: flex;\n align-items: center;\n height: 100%;\n min-height: $vbFormControlHeight;\n white-space: pre-line;\n }\n\n &--alignRight {\n .vb-readOnlyField__inner {\n justify-content: flex-end;\n }\n }\n\n &--small {\n height: $vbFormControlSmallHeight;\n font-size: $vbCaptionFontSize;\n }\n\n &--large {\n height: $vbFormControlLargeHeight;\n font-size: $vbHeadline2FontSize;\n }\n\n &--widthXSmall {\n min-width: 4rem;\n }\n\n &--widthSmall {\n min-width: 7rem;\n }\n\n &--widthMedium {\n min-width: 11rem;\n }\n\n &--widthLarge {\n min-width: 24rem;\n }\n\n &--widthFull {\n min-width: 100%;\n }\n}\n\n.vb-formControlLabel {\n display: inline-block;\n\n &__text {\n display: inline-block;\n vertical-align: middle;\n overflow-wrap: break-word;\n color: $vbBlackColor;\n font: $vbItemNameFont;\n }\n}\n\n.vb-toggleButton {\n display: inline-block;\n\n &--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n &__input {\n // vb-visuallyHiddenと同じなのだが、兄弟セレクタを使用するために直接指定している\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n }\n\n &__body {\n display: inline-block;\n cursor: pointer;\n font-size: $vbNormalFontSize;\n box-sizing: border-box;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n height: $vbFormControlHeight;\n line-height: $vbFormControlHeight;\n vertical-align: middle;\n padding: 0 $vbSmallSize;\n border: $vbMinimum solid $vbBaseColor2;\n margin-left: -$vbMinimum;\n color: $vbLinkColor;\n background-color: #fff;\n position: relative;\n\n &:hover {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n\n // focus時に枠線を太くしたいが、元々の枠線を太くすると要素のサイズが替わってしまう\n // 調整するのではなく、疑似要素を被せてそれの枠線を太くしている\n &::before {\n transition-duration: 0.2s;\n transition-property: border-color;\n content: '';\n position: absolute;\n top: -$vbMinimum;\n left: -$vbMinimum;\n right: -$vbMinimum;\n bottom: -$vbMinimum;\n border: $vbMinimum * 2 solid transparent;\n }\n }\n\n &--small &__body {\n height: $vbFormControlSmallHeight;\n line-height: $vbFormControlSmallHeight;\n font-size: $vbCaptionFontSize;\n }\n\n &:first-child &__body {\n margin-left: unset;\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n\n &::before {\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n }\n }\n\n &:last-child &__body {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n\n &::before {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n }\n }\n\n %focused-toggle-button {\n z-index: 2; // ほかの __body よりも前面に表示\n\n &::before {\n border-color: $vbAccentColor;\n }\n }\n\n &__input:focus + &__body {\n @extend %focused-toggle-button;\n }\n\n &__input:checked + &__body {\n background: $vbColumnColor;\n border-color: $vbBaseColor3;\n font-weight: bold;\n z-index: 1; // ほかの __body よりも前面に表示\n\n &:hover {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n }\n\n &__input:focus:checked + &__body {\n @extend %focused-toggle-button;\n }\n}\n\n.vb-optionButton {\n border-radius: $vbFontBorderRadius;\n box-sizing: border-box;\n border: $vbMinimum solid $vbColorsS05;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n background: #fff;\n position: relative;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, box-shadow;\n\n &:hover {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n\n $base: &;\n\n &--size {\n &Small {\n min-height: $vbFormControlSmallHeight;\n min-width: 5rem;\n padding: 0 $vbSmallSize;\n\n #{$base}__children {\n min-height: $vbFormControlSmallHeight;\n }\n }\n\n &Medium {\n min-height: $vbFormControlHeight;\n min-width: 6rem;\n padding: 0 $vbBasicSize;\n\n #{$base}__children {\n min-height: $vbFormControlHeight;\n }\n }\n\n &Large {\n min-width: 11rem;\n min-height: $vbFormControlLargeHeight;\n padding: 0 $vbBasicSize;\n\n #{$base}__children {\n min-height: $vbFormControlLargeHeight;\n }\n }\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--checked {\n border-color: $vbColorsP05;\n box-shadow: 0 0 0 $vbMinimum $vbColorsP05;\n }\n\n &__button {\n position: absolute;\n inset: 0;\n }\n\n &__children {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n height: 100%;\n\n &__inner {\n width: 100%;\n }\n }\n}\n" }, { "path": "stylesheets/lv1/grid.scss", "content": ".vb-gridWrapper {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: stretch;\n}\n\n.vb-gridBlock {\n display: flex;\n\n > * {\n // 直下の要素だけflex-growする = ボックスの高さがピッタリになる\n flex-grow: 1;\n }\n\n $vbGridBlockInterval: 1.5rem;\n\n &--oneThird {\n flex-basis: calc((100% - #{$vbGridBlockInterval} * 2) / 3);\n }\n\n &--twoThirds {\n flex-basis: calc(\n (100% - #{$vbGridBlockInterval} * 2) / 3 * 2 + #{$vbGridBlockInterval}\n );\n }\n\n &--half {\n flex-basis: calc((100% - #{$vbGridBlockInterval}) / 2);\n }\n\n &--oneQuarter {\n flex-basis: calc((100% - #{$vbGridBlockInterval} * 3) / 4);\n }\n\n &--threeQuarters {\n flex-basis: calc(\n (100% - #{$vbGridBlockInterval} * 3) / 4 * 3 + #{$vbGridBlockInterval} * 2\n );\n }\n}\n" }, { "path": "stylesheets/lv1/headline.scss", "content": "// reset h1~h6\n%reset {\n margin: 0;\n padding: 0;\n font-weight: normal;\n}\n\n%titleHeadline {\n @extend %reset;\n\n display: block;\n overflow-wrap: break-word;\n border-radius: $vbFocusHighlightBorderRadius;\n\n &:focus {\n outline: none;\n\n &:focus-visible {\n // ページの内容が変化したことをスクリーンリーダーに伝えたり、キーボード操作をしやすくするために、見出し部分へのフォーカスを行うことがあるが、\n // 通常のフォーカスインジケーターが表示されていると存在感が強く、ユーザーに違和感を与えてしまう。\n // このケースではフォーカスインジケーターを消してしまっても大きな問題とはならないはずだが、それをすると開発者がフォーカスの当たる挙動を確認することができなくなる問題が起き得る。\n // そこで、focus-visibleな状況に限り、通常よりも薄い色のフォーカスインジケーターを表示する。\n // focus-visibleな場合のみの表示なので、マウスポインタによる操作以外ではフォーカスインジケーターが表示される。\n // ここではコントラスト比が低くなりそうな色を意図的に選んでいる。\n box-shadow: 0 0 0 $vbMinimum * 2 $vbColorsP02;\n }\n }\n}\n\n.vb-pageTitle {\n @extend %titleHeadline;\n\n color: $vbBlackColor;\n font: $vbHeadlineFont1;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font: $vbMobileHeadlineFont1;\n }\n }\n}\n\n.vb-sectionTitle {\n @extend %titleHeadline;\n\n color: $vbBlackColor;\n font: $vbHeadlineFont2;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font: $vbMobileHeadlineFont2;\n }\n }\n}\n\n.vb-subSectionTitle {\n @extend %titleHeadline;\n\n color: $vbBurntColor;\n font: $vbHeadlineFont3;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n font: $vbMobileHeadlineFont3;\n }\n }\n}\n\n/** @define note */\n.vb-note {\n @extend %reset;\n\n display: block;\n color: $vbBurntColor;\n font: $vbCaptionFont;\n}\n\n/** @define paragraph */\n.vb-paragraph {\n @extend %reset;\n\n display: block;\n font: $vbNormalFont;\n color: $vbBlackColor;\n}\n\n.vb-text {\n @extend %reset;\n\n color: $vbBlackColor;\n font: $vbNormalFont;\n\n &--weightBold {\n font-weight: bold;\n }\n\n &--size0750 {\n font-size: $vbCaptionFontSize;\n }\n\n &--size1500 {\n font-size: $vbHeadline1FontSize;\n }\n\n &--size1000 {\n font-size: $vbHeadline2FontSize;\n }\n\n &--colorWhite {\n color: #fff;\n }\n\n &--colorGY7 {\n color: $vbColorsGY07;\n }\n\n &--colorS9 {\n color: $vbColorsS09;\n }\n\n &--colorP7 {\n color: $vbColorsP07;\n }\n\n &--colorP5 {\n color: $vbColorsP05;\n }\n\n &--colorRE5 {\n color: $vbColorsRE05;\n }\n\n &--colorYE10 {\n color: $vbColorsYE10;\n }\n\n &--ellipsis {\n display: inline-block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n }\n}\n\n.vb-pageTitle,\n.vb-sectionTitle,\n.vb-subSectionTitle,\n.vb-paragraph,\n.vb-note {\n &--inline {\n display: inline-block;\n }\n\n &--alignLeft {\n text-align: left;\n }\n\n &--alignRight {\n text-align: right;\n }\n\n &--alignCenter {\n text-align: center;\n }\n}\n\n.vb-paragraph,\n.vb-note {\n &--ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n }\n}\n" }, { "path": "stylesheets/lv1/icon.scss", "content": "/** @define materialIcon */\n.vb-materialIcon {\n width: $vbLargeSize;\n height: $vbLargeSize;\n color: $vbBlackColor;\n\n &--small {\n width: $vbBasicSize;\n height: $vbBasicSize;\n }\n\n &--pointerEventsNone {\n pointer-events: none;\n }\n\n &--colorInherit {\n color: inherit;\n }\n\n &--colorWhite {\n color: #fff;\n }\n\n &--colorP1 {\n color: $vbColorsP01;\n }\n\n &--colorP2 {\n color: $vbColorsP02;\n }\n\n &--colorP3 {\n color: $vbColorsP03;\n }\n\n &--colorP4 {\n color: $vbColorsP04;\n }\n\n &--colorP5 {\n color: $vbColorsP05;\n }\n\n &--colorP6 {\n color: $vbColorsP06;\n }\n\n &--colorP7 {\n color: $vbColorsP07;\n }\n\n &--colorP8 {\n color: $vbColorsP08;\n }\n\n &--colorP9 {\n color: $vbColorsP09;\n }\n\n &--colorP10 {\n color: $vbColorsP10;\n }\n\n &--colorS1 {\n color: $vbColorsS01;\n }\n\n &--colorS2 {\n color: $vbColorsS02;\n }\n\n &--colorS3 {\n color: $vbColorsS03;\n }\n\n &--colorS4 {\n color: $vbColorsS04;\n }\n\n &--colorS5 {\n color: $vbColorsS05;\n }\n\n &--colorS6 {\n color: $vbColorsS06;\n }\n\n &--colorS7 {\n color: $vbColorsS07;\n }\n\n &--colorS8 {\n color: $vbColorsS08;\n }\n\n &--colorS9 {\n color: $vbColorsS09;\n }\n\n &--colorS10 {\n color: $vbColorsS10;\n }\n\n &--colorRE2 {\n color: $vbColorsRE02;\n }\n\n &--colorRE4 {\n color: $vbColorsRE04;\n }\n\n &--colorRE5 {\n color: $vbColorsRE05;\n }\n\n &--colorRE7 {\n color: $vbColorsRE07;\n }\n\n &--colorRE10 {\n color: $vbColorsRE10;\n }\n\n &--colorOR2 {\n color: $vbColorsOR02;\n }\n\n &--colorOR4 {\n color: $vbColorsOR04;\n }\n\n &--colorOR5 {\n color: $vbColorsOR05;\n }\n\n &--colorOR7 {\n color: $vbColorsOR07;\n }\n\n &--colorOR10 {\n color: $vbColorsOR10;\n }\n\n &--colorYE2 {\n color: $vbColorsYE02;\n }\n\n &--colorYE4 {\n color: $vbColorsYE04;\n }\n\n &--colorYE5 {\n color: $vbColorsYE05;\n }\n\n &--colorYE7 {\n color: $vbColorsYE07;\n }\n\n &--colorYE10 {\n color: $vbColorsYE10;\n }\n\n &--colorYG2 {\n color: $vbColorsYG02;\n }\n\n &--colorYG4 {\n color: $vbColorsYG04;\n }\n\n &--colorYG5 {\n color: $vbColorsYG05;\n }\n\n &--colorYG7 {\n color: $vbColorsYG07;\n }\n\n &--colorYG10 {\n color: $vbColorsYG10;\n }\n\n &--colorGR2 {\n color: $vbColorsGR02;\n }\n\n &--colorGR4 {\n color: $vbColorsGR04;\n }\n\n &--colorGR5 {\n color: $vbColorsGR05;\n }\n\n &--colorGR7 {\n color: $vbColorsGR07;\n }\n\n &--colorGR10 {\n color: $vbColorsGR10;\n }\n\n &--colorBG2 {\n color: $vbColorsBG02;\n }\n\n &--colorBG4 {\n color: $vbColorsBG04;\n }\n\n &--colorBG5 {\n color: $vbColorsBG05;\n }\n\n &--colorBG7 {\n color: $vbColorsBG07;\n }\n\n &--colorBG10 {\n color: $vbColorsBG10;\n }\n\n &--colorPU2 {\n color: $vbColorsPU02;\n }\n\n &--colorPU4 {\n color: $vbColorsPU04;\n }\n\n &--colorPU5 {\n color: $vbColorsPU05;\n }\n\n &--colorPU7 {\n color: $vbColorsPU07;\n }\n\n &--colorPU10 {\n color: $vbColorsPU10;\n }\n\n &--colorGY1 {\n color: $vbColorsGY01;\n }\n\n &--colorGY2 {\n color: $vbColorsGY02;\n }\n\n &--colorGY4 {\n color: $vbColorsGY04;\n }\n\n &--colorGY5 {\n color: $vbColorsGY05;\n }\n\n &--colorGY7 {\n color: $vbColorsGY07;\n }\n\n &--colorGY10 {\n color: $vbColorsGY10;\n }\n}\n\n%icon-base {\n display: inline-block;\n min-width: 2.375rem;\n box-sizing: border-box;\n padding: 0.2rem 0.5rem;\n font-size: 0.6875rem;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n vertical-align: middle;\n border-radius: $vbMiniPaddingBorderRadius;\n}\n\n%icon-border-face {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n border: 1px solid $vbBaseColor3;\n background-color: #fff;\n}\n\n%icon-fill-face {\n color: #fff;\n}\n\n/** @define statusIcon */\n.vb-statusIcon {\n @extend %icon-base;\n\n &--done {\n @extend %icon-border-face;\n\n border-color: $vbBaseColor3;\n color: $vbBurntColor;\n }\n\n &--success {\n @extend %icon-border-face;\n\n border-color: $vbPrimaryColor;\n color: $vbPrimaryColor;\n }\n\n &--progress {\n @extend %icon-border-face;\n\n border-color: $vbNoticeColor;\n // 文字色のコントラスト比を上げるため、 $vbNoticeColorより濃い色を使用する\n color: $vbColorsYE10;\n\n @if not $use2021Style {\n color: #ad5c0c;\n }\n }\n\n &--required {\n @extend %icon-border-face;\n\n border-color: $vbAlertColor;\n color: $vbAlertColor;\n }\n\n &--disabled {\n @extend %icon-fill-face;\n\n background-color: $vbBurntColor;\n }\n\n &--emphasis {\n @extend %icon-fill-face;\n\n background-color: $vbPrimaryColor;\n }\n\n &--warning {\n @extend %icon-fill-face;\n\n // 文字色のコントラスト比を上げるため、 $vbNoticeColorより濃い色を使用する\n background-color: $vbColorsYE10;\n\n @if not $use2021Style {\n background-color: #ad5c0c;\n }\n }\n\n &--error {\n @extend %icon-fill-face;\n\n background-color: $vbAlertColor;\n }\n}\n\n.vb-avatar {\n width: $vbXLargeSize;\n height: $vbXLargeSize;\n font-size: $vbXLargeSize;\n line-height: $vbXLargeSize;\n display: inline-block;\n box-sizing: border-box;\n\n &__background {\n fill: $vbBaseColor1;\n }\n\n &__placeholderIcon {\n display: block;\n width: 100%;\n height: 100%;\n fill: $vbBaseColor3;\n }\n\n &--small {\n width: $vbLargeSize;\n height: $vbLargeSize;\n font-size: $vbLargeSize;\n line-height: $vbLargeSize;\n }\n\n &--large {\n width: $vbXXLargeSize;\n height: $vbXXLargeSize;\n font-size: $vbXXLargeSize;\n line-height: $vbXXLargeSize;\n }\n\n &--xLarge {\n width: $vbXXLargeSize * 2;\n height: $vbXXLargeSize * 2;\n font-size: $vbXXLargeSize * 2;\n line-height: $vbXXLargeSize * 2;\n }\n}\n\n.vb-requiredIcon {\n display: inline-block;\n vertical-align: middle;\n line-height: 1;\n box-sizing: border-box;\n // 和文の文字は vertical-align: middleだとやや下寄りになるので、少しpadding-bottomを付けて上寄りに表示する\n padding-bottom: 0.125em;\n\n &__content {\n background-color: $vbColorsRE02;\n color: $vbColorsRE07;\n font-size: $vbSmallestIconFontSize;\n display: block;\n border-radius: $vbFullBorderRadius;\n padding: 0.125rem 0.25rem;\n line-height: 1;\n }\n}\n" }, { "path": "stylesheets/lv1/image.scss", "content": "@use 'sass:math';\n\n%image-base {\n margin: 0;\n padding: 0;\n display: inline-block;\n line-height: 0;\n}\n\n%logo-base {\n margin: 0;\n padding: 0;\n fill: #4575b4;\n display: inline-block;\n line-height: 0;\n height: 3rem;\n}\n\n%logo--small {\n height: 1.5rem;\n}\n\n%logo__svg {\n height: 100%;\n width: 100%;\n text-indent: 0;\n}\n\n/** @define logo */\n.vb-logo {\n margin: 0;\n padding: 0;\n fill: #4575b4;\n display: inline-block;\n line-height: 0;\n\n & &__svg {\n height: 3rem;\n text-indent: 0;\n }\n\n &--minpaku &__svg {\n width: 10.9375rem;\n }\n\n &--seal &__svg {\n width: 10.9375rem;\n }\n\n &--sfa &__svg {\n width: 10.75rem;\n }\n\n &--cryptocurrency &__svg {\n width: 9.8125rem;\n }\n}\n\n/** @define illust */\n$illustClass: vb-illust;\n\n.#{$illustClass} {\n @extend %image-base;\n\n & &__svg {\n height: 12rem;\n }\n\n & &__background {\n fill: #fff;\n }\n\n & &__frame {\n fill: $vbBaseColor2;\n }\n\n & &__border {\n fill: $vbBaseColor1;\n }\n\n &--fileUpload,\n &--imageUpload,\n &--csvUpload,\n &--cloudUpload,\n &--cloudSkeleton {\n .#{$illustClass}__svg {\n height: 8rem;\n width: 8rem;\n }\n }\n}\n\n.vb-swallow {\n &__svg {\n display: block;\n margin: auto;\n }\n}\n\n/** @define storeBadge */\n.vb-storeBadge {\n @extend %image-base;\n\n & &__svg {\n height: 2.5rem;\n }\n\n &--googlePlayStore &__svg {\n width: 8.4375rem;\n }\n\n &--appStore &__svg {\n width: 6.8125rem;\n }\n}\n" }, { "path": "stylesheets/lv1/interactive-parts.scss", "content": ".vb-tab {\n display: inline-block;\n min-width: 7.25em;\n height: 2em;\n padding: 0 $vbCaptionFontSize;\n margin: 0;\n background-color: #fff;\n border: none;\n box-sizing: border-box;\n font-size: $vbHeadline2FontSize;\n font-weight: bold;\n text-align: center;\n line-height: 2em;\n vertical-align: bottom;\n position: relative;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n color: $vbBurntColor;\n\n &::after {\n content: '';\n display: block;\n height: 1px;\n background-color: $vbBaseColor2;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1px;\n transition-duration: 0.2s;\n transition-property: background-color;\n }\n\n &:focus {\n color: $vbBlackColor;\n z-index: 1; // focusリングが表に出るよう、他のものよりz-indexを上げる\n }\n\n &:hover:not(.vb-tab--current) {\n cursor: pointer;\n background-color: mix($vbPrimaryColor, #fff, 6%);\n\n &::after {\n background-color: $vbAccentColor;\n }\n }\n\n &--current {\n color: $vbPrimaryColor;\n cursor: default;\n\n @if $use2021Style {\n color: $vbColorsP05;\n }\n\n &::after {\n height: 2px;\n background-color: $vbPrimaryColor;\n\n @if $use2021Style {\n background-color: $vbColorsP05;\n }\n }\n }\n\n &--small {\n font-size: $vbCaptionFontSize;\n }\n\n &__block {\n display: inline-block;\n position: relative;\n }\n\n &__notificationDot {\n display: inline-block;\n width: 0.5rem;\n height: 0.5rem;\n position: absolute;\n right: 0;\n top: 0;\n background-color: $vbAlertColor;\n border-radius: $vbFullBorderRadius;\n z-index: 1; // focus しても表示されるように、focus 時の tab の z-index と揃える\n }\n}\n\n/** @define segmentControl */\n.vb-segmentControlButton {\n display: inline-block;\n height: $vbFormControlHeight;\n line-height: calc(#{$vbFormControlHeight} - #{$vbMinimum * 2});\n padding: 0 1rem;\n border: $vbMinimum solid $vbPrimaryColor;\n min-width: 3rem;\n border-right-width: 0;\n box-sizing: border-box;\n font-size: $vbNormalFontSize;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n background-color: #fff;\n color: $vbPrimaryColor;\n cursor: pointer;\n text-decoration: none;\n\n &:hover {\n background-color: $vbColumnColor;\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n }\n\n &:last-child {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n border-right-width: 1px;\n }\n\n &--large {\n font-size: $vbHeadline2FontSize;\n height: $vbFormControlLargeHeight;\n line-height: calc(#{$vbFormControlLargeHeight} - #{$vbMinimum * 2});\n }\n\n &--small {\n font-size: $vbCaptionFontSize;\n height: $vbFormControlSmallHeight;\n line-height: calc(#{$vbFormControlSmallHeight} - #{$vbMinimum * 2});\n }\n\n &--icon {\n padding-left: 2.75em;\n position: relative;\n text-align: left;\n }\n\n &__icon {\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.625em;\n }\n\n &--current {\n background-color: $vbPrimaryColor;\n color: #fff;\n cursor: default;\n\n &:hover {\n background-color: $vbPrimaryColor;\n }\n }\n}\n\n.vb-stepNumber {\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 3rem;\n height: 3rem;\n border-radius: $vbFullBorderRadius;\n position: relative;\n background-color: #fff;\n border: $vbMinimum solid $vbBaseColor3;\n color: $vbBurntColor;\n font-family: $vbFontFamily;\n font-size: 1.5em;\n\n &__numberCheck {\n width: 1rem;\n height: 1rem;\n margin: 0;\n border-radius: $vbFullBorderRadius;\n background-color: $vbBaseColor3;\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n }\n\n &__numberCheckSvg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n fill: #fff;\n }\n\n &--current {\n background-color: #fff;\n border: $vbMinimum solid $vbColorsP05;\n color: $vbColorsP05;\n }\n\n &--done {\n background-color: #fff;\n border: $vbMinimum solid $vbBaseColor3;\n color: $vbBurntColor;\n }\n\n &--disabled {\n background-color: #fff;\n border: 1px dashed $vbBaseColor3;\n color: $vbBurntColor;\n }\n\n &--small {\n font-size: 1rem;\n width: 2.25rem;\n height: 2.25rem;\n }\n}\n\n.vb-stepBlock {\n $block: &;\n\n display: inline-block;\n width: 4rem;\n text-align: center;\n\n &__title {\n display: block;\n margin-top: 0.5rem;\n font: $vbCaptionFont;\n color: $vbBurntColor;\n }\n\n &--current {\n #{$block}__title {\n color: $vbColorsP05;\n }\n }\n\n &--small {\n font-size: 0.75rem;\n }\n}\n\n.vb-stepBorder {\n display: inline-block;\n width: 3em;\n height: 4px;\n background-color: $vbBaseColor2;\n\n @if $use2021Style {\n background-color: $vbBaseColor2;\n }\n\n &--done {\n background-color: $vbPrimaryColor;\n\n @if $use2021Style {\n background-color: $vbBurntColor;\n }\n }\n\n &--separator {\n margin: 1.5em -0.5em 0;\n }\n}\n" }, { "path": "stylesheets/lv1/layout.scss", "content": ".vb-withSideContent {\n display: flex;\n justify-content: space-between;\n\n &--alignTop {\n align-items: flex-start;\n }\n\n &--alignMiddle {\n align-items: center;\n }\n\n &--alignBottom {\n align-items: flex-end;\n }\n\n &__content {\n flex-grow: 1;\n }\n\n &__sideContent {\n flex-shrink: 0;\n }\n}\n\n.vb-withDescriptionContent {\n display: flex;\n flex-direction: column-reverse;\n\n &--horizontal {\n flex-direction: row-reverse;\n align-items: center;\n }\n\n // 先にreverseじゃないほうを作ったので、flex-directionのreverseと逆になってる。わかりにくいけどゆるして。\n &--verticalReverse {\n flex-direction: column;\n }\n\n &__content {\n flex-grow: 0;\n }\n\n &__description {\n flex-grow: 1;\n }\n}\n\n.vb-stack {\n display: flex;\n\n > * {\n flex-shrink: 0;\n }\n\n &--inline {\n display: inline-flex;\n }\n\n &--directionVertical {\n flex-direction: column;\n }\n\n &--directionHorizontal {\n flex-direction: row;\n }\n\n &--directionVerticalReverse {\n flex-direction: column-reverse;\n }\n\n &--directionHorizontalReverse {\n flex-direction: row-reverse;\n }\n\n @each $i in (0.25, 0.5, 1, 1.5, 2, 3) {\n &--gap#{$i * 100} {\n gap: #{$i}rem;\n }\n }\n\n &--justifyContentStart {\n justify-content: start;\n }\n\n &--justifyContentEnd {\n justify-content: end;\n }\n\n &--justifyContentCenter {\n justify-content: center;\n }\n\n &--justifyContentSpaceBetween {\n justify-content: space-between;\n }\n\n &--alignItemsStrech {\n align-items: stretch;\n }\n\n &--alignItemsCenter {\n align-items: center;\n }\n\n &--alignItemsStart {\n align-items: start;\n }\n\n &--alignItemsEnd {\n align-items: end;\n }\n\n &--wrapWrap {\n flex-wrap: wrap;\n }\n\n &--wrapNowrap {\n flex-wrap: nowrap;\n }\n}\n" }, { "path": "stylesheets/lv1/list.scss", "content": "@use 'sass:math';\n$vbListTableRowHeight: 2.5rem;\n\n%table-row-base {\n border: none;\n border-collapse: collapse;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n height: $vbListTableRowHeight;\n}\n\n%table-cell-base {\n border: none;\n border-spacing: 0;\n border-collapse: collapse;\n font-size: $vbNormalFontSize;\n text-align: left;\n padding: $vbXSmallSize $vbSmallSize;\n line-height: 1;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n word-break: break-all;\n\n &:first-child {\n padding-left: $vbLargeSize;\n }\n\n &:last-child {\n padding-right: $vbLargeSize;\n }\n}\n\n%border-table-cell-face {\n border-right: 1px solid $vbBaseColor2;\n border-bottom: 1px solid $vbBaseColor2;\n\n &:last-child {\n border-right: none;\n }\n}\n\n%table-hover-face {\n background-color: $vbColumnColor;\n}\n\n.vb-tableListCell,\n.vb-BorderTableListCell {\n @extend %table-cell-base;\n\n position: relative;\n\n &--small {\n font-size: $vbCaptionFontSize;\n }\n\n &--alignCenter {\n text-align: center;\n }\n\n &--alignRight {\n text-align: right;\n }\n\n &--alignBottom {\n vertical-align: bottom;\n }\n\n &--alignTop {\n vertical-align: top;\n }\n\n &--breakWord {\n word-break: normal;\n overflow-wrap: break-word;\n }\n}\n\n.vb-tableListCell {\n border-bottom: 1px solid $vbBaseColor2;\n\n &__link {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n\n &__indentContainer {\n display: flex;\n flex-direction: row;\n }\n\n &__indent {\n width: $vbLargeSize - $vbSmallSize;\n flex-shrink: 0;\n }\n\n &__indentedContent {\n flex-grow: 1;\n min-width: 0;\n\n &--alignCenter {\n text-align: center;\n }\n\n &--alignRight {\n text-align: right;\n }\n }\n\n &__text {\n // __link より上に表示されるようにしておく\n position: relative;\n display: inline-block;\n width: 100%;\n\n &--withLink {\n pointer-events: none;\n\n a[href],\n button,\n label,\n input,\n select,\n textarea,\n [role='button'] {\n pointer-events: auto;\n }\n }\n }\n\n // IEのflexバグの問題で、display:flexを使うとセル内でテキストが折り返さなくなる。そのためインデントをdisplay:flexではなくdisplay:tableで表現する\n // IEのflexバグが解消した際は、display:flexでindentとtextを横並びにするのが良い\n @at-root {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n &__link {\n top: -$vbXSmallSize;\n left: -$vbSmallSize;\n right: -$vbSmallSize;\n bottom: -$vbXSmallSize;\n }\n\n &:first-child &__link {\n left: -$vbLargeSize;\n }\n\n &:last-child &__link {\n right: -$vbLargeSize;\n }\n\n &__indentContainerWrapper {\n display: table;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n &__indentContainer {\n display: table-row;\n }\n\n &__indent {\n display: table-cell;\n }\n\n &__indentedContent {\n display: table-cell;\n vertical-align: middle;\n }\n\n &--alignTop &__indentedContent {\n vertical-align: top;\n }\n\n &--alignBottom &__indentedContent {\n vertical-align: bottom;\n }\n }\n }\n}\n\n.vb-BorderTableListCell {\n @extend %border-table-cell-face;\n\n &--clickable {\n cursor: pointer;\n\n &:hover {\n @extend %table-hover-face;\n }\n }\n\n &__clickElement {\n // クリック可能域をセル全体にするために透明な疑似要素を置く\n &::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n }\n\n &__status {\n &::after {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n border: 0 solid transparent;\n border-bottom-width: 1rem;\n border-right-width: 1rem;\n }\n\n &--alert {\n &::after {\n border-right-color: $vbAlertColor;\n }\n }\n\n &--notice {\n &::after {\n border-right-color: $vbNoticeColor;\n }\n }\n\n &--success {\n &::after {\n border-right-color: $vbAccentColor;\n }\n }\n }\n\n &--noWrap {\n white-space: nowrap;\n }\n\n // 以下2つは行見出しのための style\n &--rowHeader {\n background-color: $vbColumnColor;\n font-weight: normal;\n }\n\n &--fixedRowHeader {\n position: sticky;\n left: 0;\n z-index: 1; // 同じ行の他のセルより手前に置きたいため\n border-right: none;\n }\n\n @for $i from 1 through 70 {\n &--fixedRowHeaderLeft#{$i} {\n left: #{$i}rem;\n }\n }\n}\n\n.vb-checkBoxCell {\n @extend %table-cell-base;\n\n position: relative;\n border-bottom: 1px solid $vbBaseColor2;\n box-sizing: border-box;\n width: ($vbLargeSize + $vbSmallSize);\n text-align: center;\n\n + .vb-BorderTableListCell {\n border-left: 1px solid $vbBaseColor2;\n }\n\n &__label {\n &:not(&--disabled) {\n cursor: pointer;\n }\n\n &--disabled {\n ::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n cursor: not-allowed;\n }\n }\n // クリック可能域をセル全体にするために透明な疑似要素を置く\n &::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n }\n}\n\n.vb-treeFoldingButtonCell {\n @extend %table-cell-base;\n\n position: relative;\n border-bottom: 1px solid $vbBaseColor2;\n box-sizing: border-box;\n width: $vbXLargeSize;\n text-align: center;\n\n &__button {\n cursor: pointer;\n color: $vbLinkColor;\n display: inline;\n border: 0;\n background: none;\n padding: 0;\n // クリック可能域をセル全体にするために透明な疑似要素を置く\n &::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n\n &:hover {\n color: darken($vbLinkColor, 12%);\n }\n }\n\n &__icon {\n width: $vbLargeSize;\n height: $vbLargeSize;\n }\n}\n\n.vb-descriptionListHeadCell {\n @extend %table-cell-base;\n\n // 見出し側セルを小さくするため、widthを1pxにしている\n width: $vbMinimum;\n white-space: nowrap;\n font: $vbItemNameFont;\n vertical-align: middle;\n\n @for $i from 1 through 70 {\n &--minWidth#{$i} {\n min-width: #{$i}rem;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n &,\n &:first-child,\n &:last-child {\n padding: $vbBasicSize $vbBasicSize $vbXSmallSize;\n }\n\n display: block;\n width: auto;\n }\n }\n}\n\n.vb-descriptionListCell {\n @extend %table-cell-base;\n\n padding-top: $vbSmallSize;\n padding-bottom: $vbSmallSize;\n line-height: 1.5;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n &,\n &:first-child,\n &:last-child {\n padding: $vbXSmallSize $vbBasicSize $vbBasicSize;\n }\n\n display: block;\n width: auto;\n }\n }\n}\n\n.vb-tableListHeadCell {\n border: none;\n border-spacing: 0;\n border-collapse: collapse;\n box-sizing: border-box;\n padding: $vbXSmallSize $vbSmallSize;\n font: $vbItemNameFont;\n height: 1.875rem;\n text-align: left;\n line-height: 1;\n vertical-align: middle;\n border-bottom: 1px solid $vbBaseColor2;\n position: relative;\n transition-duration: 0.3s;\n transition-property: background-color;\n\n &:first-child {\n padding-left: $vbLargeSize;\n }\n\n &:last-child {\n padding-right: $vbLargeSize;\n }\n\n &--alignCenter {\n text-align: center;\n }\n\n &--alignRight {\n text-align: right;\n }\n\n &--clickable {\n &:hover {\n background: $vbBaseColor1;\n }\n }\n\n &--fixedRowHeader {\n position: sticky;\n left: 0;\n z-index: 1; // 同じ行の他のセルより手前に置きたいため\n background-color: $vbColumnColor;\n }\n\n @for $i from 1 through 70 {\n &--width#{$i} {\n width: #{$i}rem;\n }\n\n &--minWidth#{$i} {\n min-width: #{$i}rem;\n }\n\n &--maxWidth#{$i} {\n max-width: #{$i}rem;\n }\n\n &--fixedRowHeaderLeft#{$i} {\n left: #{$i}rem;\n }\n }\n\n &__clickElement {\n cursor: pointer;\n\n &:hover {\n font-weight: bold;\n }\n // クリック可能域をセル全体にするために透明な疑似要素を置く\n &::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n }\n\n &--orderAscending,\n &--orderDescending {\n font-weight: bold;\n }\n\n &__iconWrapper {\n height: $vbCaptionFontSize;\n width: $vbBasicSize;\n display: inline-block;\n }\n\n &__headerArrowUp,\n &__headerArrowDown,\n &__headerSwapVert {\n margin-left: $vbSmallSize;\n vertical-align: middle;\n height: $vbBasicSize;\n width: $vbBasicSize;\n margin-top: $vbCaptionFontSize - $vbBasicSize;\n }\n\n &__headerSwapVert {\n color: $vbColorsS08;\n }\n\n &--noWrap {\n white-space: nowrap;\n }\n}\n\n.vb-tableListHead {\n @extend %table-row-base;\n\n height: 1.875rem; // 30dp\n background-color: $vbColumnColor;\n\n &--fixedHeader {\n position: sticky;\n top: 0;\n z-index: 2; // fixedRowHeader の 1 より手前におきたいため\n }\n}\n\n.vb-tableListRow {\n @extend %table-row-base;\n\n &#{&}--clickable {\n cursor: pointer;\n\n &:hover,\n &:nth-child(2n):hover {\n @extend %table-hover-face;\n }\n }\n}\n" }, { "path": "stylesheets/lv1/margin-option.scss", "content": "@each $i in (0.25, 0.5, 1, 1.5, 2, 3) {\n .vb-ma#{$i * 100} {\n margin: #{$i}rem;\n }\n\n .vb-mt#{$i * 100} {\n margin-top: #{$i}rem;\n }\n\n .vb-mb#{$i * 100} {\n margin-bottom: #{$i}rem;\n }\n\n .vb-ml#{$i * 100} {\n margin-left: #{$i}rem;\n }\n\n .vb-mr#{$i * 100} {\n margin-right: #{$i}rem;\n }\n\n .vb-ma-#{$i * 100} {\n margin: #{$i * -1}rem;\n }\n\n .vb-mt-#{$i * 100} {\n margin-top: #{$i * -1}rem;\n }\n\n .vb-mb-#{$i * 100} {\n margin-bottom: #{$i * -1}rem;\n }\n\n .vb-ml-#{$i * 100} {\n margin-left: #{$i * -1}rem;\n }\n\n .vb-mr-#{$i * 100} {\n margin-right: #{$i * -1}rem;\n }\n}\n\n.vb-ma-auto {\n margin: auto;\n}\n\n.vb-mt-auto {\n margin-top: auto;\n}\n\n.vb-mb-auto {\n margin-bottom: auto;\n}\n\n.vb-ml-auto {\n margin-left: auto;\n}\n\n.vb-mr-auto {\n margin-right: auto;\n}\n" }, { "path": "stylesheets/lv1/message.scss", "content": "@use 'sass:math';\n\n.vb-message {\n display: inline-flex;\n vertical-align: middle;\n\n &__icon {\n flex-shrink: 0;\n }\n\n &__content {\n display: inline-block;\n font-size: $vbNormalFontSize;\n line-height: 1.5;\n\n // $vbLargeSize = 1.5rem = 24px のアイコンと $vbNormalFontSize = 0.875rem = 14px (line-hight 1.5 * 0.875rem = 1.3125rem = 21px) のメッセージ文を並べて中央を揃えたい。\n // ただしメッセージを2行以上にしたときにアイコンはメッセージ（複数行）の中央ではなく、あくまで1行目の位置に揃えたい。\n // そのため1.5rem と 1.3125rem の差を 2 で割ったものを計算している\n padding-top: math.div($vbLargeSize - $vbNormalFontSize * 1.5, 2);\n }\n}\n" }, { "path": "stylesheets/lv1/progress.scss", "content": "@use 'sass:math';\n$vbProgressbar__indeterminateBarWidth: 40%;\n\n@keyframes keyframes__vb-progressBar__indeterminateBar {\n 0% {\n transform: translate(-100%, 0);\n }\n\n 100% {\n // 「いちばん右まで行って隠れ切る」をバーの横幅を使って表現すると↓になる\n transform: translate(\n #{'#{100 * math.div(100%, $vbProgressbar__indeterminateBarWidth)}%'},\n 0\n );\n }\n}\n\n.vb-progressBar {\n height: 0.5rem;\n width: 11rem;\n position: relative;\n border-radius: $vbFullBorderRadius;\n display: inline-block;\n background-color: $vbColorsS03;\n overflow: hidden;\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--progressing {\n background-color: $vbColorsP02;\n }\n\n &__valueBar,\n &__indeterminateBar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: $vbColorsP05;\n border-radius: $vbFullBorderRadius;\n\n &--complete {\n background-color: $vbColorsP04;\n }\n }\n\n &__indeterminateBar {\n width: $vbProgressbar__indeterminateBarWidth;\n border-radius: $vbFullBorderRadius;\n animation-name: keyframes__vb-progressBar__indeterminateBar;\n animation-duration: 1.6s;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-timing-function: ease-in-out;\n\n @at-root {\n // OSの設定で動きを減らしたときに、indeterminateBarの動きを止める\n @media (prefers-reduced-motion) {\n & {\n animation-name: none;\n }\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/accordionPanel.scss", "content": "/** @define accordionPanel */\n.vb-accordionPanel {\n display: block;\n box-sizing: border-box;\n position: relative;\n background-color: #fff;\n transition-duration: 0.2s;\n\n &__title {\n display: block;\n padding: 1rem 3rem 1rem 1.5rem;\n margin: 0;\n font-size: $vbNormalFontSize;\n line-height: 1;\n position: relative;\n cursor: pointer;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: $vbColorsP01;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding-left: 1rem;\n padding-right: 2.5rem;\n }\n }\n }\n\n &__icon {\n display: block;\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n top: 50%;\n right: 1.5rem;\n transform: translateY(-50%);\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n right: 1rem;\n }\n }\n }\n\n &__description {\n padding: 0.5rem 1.5rem;\n margin: 0;\n font-size: $vbNormalFontSize;\n }\n\n &--borderBoth {\n border-width: 1px 0;\n border-style: solid;\n border-color: $vbBaseColor2;\n }\n\n &--borderBottom {\n border-bottom: 1px solid $vbBaseColor2;\n }\n\n &--borderTop {\n border-top: 1px solid $vbBaseColor2;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/breadcrumbs.scss", "content": ".vb-breadcrumbs {\n &__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n line-height: 1;\n }\n\n &__item {\n display: inline-flex;\n align-items: center;\n font-size: $vbNormalFontSize;\n }\n\n &__divider {\n font-size: $vbHeadline1FontSize;\n }\n}\n" }, { "path": "stylesheets/lv2/bulletedList.scss", "content": "/** @define bulletedList */\n.vb-bulletedList {\n font-size: $vbNormalFontSize;\n\n &__list {\n list-style-type: disc;\n padding: 0 0 0 1.5em;\n margin: 0;\n\n &--decimal {\n list-style-type: decimal;\n }\n\n &__listItem {\n margin: 0 0 0.5em;\n line-height: 1.5;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &--small {\n font-size: $vbCaptionFontSize;\n }\n}\n" }, { "path": "stylesheets/lv2/buttonGroup.scss", "content": ".vb-buttonGroup {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &__topPair {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin: 0 1rem 0 0;\n }\n }\n\n &--alignLeft {\n justify-content: flex-start;\n }\n\n &__topItem:not(:last-child),\n &__item:not(:last-child) {\n margin: 0 1rem 0 0;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n flex-direction: column;\n width: 100%;\n\n .vb-buttonGroup__topPair {\n flex-direction: column;\n margin-right: 0;\n\n &:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n }\n\n .vb-buttonGroup__topPair--mobileButtonLayoutRow {\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n\n &:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n }\n\n .vb-buttonGroup__topItem--mobileButtonLayoutRow {\n flex-grow: 1;\n }\n\n .vb-buttonGroup__item,\n .vb-buttonGroup__topItem:not(.vb-buttonGroup__topItem--mobileButtonLayoutRow) {\n margin: 0 auto 0.5rem;\n min-width: 10rem;\n text-align: center;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .vb-button:not(.vb-button--appearanceTertiary) {\n width: 100%;\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/calendar.scss", "content": "/** @define calendar */\n\n.vb-calendar {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n min-width: 50rem;\n position: relative;\n\n &__inner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n}\n\n$vbDatePickerCellSize: 2rem;\n\n.vb-datePicker {\n width: calc((2rem + #{$vbMinimum}) * 7);\n font-size: $vbNormalFontSize;\n background: #fff;\n\n &__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: $vbXSmallSize;\n }\n\n &__calendar {\n width: 100%;\n border-collapse: collapse;\n }\n\n &__calendarHead,\n &__calendarCell {\n text-align: center;\n width: $vbDatePickerCellSize;\n box-sizing: border-box;\n }\n\n &__calendarHead {\n font-size: $vbCaptionFontSize;\n color: $vbBurntColor;\n }\n\n &__calendarCell {\n position: relative;\n border-top: $vbMinimum solid $vbBaseColor2;\n border-right: $vbMinimum solid $vbBaseColor2;\n box-sizing: border-box;\n padding: 0;\n width: $vbDatePickerCellSize;\n height: $vbDatePickerCellSize;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n\n &:last-of-type {\n border-right: 0;\n }\n\n &--disabled {\n background-color: $vbColumnColor;\n color: $vbBaseColor3;\n cursor: not-allowed;\n outline: none;\n }\n\n &--selected {\n background: $vbPrimaryColor;\n color: #fff;\n }\n\n &--otherMonth {\n background: $vbColumnColor;\n }\n\n &:hover:not(&--disabled):not(&--selected) {\n background: $vbBaseColor2;\n }\n }\n\n &__dateButton {\n &::before {\n // クリック可能域を増やすためのもの\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &__dateNumber {\n &--today {\n font-weight: bold;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/cardNavigation.scss", "content": ".vb-cardNavigation {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n\n &__item {\n margin-bottom: 1rem;\n margin-right: 1rem;\n\n &--1 {\n margin-right: 0;\n }\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 5rem;\n\n // 段落ち仕様を実現のため、数字指定で実装\n // VibesのContainerは width=\"normal\" のとき横幅70remになっている\n // ContentsBaseをContainerの内側に配置して、そのさらに内部にCardNavigationが配置されることを想定\n // Containerの幅70remから、Contents左右のpadding1.5rem*2を差し引いて、 67remを基準とする\n // 計算式\n // ( 標準幅 - item数 * itemのmargin - item数 * cardbaseのpadding ) / item数\n\n // 4個以上は4個の場合をデフォルトとする\n // (67rem - 4 item * 1 rem - 4 item * 3 rem) / 4 item = 12.75rem\n width: calc((67rem - 4 * 1rem - 4 * 3rem) / 4);\n\n // (67rem - 3 item * 1 rem - 3 item * 3 rem) / 3 item = 18.3333..rem\n &--3 {\n width: calc((67rem - 3 * 1rem - 3 * 3rem) / 3);\n }\n\n // (67rem - 2 item * 1 rem - 2 item * 3 rem) / 2 item = 29.5rem\n &--2 {\n width: calc((67rem - 2 * 1rem - 2 * 3rem) / 2);\n }\n\n // (67rem - 1 item * 0 rem - 1 item * 3 rem) / 1 item = 64rem\n &--1 {\n width: 64rem;\n }\n }\n\n &__arrow {\n flex-shrink: 0;\n }\n\n &__icon {\n width: 1.5rem;\n height: 1.5rem;\n fill: #285ac8;\n margin-right: 1rem;\n flex-shrink: 0;\n }\n\n &__title {\n display: flex;\n justify-content: flex-start;\n\n &--text {\n margin-bottom: 1rem;\n }\n }\n\n &__url {\n text-decoration: initial;\n color: initial;\n }\n}\n" }, { "path": "stylesheets/lv2/comboBox.scss", "content": ".vb-comboBox {\n display: inline;\n position: relative;\n\n &__listBox {\n display: none;\n\n &--open {\n display: block;\n }\n\n &--widthXSmall {\n width: 4rem + 2 * $vbBasicSize;\n }\n\n &--widthSmall {\n width: 7rem + 2 * $vbBasicSize;\n }\n\n &--widthMedium {\n width: 11rem + 2 * $vbBasicSize;\n }\n\n &--widthLarge {\n width: 24rem + 2 * $vbBasicSize;\n }\n }\n\n &__listOptions {\n overflow-y: auto;\n }\n\n $class: &;\n\n &__listOption {\n padding: $vbSmallSize $vbBasicSize;\n font-size: $vbNormalFontSize;\n word-break: keep-all;\n overflow: hidden;\n transition-duration: 0.2s;\n transition-property: background-color;\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n\n &--disabled {\n background: inherit;\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n }\n\n &--selected:not(&--disabled) {\n background: $vbColorsP05;\n color: #fff;\n }\n\n &:hover:not(&--selected):not(&--disabled) {\n background: $vbColumnColor;\n color: $vbBlackColor;\n cursor: pointer;\n }\n }\n\n &__listOptionLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 fit-content;\n }\n\n &__listOptionSubLabel {\n font: $vbCaptionFont;\n color: $vbBurntColor;\n margin-left: $vbSmallSize;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 fit-content;\n text-align: right;\n\n // キーボードで選択中のときは色反転する\n @at-root #{$class}__listOption--selected & {\n color: #fff;\n }\n }\n\n &__emptyMessage {\n padding: $vbSmallSize $vbSmallSize;\n text-align: center;\n }\n\n &__spinner {\n padding: $vbBasicSize;\n text-align: center;\n }\n\n &__fixedItem {\n display: flex;\n color: $vbLinkColor;\n font-weight: bold;\n vertical-align: middle;\n margin: -0.5rem -1rem;\n padding: 0.5rem 1rem;\n\n &--add {\n border-top: 1px solid $vbBaseColor2;\n }\n\n &--selected {\n background: $vbColorsP05;\n color: #fff;\n }\n }\n\n &__fixedItemIcon {\n width: 1.5em;\n height: 1.5em;\n margin: -$vbMinimum 0.25rem 0 0;\n }\n}\n\n.vb-multiComboBox {\n display: inline-block;\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &__border {\n line-height: 1;\n vertical-align: middle;\n margin: -1px;\n display: inline-block;\n overflow: hidden;\n border: 1px solid $vbColorsGY02;\n border-radius: $vbFontBorderRadius;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: border-color, background-color, color;\n\n &--disabled {\n background-color: $vbBaseColor1;\n cursor: not-allowed;\n }\n\n &--error {\n border-color: $vbAlertColor;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n }\n\n &__flex {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n min-height: $vbFormControlHeight;\n }\n\n &__field {\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 1rem;\n\n &--maxSelectionCountReached {\n width: $vbMinimum;\n height: $vbMinimum;\n clip: rect(1px 1px 1px 1px);\n position: absolute;\n left: 0;\n top: 0;\n overflow: hidden;\n }\n }\n\n &__list {\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: fit-content;\n max-width: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n\n &__listItem {\n margin: $vbXSmallSize;\n max-width: calc(100% - #{$vbXSmallSize * 2});\n }\n}\n" }, { "path": "stylesheets/lv2/dateInput.scss", "content": ".vb-dateInput {\n display: inline;\n position: relative;\n\n &__listbox {\n position: absolute;\n top: 0;\n left: 0;\n\n &--rightAligned {\n left: unset;\n right: 0;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/descriptionList.scss", "content": ".vb-descriptionList {\n &__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n }\n\n &__header {\n // スタイルはVisuallyHiddenと同じなのだが、table要素直下に置く都合でVisuallyHiddenコンポーネントを使わず再定義している\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n }\n\n &__row {\n height: 3.25rem;\n\n &--spacingCompact {\n height: 2rem;\n }\n\n &:nth-child(2n + 1) {\n background-color: $vbColumnColor;\n }\n\n &:nth-child(2n):last-child {\n border-bottom: 1px solid $vbBaseColor2;\n }\n }\n\n $base: &;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n display: block;\n width: 100%;\n\n #{$base}__row {\n height: auto;\n display: block;\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/dialog.scss", "content": "// モーダルダイアログが開いているときにページ全体のスクロールを抑止する\n.vb-ReactModal__Body--open {\n overflow: hidden;\n}\n\n// 開閉トランジションの追加\n.ReactModal__Overlay {\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n}\n\n.vb-messageDialog {\n $componentClass: &;\n\n max-width: 70rem;\n min-width: 40rem;\n max-height: calc(100vh - 2 * 1rem);\n\n &__inner {\n text-align: center;\n display: flex;\n flex-direction: column;\n }\n\n &__header,\n &__footer {\n padding: 1.5rem;\n }\n\n &__body {\n padding: 0 1.5rem;\n\n &--alignLeft {\n text-align: left;\n }\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin: 0 1rem;\n // 最小幅を20rem = 320pxとして、そこからダイアログ外marginの1remを左右分（*2）引く\n min-width: 20rem - 1rem * 2;\n\n #{$componentClass} {\n &__header,\n &__footer {\n padding: 1rem;\n }\n\n &__body {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n }\n }\n }\n}\n\n.vb-taskDialog {\n $componentClass: &;\n\n max-width: 70rem;\n min-width: 40rem;\n\n &__inner {\n overflow-y: auto;\n }\n\n &__flex {\n display: flex;\n flex-direction: column;\n // 上下に1remアキをつくる\n max-height: calc(100vh - 2 * 1rem); // fallback for safari14\n max-height: calc(100svh - 2 * 1rem);\n min-height: 12rem;\n }\n\n &__header,\n &__footer {\n background-color: #fff;\n padding: 1.5rem;\n }\n\n &__body {\n border-top: $vbMinimum solid $vbBaseColor2;\n border-bottom: $vbMinimum solid $vbBaseColor2;\n margin: 0;\n padding: 1.5rem;\n overflow: auto;\n background-color: #fff;\n min-height: 3rem;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin: 0 1rem;\n // 最小幅を20rem = 320pxとして、そこからダイアログ外marginの1remを左右分（*2）引く\n min-width: 20rem - 1rem * 2;\n\n #{$componentClass} {\n &__header,\n &__footer {\n padding: 1rem;\n }\n\n &__body {\n padding: 1rem;\n }\n }\n }\n }\n}\n\n.vb-guideDialog {\n text-align: center;\n width: 40rem;\n\n @media (max-width: 40rem) {\n margin: 0 1rem;\n width: auto;\n min-width: 10rem;\n }\n\n &__inner {\n display: flex;\n flex-direction: column;\n // DialogBaseのpadding1.5rem + 1rem = 2.5remとして、上下に1remアキをつくる\n max-height: calc(100vh - 2 * 2.5rem);\n }\n\n &__header {\n display: flex;\n justify-content: space-between;\n flex-direction: row-reverse;\n }\n\n &__footer {\n display: flex;\n justify-content: space-between;\n }\n\n &__body {\n overflow: auto;\n background-color: #fff;\n min-height: 3rem;\n }\n\n &__image {\n width: 320px;\n height: 240px;\n\n @media (max-width: $vbMobileBoundaryWidth) {\n width: 240px;\n height: 180px;\n }\n\n margin-bottom: 1rem;\n }\n\n &__buttonBlock {\n display: flex;\n justify-content: space-between;\n }\n\n &__closeButtonBlock {\n display: flex;\n justify-content: space-between;\n flex-direction: row-reverse;\n }\n}\n\n.vb-guideStepCount {\n color: $vbBurntColor;\n\n &__currentStep {\n font-weight: bold;\n }\n}\n" }, { "path": "stylesheets/lv2/dialogFooter.scss", "content": ".vb-DialogFooter {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n justify-content: center;\n flex-direction: column;\n }\n }\n\n &__sideContent {\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-top: 1rem;\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/dropdown.scss", "content": "@use 'sass:math';\n\n%button-disabled-face {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n}\n\n.vb-dropdown {\n position: relative;\n text-align: left;\n font-size: $vbNormalFontSize;\n\n &__body {\n position: absolute;\n top: 0;\n width: auto;\n }\n\n &--alignRight {\n .vb-dropdown__body {\n right: 0;\n }\n }\n\n &--positionRelative .vb-dropdown__body {\n position: relative;\n }\n}\n\n.vb-dropdownMenuContent {\n &__list {\n margin: 0;\n padding: 0;\n list-style: none;\n max-height: 60vh;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n li:first-child > *::before {\n border-top-left-radius: $vbPopupBorderRadius;\n border-top-right-radius: $vbPopupBorderRadius;\n }\n\n li:last-child > *::before {\n border-bottom-left-radius: $vbPopupBorderRadius;\n border-bottom-right-radius: $vbPopupBorderRadius;\n }\n\n // IEのmax-heightとflexの食い合わせが悪いので、IEのみflexを解除しておく\n @at-root {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n & {\n display: block;\n }\n }\n }\n }\n}\n\n.vb-dropdownItem {\n width: 100%;\n\n &--selectable:not(&--disabled) {\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color;\n\n &:hover {\n background-color: $vbColumnColor;\n }\n }\n\n &--disabled {\n @extend %button-disabled-face;\n }\n\n &--unread {\n background-image: linear-gradient(\n 135deg,\n $vbAlertColor 10px,\n transparent 0\n );\n }\n\n &--rule {\n height: 0;\n min-height: 0;\n padding: 0;\n border-top: 1px solid $vbBaseColor2;\n }\n\n &__text {\n font-size: $vbNormalFontSize;\n line-height: 1.5rem;\n // 行の高さから line-height * font-size を引き、2で割って上下のpaddingとする\n padding: math.div(2.25rem - 1.5 * $vbNormalFontSize, 2) $vbBasicSize;\n width: 100%;\n display: inline-block;\n box-sizing: border-box;\n }\n\n &__content,\n &__checkBoxItem {\n display: block;\n min-width: 10rem;\n max-width: 42rem; // for IE\n max-width: #{'min(42rem, calc(100vw - 6rem))'};\n width: max-content;\n }\n\n &__content--danger {\n color: $vbAlertColor;\n }\n\n &__checkBoxItem {\n font-size: $vbNormalFontSize;\n line-height: 1.5rem;\n // 行の高さから line-height * font-size を引き、2で割って上下のpaddingとする\n padding: math.div(2.25rem - 1.5 * $vbNormalFontSize, 2) $vbBasicSize;\n }\n\n &__selectable {\n cursor: pointer;\n background: transparent;\n // 行の高さから line-height * font-size を引き、2で割って上下のpaddingとする\n padding: math.div(2.25rem - 1.5 * $vbNormalFontSize, 2) $vbBasicSize;\n line-height: 1.5;\n font-size: $vbNormalFontSize;\n border: 0;\n text-align: left;\n width: 100%;\n color: $vbBlackColor;\n text-decoration: none;\n display: block;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n\n &--rightIcon {\n padding-right: #{$vbLargeSize + $vbBasicSize + $vbSmallSize};\n }\n\n &:focus {\n // フォーカスインジケーターが外側に表示されて見辛くなることがあるので、内側に自前で実装している\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: $vbMinimum * 2 solid $vbAccentColor;\n }\n }\n }\n\n &__rightIcon {\n position: absolute;\n top: 50%;\n right: $vbSmallSize;\n transform: translateY(-50%);\n height: $vbLargeSize;\n width: $vbLargeSize;\n }\n}\n" }, { "path": "stylesheets/lv2/dropdownButton.scss", "content": ".vb-dropdownButton {\n display: inline-block;\n}\n" }, { "path": "stylesheets/lv2/emptyStates.scss", "content": ".vb-noSearchResults,\n.vb-noDataCreated {\n text-align: center;\n\n &__image {\n margin-bottom: 1rem;\n }\n}\n" }, { "path": "stylesheets/lv2/fileDropArea.scss", "content": ".vb-fileDropArea {\n width: auto;\n height: auto;\n position: relative;\n\n &__fade-enter,\n &__fade-exit {\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n &__fade-enter-active,\n &__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n\n &__overlay {\n z-index: $vbOverlayZIndex;\n border: dashed 2px $vbColorsP05;\n transition-duration: 0.2s;\n transition-property: opacity;\n background-color: rgba($color: $vbColorsP05, $alpha: 0.1);\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n backdrop-filter: blur(1px);\n\n &--disabled {\n cursor: not-allowed;\n border: dashed 2px $vbColorsGY05;\n background-color: rgba($color: $vbColorsGY05, $alpha: 0.1);\n }\n }\n\n &__icon {\n fill: $vbColorsP10;\n\n &--disabled {\n width: 3rem;\n height: 3rem;\n margin-bottom: 1rem;\n fill: $vbColorsGY05;\n }\n }\n\n &__contentDescription {\n color: $vbColorsP10;\n font-weight: bold;\n\n &--disabled {\n color: $vbColorsGY05;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/fileUploader.scss", "content": ".vb-fileUploader {\n width: 32.75rem;\n height: 19.625rem;\n background-color: $vbColumnColor;\n transition-duration: 0.2s;\n transition-property: background-color;\n position: relative;\n border-radius: $vbBaseBorderRadius;\n\n &__content,\n &__dropMessage,\n &__errorMessage {\n text-align: center;\n position: absolute;\n width: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition-duration: 0.2s;\n transition-property: opacity;\n }\n\n &__content {\n opacity: 1;\n\n &--disabled {\n cursor: default;\n }\n }\n\n &__dropMessage,\n &__errorMessage {\n opacity: 0;\n }\n\n &--widthFull {\n width: 100%;\n height: 100%;\n }\n\n &--typeCompact {\n .vb-fileUploader__content,\n .vb-fileUploader__dropMessage {\n display: flex;\n align-items: center;\n }\n\n .vb-fileUploader__contentIllust {\n flex: 1;\n margin: 0;\n }\n\n .vb-fileUploader__contentDescription {\n flex: 1;\n margin: 0 1rem;\n }\n }\n\n &--active {\n background-color: $vbBaseColor1;\n\n .vb-illust--cloudUpload .vb-illust__frame {\n fill: $vbBaseColor3;\n }\n\n .vb-fileUploader__content {\n opacity: 0;\n }\n\n .vb-fileUploader__dropMessage {\n opacity: 1;\n }\n }\n\n &--error {\n .vb-fileUploader__content {\n opacity: 0;\n }\n\n .vb-fileUploader__errorMessage {\n opacity: 1;\n }\n }\n\n &__icon {\n width: 3rem;\n height: 3rem;\n margin-bottom: 1rem;\n fill: $vbColorsGY05;\n }\n}\n" }, { "path": "stylesheets/lv2/filterTag.scss", "content": ".vb-filterTag {\n &__block {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 0 0.5rem;\n border-radius: $vbCardBorderRadius;\n height: 1.5rem;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, border;\n\n .vb-filterTag__icon {\n width: 1rem;\n height: 1rem;\n margin-left: 0.5rem;\n transition-duration: 0.2s;\n transition-property: fill;\n fill: $vbColorsS10;\n }\n\n // デフォルト時のカラー\n color: $vbColorsS10;\n background-color: #fff;\n border: 1px solid $vbColorsS08;\n\n // ホバー時のカラー\n &:hover {\n background-color: $vbColorsS02;\n }\n\n &:active {\n background-color: $vbColorsS03;\n }\n\n // 選択中のカラー\n &.active {\n color: $vbColorsP07;\n background-color: $vbColorsP01;\n border-color: $vbColorsP07;\n\n .vb-filterTag__icon {\n fill: $vbColorsP07;\n }\n\n &:hover {\n background-color: $vbColorsP02;\n }\n\n &:active {\n background-color: $vbColorsP03;\n }\n }\n }\n\n &__body {\n font-size: 0.75rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n" }, { "path": "stylesheets/lv2/footer.scss", "content": ".vb-footer {\n display: flex;\n max-width: $vbContainerSize;\n width: calc(100vw - 3rem);\n margin-left: auto;\n margin-right: auto;\n flex-wrap: nowrap;\n justify-content: space-between;\n\n @media (max-width: $vbMobileBoundaryWidth) {\n width: calc(100vw - 1rem);\n flex-direction: column;\n }\n\n &--widthWide {\n max-width: 100rem;\n }\n\n &--widthNarrow {\n max-width: 40rem;\n }\n\n &Links {\n display: block;\n padding: 0;\n margin: 0 0 $vbBasicSize;\n list-style: none;\n overflow: hidden;\n\n &__item {\n display: block;\n margin-right: $vbBasicSize;\n float: left;\n line-height: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n > a {\n color: $vbBlackColor;\n font-size: $vbNormalFontSize;\n font-weight: normal;\n text-decoration: underline;\n transition-duration: 0.2s;\n transition-property: color;\n\n &:hover {\n color: $vbBurntColor;\n }\n }\n }\n }\n\n &Copyright {\n display: block;\n font-size: $vbCaptionFontSize;\n font-style: normal;\n line-height: 1;\n }\n\n &Badges {\n display: block;\n padding: 0;\n margin: 0;\n list-style: none;\n overflow: hidden;\n\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-top: $vbLargeSize;\n }\n\n &__item {\n display: block;\n margin-right: $vbBasicSize;\n float: left;\n\n &:last-child {\n margin-right: 0;\n }\n }\n }\n\n &Section {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-top: $vbLargeSize;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/formBlock.scss", "content": ".vb-nameField {\n &--small {\n margin: 0 0.25rem;\n }\n\n &--error {\n color: $vbAlertColor;\n }\n\n &--disabled {\n color: $vbBaseColor2;\n }\n}\n\n.vb-phoneNumberField {\n display: flex;\n align-items: center;\n\n & &__hyphen {\n margin: 0 0.5rem;\n\n &--small {\n margin: 0 0.25rem;\n }\n\n &--error {\n color: $vbAlertColor;\n }\n\n &--disabled {\n color: $vbBaseColor2;\n }\n }\n}\n\n.vb-dateField {\n & &__unit {\n margin: 0 0.5rem;\n font: $vbNormalFont;\n\n &--small {\n margin: 0 0.25rem;\n font-size: 0.6875rem;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/formField.scss", "content": ".vb-amountRangeField {\n display: inline-flex;\n align-items: center;\n}\n" }, { "path": "stylesheets/lv2/formGroup.scss", "content": "/** @define formControlGroup */\n.vb-formControlGroup {\n display: flex;\n flex-wrap: wrap;\n\n &--block {\n display: block;\n }\n}\n\n/** @define formControl */\n.vb-formControl {\n max-width: 100%;\n\n &__legend {\n padding: 0;\n }\n\n &__labelArea {\n display: flex;\n align-items: flex-end;\n min-height: $vbLargeSize;\n margin-bottom: $vbXSmallSize;\n }\n\n &__fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n min-inline-size: 0;\n max-width: 100%;\n }\n}\n\n.vb-formActions {\n &--fixed {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #fff;\n z-index: $vbFormActionsZIndex;\n\n .vb-popupBase {\n border-radius: initial;\n }\n }\n\n &__inner {\n box-sizing: border-box;\n max-width: $vbContainerSize;\n margin: 0 auto;\n padding: 0 1.5rem;\n\n &--widthWide {\n max-width: 100rem;\n }\n\n &--widthNarrow {\n max-width: 40rem;\n min-width: 40rem;\n }\n }\n\n &__animation {\n &-enter,\n &-exit {\n transform: translateY(100%);\n transition: transform 0.3s ease;\n }\n\n &-enter-active,\n &-enter-done {\n transform: translateY(0);\n transition: transform 0.3s ease;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/globalNavi.scss", "content": ".vb-globalNavi {\n display: flex;\n box-sizing: border-box;\n // 本体サイズ + Container の左右 margin 分\n min-width: $vbContainerSize + $vbLargeSize * 2;\n padding: 0 $vbLargeSize;\n background-color: $vbPrimaryColor;\n\n @if $use2021Style {\n box-sizing: border-box;\n background-color: #fff;\n border-bottom: $vbMinimum solid $vbColorsP05;\n height: $vbXXLargeSize;\n }\n\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n\n &--disableGutters {\n min-width: $vbContainerSize;\n }\n\n &List {\n display: block;\n margin: 0;\n padding: 0;\n list-style: none;\n\n &__item {\n display: block;\n float: left;\n }\n\n &__itemInner {\n display: block;\n padding: $vbBasicSize;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/guidanceMessage.scss", "content": ".vb-guidanceMessage {\n position: relative;\n background-color: $vbColorsP01;\n color: $vbColorsP10;\n border-radius: $vbBaseBorderRadius;\n\n &__content {\n &--alignMiddle {\n display: flex;\n align-items: center;\n }\n }\n\n &--inline {\n display: inline-block;\n }\n\n &--widthFitContent {\n width: fit-content;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--clickable {\n border-radius: $vbBaseBorderRadius;\n }\n\n &__container {\n display: grid;\n display: -ms-grid;\n grid-template-columns: auto 1fr;\n -ms-grid-columns: auto 1fr;\n padding: $vbBasicSize;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding: $vbSmallSize;\n }\n }\n\n &--alignTop {\n align-items: flex-start;\n }\n\n &--alignMiddle {\n align-items: center;\n }\n\n &--small {\n padding: $vbXSmallSize $vbSmallSize;\n }\n }\n\n &__icon {\n grid-column: 1 / 2;\n -ms-grid-column: 1;\n margin-right: $vbSmallSize;\n font-size: $vbLargeSize;\n }\n\n &__link,\n &__button {\n color: $vbColorsP10;\n text-decoration: none;\n display: inline-block;\n text-align: left;\n border: 0;\n background-color: transparent;\n font-size: $vbNormalFontSize;\n font-weight: bold;\n padding: 0;\n font-family: inherit;\n\n &::before {\n // クリッカブル領域をMessage全体に広げる\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n }\n\n &:hover {\n &::before {\n background-color: rgba($vbPrimaryColor, 0.06);\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/guidedContent.scss", "content": "/** @define GuidContent */\n.vb-guidedContent {\n display: grid;\n grid-template-columns: auto min-content;\n grid-template-rows: auto;\n\n &__title {\n grid-column: 1/-1;\n }\n\n &__guide {\n grid-column: 3/-1;\n grid-row: span 2;\n }\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n .vb-guidedContent__guide {\n grid-column: 1/-1;\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/header.scss", "content": "/** @define Header */\n.vb-header {\n box-sizing: border-box;\n // 本体サイズ + Container の左右 margin 分\n min-width: $vbContainerSize + $vbLargeSize * 2;\n height: $vbXXLargeSize + $vbBasicSize * 2;\n padding: $vbBasicSize $vbLargeSize;\n display: flex;\n justify-content: space-between;\n background-color: #fff;\n font-size: $vbCaptionFontSize;\n\n @if $use2021Style {\n padding: ($vbXSmallSize + $vbSmallSize) $vbLargeSize $vbXSmallSize;\n height: $vbXXLargeSize + $vbSmallSize + $vbXSmallSize * 2;\n }\n\n &--disableGutters {\n min-width: $vbContainerSize;\n }\n\n & &__logo {\n width: fit-content;\n }\n\n & &__info {\n text-align: center;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n }\n\n & &__children {\n display: flex;\n flex: 1;\n padding: 0 2rem;\n align-items: center;\n }\n\n & &__plan {\n display: inline-block;\n box-sizing: border-box;\n padding: 0 0.2em;\n margin-bottom: -0.1em;\n font-weight: bold;\n border: 1px solid $vbPrimaryColor;\n color: $vbPrimaryColor;\n text-decoration: none;\n }\n\n & &__icon {\n vertical-align: middle;\n width: $vbBasicSize;\n height: $vbBasicSize;\n\n &--notice {\n color: $vbNoticeColor;\n }\n\n &--alert {\n color: $vbAlertColor;\n }\n }\n\n & &__text {\n vertical-align: middle;\n }\n\n & &__link {\n color: $vbBlackColor;\n transition-duration: 0.2s;\n transition-property: background-color;\n\n &:hover {\n background-color: $vbColorsS01;\n }\n }\n\n & &__button {\n color: $vbBlackColor;\n display: inline;\n border: 0;\n background: transparent;\n padding: 0;\n text-decoration: underline;\n cursor: pointer;\n font-size: $vbCaptionFontSize;\n transition-duration: 0.2s;\n transition-property: background-color;\n\n &--active {\n background-color: $vbBaseColor1;\n }\n\n &:hover {\n background-color: $vbColorsS01;\n }\n }\n\n & &__icon + &__text {\n margin-left: 0.2em;\n }\n\n & &__section {\n position: relative;\n\n &:not(:last-child) {\n margin-right: 1em;\n }\n }\n\n & &__dropdownWrapper {\n padding-bottom: 8px;\n }\n\n & &__badge {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: $vbFullBorderRadius;\n background: $vbAlertColor;\n display: block;\n position: absolute;\n top: 0.25rem;\n left: 0.5rem;\n border: solid 1px #ffff;\n }\n}\n" }, { "path": "stylesheets/lv2/headlineArea.scss", "content": ".vb-headlineArea {\n display: block;\n padding-bottom: $vbXLargeSize;\n position: relative;\n}\n" }, { "path": "stylesheets/lv2/hierarchicalTable.scss", "content": ".vb-hierarchicalTable {\n &__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n }\n}\n\n.vb-hierarchicalTableRowHeaderCell {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n\n @for $i from 1 through 5 {\n &--level#{$i} {\n margin-left: #{($i - 1) * 2}rem;\n }\n\n &--foldable {\n &--level#{$i} {\n margin-left: #{$i * 2}rem;\n }\n }\n }\n\n &__button {\n cursor: pointer;\n color: $vbLinkColor;\n display: inline;\n border: 0;\n background: none;\n padding: 0;\n\n &:hover {\n color: darken($vbLinkColor, 12%);\n }\n }\n\n &__icon {\n width: $vbLargeSize;\n height: $vbLargeSize;\n }\n}\n" }, { "path": "stylesheets/lv2/indexSearchField.scss", "content": "/** @define indexSearchField */\n.vb-indexSearchField {\n display: inline-block;\n position: relative;\n max-width: 100%;\n\n &--widthFull {\n width: 100%;\n }\n\n & &__icon {\n display: block;\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n left: 0.5em;\n pointer-events: none;\n transform: translateY(-50%);\n transition: left 0.3s ease, fill 0.3s ease;\n\n &--searchAreaClosed {\n left: 0.375em;\n pointer-events: none;\n }\n }\n\n & &__input {\n @extend %form-text-base;\n\n padding-left: 2.75em;\n max-width: 100%;\n transition: width 0.3s ease, background-color 0.3s ease,\n border-color 0.3s ease;\n\n &::placeholder {\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n\n &::-webkit-search-cancel-button {\n cursor: pointer;\n }\n\n + svg {\n fill: $vbBaseColor2;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n\n &--searchAreaClosed {\n width: 2.25rem;\n padding: 0;\n cursor: pointer;\n\n &::placeholder {\n opacity: 0;\n }\n }\n\n &:not(&--disabled) {\n &:hover {\n background-color: $vbColorsP02;\n border-color: $vbColorsP08;\n\n & + .vb-indexSearchField__icon {\n fill: $vbColorsP08;\n }\n }\n }\n }\n\n & &__dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n opacity: 0;\n\n &--searchAreaOpen {\n transition: opacity 0.3s 0.3s ease;\n opacity: 1;\n }\n }\n\n & &__dropdownItem {\n margin: 0.25em;\n padding: 0.25em;\n cursor: pointer;\n }\n}\n" }, { "path": "stylesheets/lv2/lineSeparatedList.scss", "content": "/** @define lineSeparatedList */\n.vb-lineSeparatedList {\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &__listItem {\n background-color: #fff;\n border-top: 1px solid $vbBaseColor2;\n padding: $vbBasicSize;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/listButtonSelector.scss", "content": "%button-disabled-face {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n}\n\n.vb-listButtonSelector {\n position: relative;\n display: inline-block;\n\n &__popupWrapper {\n position: absolute;\n top: 100%;\n min-width: 100%;\n }\n\n &__button {\n display: inline-block;\n padding: $vbBasicSize;\n padding-right: 3em;\n background-color: #fff;\n border: solid 1px $vbPrimaryColor;\n border-radius: $vbFontBorderRadius;\n font-size: $vbBasicSize;\n font-weight: bold;\n color: $vbPrimaryColor;\n cursor: pointer;\n line-height: 1;\n\n &--disabled {\n @extend %button-disabled-face;\n }\n\n &--isOpen {\n background-color: $vbBaseColor1;\n }\n }\n\n &__icon {\n position: absolute;\n display: inline-block;\n font-size: 1.5em;\n right: 0.5em;\n top: 50%;\n transform: translateY(-50%);\n }\n}\n" }, { "path": "stylesheets/lv2/listCard.scss", "content": ".vb-listCard {\n position: relative;\n background-color: #fff;\n border-radius: $vbCardBorderRadius;\n box-shadow: $vbCardShadow;\n padding: $vbBasicSize;\n\n &--disabled {\n opacity: 0.5;\n }\n\n &__link,\n &__button {\n cursor: pointer;\n text-decoration: none;\n color: $vbBlackColor;\n display: block;\n text-align: left;\n padding: 0;\n border: 0;\n background-color: #fff;\n\n &--disabled {\n cursor: not-allowed;\n }\n\n &::before {\n // クリッカブル領域をカード全体に広げる\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n border-radius: $vbCardBorderRadius;\n }\n\n &--current {\n &::after {\n content: '';\n height: 100%;\n width: 4px;\n background-color: $vbColorsP05;\n position: absolute;\n top: 0;\n left: 0;\n border-top-left-radius: $vbXSmallSize;\n border-bottom-left-radius: $vbXSmallSize;\n }\n }\n }\n\n // FIXME: おそらくlibsassのバグで、:not を複数のセレクタに対して使用することが上手くできない。\n // そのため __link と __button を別々に書いている。\n // libsass は deprecated なため、dart-sass等に移行したうえでこの2つを纏められないか確認する必要がある。\n &__link {\n &:not(&--disabled) {\n &:hover {\n &::before {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n }\n }\n }\n\n &__button {\n &:not(&--disabled) {\n &:hover {\n &::before {\n background-color: mix($vbPrimaryColor, #fff, 6%);\n }\n }\n }\n }\n\n &__content {\n position: relative;\n z-index: 1;\n margin-right: $vbLargeSize;\n display: flex;\n }\n\n &__thumbnail {\n margin-right: $vbBasicSize;\n flex-shrink: 0;\n flex-grow: 0;\n max-width: 5rem;\n\n * {\n max-width: 100%;\n max-height: 5rem;\n }\n\n &--large {\n margin-right: $vbBasicSize;\n flex-shrink: 0;\n flex-grow: 0;\n max-width: 12rem;\n\n * {\n max-width: 100%;\n max-height: 12rem;\n }\n\n @media (max-width: $vbMobileBoundaryWidth) {\n max-width: 7.2rem;\n\n * {\n max-height: 7.2rem;\n }\n }\n }\n\n @media (max-width: $vbMobileBoundaryWidth) {\n max-width: 3rem;\n\n * {\n max-height: 3rem;\n }\n }\n }\n\n &__main {\n flex-shrink: 1;\n flex-grow: 1;\n }\n\n &__icon {\n position: absolute;\n z-index: 1;\n top: 50%;\n transform: translateY(-50%);\n right: $vbSmallSize;\n width: $vbLargeSize;\n height: $vbLargeSize;\n }\n\n &__title {\n font-size: $vbHeadline2FontSize;\n font-weight: bold;\n }\n\n &__actions {\n position: relative;\n z-index: 1;\n // 誤クリック・タップを防ぐため、paddingでaction周囲に反応しないエリアを作っている\n // 上方向のみ、titleカード内コンテンツとの兼ねあいで小さくなっている\n padding: $vbSmallSize $vbBasicSize $vbBasicSize;\n margin: $vbSmallSize #{-1 * $vbBasicSize} #{-1 * $vbBasicSize};\n width: fit-content;\n }\n}\n" }, { "path": "stylesheets/lv2/listTable.scss", "content": "/** @define listTable */\n\n.vb-listTable,\n.vb-groupedListTable {\n &__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n\n // .vb-tableListCell__content をセルに対して縦方向に100%で表示するには\n // heightを小さくしておく必要がある\n height: $vbMinimum;\n }\n\n &--fitContent {\n max-width: fit-content;\n }\n}\n" }, { "path": "stylesheets/lv2/messageBlock.scss", "content": "@use 'sass:math';\n@use '../container_query' as *;\n\n.vb-messageBlock {\n container-type: inline-size;\n width: 100%;\n\n &--hover {\n box-shadow: $vbPopupShadow;\n border-radius: $vbBaseBorderRadius;\n z-index: $vbFloatingZIndex;\n }\n\n &__inner {\n border: $vbMinimum solid $vbColorsS05;\n background-color: $vbColorsS01;\n border-radius: $vbBaseBorderRadius;\n box-sizing: border-box;\n display: grid;\n display: -ms-grid;\n grid-template-columns: 1fr auto;\n -ms-grid-columns: 1fr auto;\n padding: $vbBasicSize;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n padding: $vbSmallSize;\n display: block;\n }\n }\n\n @include at-container('max-width:' $vbMobileBoundaryWidth) {\n padding: $vbSmallSize;\n display: block;\n }\n\n &--alert {\n border: $vbMinimum solid $vbAlertColor;\n background-color: $vbColorsRE02;\n }\n\n &--notice {\n border: $vbMinimum solid $vbNoticeColor;\n background-color: $vbColorsYE02;\n }\n\n &--success,\n &--assistance,\n &--discovery {\n border: $vbMinimum solid $vbPrimaryColor;\n background-color: $vbColorsP02;\n }\n }\n\n &__message {\n -ms-grid-column: 1;\n grid-column: 1 / 2;\n }\n\n &__buttons {\n -ms-grid-column: 2;\n grid-column: 2 / 3;\n // ボタンの高さがMessage部分と合わないため、引き算して中央に配置している\n margin-top: math.div($vbLargeSize - $vbFormControlHeight, 2);\n height: $vbLargeSize;\n\n &--responsive {\n @media (max-width: $vbMobileBoundaryWidth) {\n margin-top: $vbXSmallSize;\n margin-left: $vbBasicSize;\n height: auto;\n }\n }\n\n @include at-container('max-width:' $vbMobileBoundaryWidth) {\n margin-top: $vbXSmallSize;\n margin-left: $vbBasicSize;\n height: auto;\n }\n }\n\n &__linkButton,\n &__closeButton {\n display: inline-block;\n white-space: nowrap;\n // ボタンの高さがMessage部分と合わないため、引き算して中央に配置している\n margin-top: math.div($vbLargeSize - $vbFormControlHeight, 2);\n height: $vbLargeSize;\n }\n}\n\n.vb-messageBlockInternalMessage {\n &__inner {\n display: flex;\n flex: 1 auto;\n align-items: flex-start;\n }\n\n &__icon {\n display: inline-block;\n margin-right: $vbSmallSize;\n font-size: $vbLargeSize;\n min-width: $vbLargeSize;\n\n &--alert {\n color: $vbAlertColor;\n }\n\n &--notice {\n color: $vbNoticeColor;\n }\n\n &--success,\n &--assistance,\n &--discovery {\n color: $vbPrimaryColor;\n }\n\n &--explanatory,\n &--info {\n color: $vbBaseColor3;\n }\n }\n\n &__content {\n display: inline-block;\n font-size: $vbNormalFontSize;\n line-height: 1.5;\n // align-items: flex-start;とした際に、アイコンと中央に並んで見えるように調整\n margin-top: math.div($vbLargeSize - $vbNormalFontSize * 1.5, 2);\n }\n}\n\n.vb-floatingMessageBlockPortal {\n position: fixed;\n top: 2rem;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: $vbFixedMessageZIndex;\n}\n\n.vb-floatingMessageBlock {\n box-shadow: $vbPopupShadow;\n border-radius: $vbFloatingBorderRadius;\n margin: auto;\n min-width: 16rem;\n max-width: calc(100vw - 3rem);\n width: 50rem;\n transition-property: opacity;\n transition-duration: 0.3s;\n\n & .vb-messageBlock__inner {\n border-radius: $vbFloatingBorderRadius;\n }\n\n &__animation {\n &-enter {\n opacity: 0;\n }\n\n &-enter-active {\n opacity: 1;\n }\n\n &-exit {\n opacity: 0;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/messageIcon.scss", "content": ".vb-messageIcon {\n position: relative;\n display: inline-block;\n width: $vbLargeSize;\n min-height: 1em;\n\n &__control {\n cursor: pointer;\n width: $vbLargeSize;\n height: $vbLargeSize;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__icon {\n width: $vbLargeSize;\n height: $vbLargeSize;\n color: $vbBaseColor3;\n display: inline-block;\n vertical-align: middle;\n\n &--error {\n color: $vbAlertColor;\n }\n\n &--notice {\n color: $vbNoticeColor;\n }\n\n &--success {\n color: $vbPrimaryColor;\n }\n }\n\n &--small {\n .vb-messageIcon__icon {\n width: $vbBasicSize;\n height: $vbBasicSize;\n }\n }\n}\n\n.vb-messageIconMessageWrapper {\n &--hidden {\n display: none;\n }\n}\n\n.vb-messageIconMessage {\n position: relative;\n width: $vbLargeSize;\n}\n" }, { "path": "stylesheets/lv2/modal.scss", "content": ".vb-fullScreenModal {\n z-index: $vbFullScreenZIndex;\n background-color: #fff;\n\n &__inner {\n display: flex;\n flex-direction: column;\n width: 100vw;\n height: 100vh;\n }\n\n &__header {\n padding: 1.5rem;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: $vbMinimum solid $vbBaseColor2;\n }\n\n &__headerInnerContent {\n flex-grow: 1;\n }\n\n &__body {\n padding: 1.5rem 1.5rem 1.5rem 4.75rem;\n overflow: auto;\n }\n}\n" }, { "path": "stylesheets/lv2/numericTable.scss", "content": ".vb-numericTable {\n &__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n }\n}\n" }, { "path": "stylesheets/lv2/pageSelector.scss", "content": ".vb-pageSelector {\n display: inline-block;\n\n &__currentPage {\n font-weight: bold;\n font-size: $vbNormalFontSize;\n padding: 0 $vbSmallSize;\n }\n}\n" }, { "path": "stylesheets/lv2/pager.scss", "content": ".vb-pager {\n text-align: center;\n\n & &__list {\n padding: 0;\n // FIXME: ここにマージンがあるため、commonPropsでつけたマージンが相殺されることがある\n margin: 1em auto;\n }\n\n & &__break {\n display: inline-block;\n margin: 0 0.5em 0 -0.5em;\n vertical-align: middle;\n }\n\n & &__icon {\n &--arrow {\n transform: scale(1.5);\n vertical-align: middle;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/personTag.scss", "content": "@use 'sass:math';\n\n.vb-personTag {\n display: inline-block;\n background-color: #fff;\n box-sizing: border-box;\n padding-left: $vbXSmallSize;\n padding-right: $vbSmallSize;\n border: $vbMinimum solid $vbBaseColor3;\n border-radius: $vbFullBorderRadius;\n height: $vbXLargeSize;\n line-height: $vbXLargeSize;\n font-size: $vbXLargeSize;\n\n &--removable {\n padding-right: $vbXSmallSize;\n }\n\n &--success {\n border-color: $vbPrimaryColor;\n }\n\n &--error {\n border-color: $vbAlertColor;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n margin-top: -$vbMinimum;\n height: $vbXLargeSize;\n }\n\n &__type {\n display: inline-block;\n font-size: $vbCaptionFontSize;\n color: $vbBurntColor;\n margin-right: $vbSmallSize;\n white-space: nowrap;\n }\n\n &__body {\n font-size: $vbNormalFontSize;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &--success {\n color: $vbPrimaryColor;\n }\n\n &--error {\n color: $vbAlertColor;\n }\n }\n\n &__removeButton {\n font-size: 0;\n color: $vbBaseColor3;\n margin-left: $vbSmallSize;\n height: $vbLargeSize;\n width: $vbLargeSize;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: color;\n\n &:hover {\n color: darken($vbBaseColor3, 12%);\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n }\n }\n\n &__removeIcon {\n font-size: $vbBasicSize;\n vertical-align: middle;\n }\n}\n" }, { "path": "stylesheets/lv2/popupProgressBar.scss", "content": ".vb-popupProgressBar {\n padding: 0.5rem 1rem;\n display: flex;\n align-items: center;\n min-width: 20rem;\n max-width: 40rem;\n\n &__contents {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n &__message {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n &__message-block {\n display: flex;\n align-items: center;\n }\n\n &__icon {\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n &__close {\n flex-shrink: 0;\n }\n}\n" }, { "path": "stylesheets/lv2/popupProgressBarPortal.scss", "content": ".vb-popupProgressBarPortal {\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: $vbFixedMessageZIndex;\n\n &__element {\n // boxshadowをtransition中に表示するために周りにboxshadow分のpaddingを置く\n padding: 0.75rem 1rem 0.5rem 1rem;\n }\n}\n" }, { "path": "stylesheets/lv2/propListForm.scss", "content": ".vb-propListForm {\n display: block;\n\n &__list {\n display: flex;\n\n &--wrap {\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n &__item {\n display: flex;\n border-bottom: solid 1px $vbColorsS03;\n align-items: flex-start;\n }\n\n &__term {\n display: inline-block;\n min-height: $vbFormControlHeight;\n font-size: $vbNormalFontSize;\n vertical-align: middle;\n margin-right: 1rem;\n }\n\n &__description {\n margin-left: 0;\n }\n\n &__termInner,\n &__descriptionInner {\n display: flex;\n align-items: center;\n height: 100%;\n min-height: $vbFormControlHeight;\n white-space: pre-line;\n }\n\n &__termLabel {\n display: flex;\n align-items: flex-start;\n }\n\n &__termIcons {\n display: flex;\n white-space: nowrap;\n align-items: center;\n }\n\n &__field {\n display: flex;\n align-items: center;\n }\n}\n" }, { "path": "stylesheets/lv2/selectableButton.scss", "content": ".vb-selectableButton {\n &__button {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n padding: 0 1rem;\n text-align: center;\n text-decoration: none;\n box-sizing: border-box;\n border-radius: $vbBaseBorderRadius;\n border: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, box-shadow, border-color;\n font-family: '-apple-system', BlinkMacSystemFont, 'Helvetica Neue',\n 'ヒラギノ角ゴ ProN', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo,\n sans-serif;\n font-size: 0.875rem;\n height: 2.25rem;\n vertical-align: middle;\n white-space: nowrap;\n\n .vb-selectableButton__icon {\n // 22px\n width: 1.375rem;\n height: 1.375rem;\n fill: $vbColorsP07;\n }\n\n // デフォルト時のカラー\n color: $vbColorsGY07;\n background-color: $vbColorsS01;\n\n // ホバー時のカラー\n &:hover {\n background-color: $vbColorsS02;\n }\n\n &:active {\n background-color: $vbColorsS03;\n }\n\n // 選択時のカラー\n &.active {\n background-color: $vbColorsP01;\n\n .vb-selectableButton__label {\n color: $vbColorsP07;\n font-weight: bold;\n }\n\n &:hover {\n background-color: $vbColorsP02;\n }\n\n &:active {\n background-color: $vbColorsP03;\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 1px #fff, 0 0 0 3px $vbColorsP05, 0 0 0 4px #fff;\n background-color: $vbColorsP03;\n }\n }\n }\n\n &__badge {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1.25rem;\n margin-left: -0.25rem;\n padding: 0 0.625rem;\n color: $vbColorsGY10;\n background-color: $vbColorsGY02;\n border-radius: $vbCardBorderRadius;\n }\n}\n" }, { "path": "stylesheets/lv2/skeleton.scss", "content": ".vb-skeltonPageTitle {\n padding: calc(($vbLineHeight - 1) * $vbHeadline1FontSize / 2) 0;\n max-height: $vbHeadline1FontSize;\n}\n\n.vb-skeltonSectionTitle {\n padding: calc(($vbLineHeight - 1) * $vbHeadline2FontSize / 2) 0;\n max-height: $vbHeadline2FontSize;\n}\n\n.vb-skeltonParagraph {\n padding: calc(($vbLineHeight - 1) * $vbNormalFontSize / 2) 0;\n max-height: $vbNormalFontSize;\n}\n\n.vb-skeltonRectangle {\n max-height: 5rem;\n}\n\n.vb-skeltonBlock {\n max-height: 2.25rem;\n\n &--small {\n max-height: 1.5rem;\n }\n\n &--large {\n max-height: 3rem;\n }\n}\n\n.vb-skeltonIcon {\n max-height: 2rem;\n\n &--small {\n max-height: 1.5rem;\n }\n\n &--large {\n max-height: 3rem;\n }\n}\n\n.vb-skeltonCircle {\n max-height: 2rem;\n\n &--small {\n max-height: 1.5rem;\n }\n\n &--large {\n max-height: 3rem;\n }\n\n &--xlarge {\n max-height: 6rem;\n }\n}\n\n.vb-skeletonInput {\n align-items: center;\n background-color: #fff;\n border-radius: $vbFontBorderRadius;\n border: 1px solid $vbColorsGY02;\n box-sizing: border-box;\n display: inline-flex;\n height: $vbFormControlHeight;\n overflow: hidden;\n padding: 0 $vbSmallSize;\n vertical-align: inherit;\n\n &--small {\n height: $vbFormControlSmallHeight;\n padding: 0 $vbSmallSize;\n }\n\n &--large {\n height: $vbFormControlLargeHeight;\n padding: 0 $vbBasicSize;\n }\n\n &--widthXSmall {\n width: 4rem;\n }\n\n &--widthSmall {\n width: 7rem;\n }\n\n &--widthMedium {\n width: 11rem;\n }\n\n &--widthLarge {\n width: 24rem;\n }\n\n &--widthFull {\n width: 100%;\n }\n}\n\n.vb-skeletonStackedBarChart {\n height: 1.5rem;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding: 0 0.5rem;\n background-color: #fff;\n border: $vbMinimum solid $vbColorsS06;\n border-radius: $vbFullBorderRadius;\n}\n" }, { "path": "stylesheets/lv2/stackedBarChart.scss", "content": ".vb-stackedBarChart {\n &__container {\n height: 1.5rem;\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n background-color: #fff;\n border: $vbMinimum solid $vbColorsS06;\n border-radius: $vbFullBorderRadius;\n // reset ul's user-agent-stylesheet\n list-style-type: none;\n padding-inline-start: 0;\n margin-block: 0;\n }\n\n &__item {\n box-sizing: border-box;\n\n & + & {\n border-left: $vbMinimum solid $vbColorsS08;\n }\n // WithBalloon を横幅いっぱいに広げる\n display: flex;\n flex-direction: column;\n\n &__button {\n width: 100%;\n height: calc(1.5rem - $vbMinimum * 2);\n border: none;\n padding: 0 0.5rem;\n font-size: $vbCaptionFontSize;\n font-family: $vbFontFamily;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &:focus {\n outline: none;\n box-shadow: $vbFocusHighlightShadowInset;\n }\n\n &--first {\n border-radius: $vbFullBorderRadius 0 0 $vbFullBorderRadius;\n }\n\n &--last {\n border-radius: 0 $vbFullBorderRadius $vbFullBorderRadius 0;\n }\n\n &--RE {\n background-color: $vbColorsRE02;\n color: $vbColorsRE10;\n }\n\n &--OR {\n background-color: $vbColorsOR02;\n color: $vbColorsOR10;\n }\n\n &--YE {\n background-color: $vbColorsYE02;\n color: $vbColorsYE10;\n }\n\n &--YG {\n background-color: $vbColorsYG02;\n color: $vbColorsYG10;\n }\n\n &--GR {\n background-color: $vbColorsGR02;\n color: $vbColorsGR10;\n }\n\n &--BG {\n background-color: $vbColorsBG02;\n color: $vbColorsBG10;\n }\n\n &--PU {\n background-color: $vbColorsPU02;\n color: $vbColorsPU10;\n }\n\n &--GY {\n background-color: $vbColorsGY02;\n color: $vbColorsGY10;\n }\n }\n }\n}\n" }, { "path": "stylesheets/lv2/statusSelector.scss", "content": "/** @define statusSelector */\n.vb-statusSelector {\n @extend %icon-base;\n\n display: flex;\n align-items: center;\n cursor: pointer;\n border-color: transparent;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color;\n\n &--disabled {\n opacity: 0.5;\n }\n\n &__dropdownIcon {\n width: $vbBasicSize;\n height: $vbBasicSize;\n margin-left: 0.25rem;\n margin-right: -0.25rem;\n }\n\n &--typeDone {\n @extend %icon-border-face;\n\n border-color: $vbBaseColor3;\n color: $vbBurntColor;\n\n &__dropdownIcon {\n fill: $vbBurntColor;\n }\n\n &:hover {\n background-color: $vbColorsS02;\n }\n }\n\n &--typeSuccess {\n @extend %icon-border-face;\n\n border-color: $vbPrimaryColor;\n color: $vbPrimaryColor;\n\n &__dropdownIcon {\n fill: $vbPrimaryColor;\n }\n\n &:hover {\n background-color: $vbColorsP02;\n }\n }\n\n &--typeProgress {\n @extend %icon-border-face;\n\n border-color: $vbNoticeColor;\n // 文字色のコントラスト比を上げるため、 $vbNoticeColorより濃い色を使用する\n color: $vbColorsYE10;\n\n &__dropdownIcon {\n fill: $vbColorsYE10;\n }\n\n &:hover {\n background-color: $vbColorsYE02;\n }\n }\n\n &--typeRequired {\n @extend %icon-border-face;\n\n border-color: $vbAlertColor;\n color: $vbAlertColor;\n\n &__dropdownIcon {\n fill: $vbAlertColor;\n }\n\n &:hover {\n background-color: $vbColorsRE02;\n }\n }\n\n &--typeDisabled {\n @extend %icon-fill-face;\n\n background-color: $vbBurntColor;\n border-width: 0;\n\n &__dropdownIcon {\n fill: #fff;\n }\n\n &:hover {\n background-color: darken($vbBurntColor, 12%);\n }\n }\n\n &--typeEmphasis {\n @extend %icon-fill-face;\n\n background-color: $vbPrimaryColor;\n border-width: 0;\n\n &__dropdownIcon {\n fill: #fff;\n }\n\n &:hover {\n background-color: darken($vbPrimaryColor, 12%);\n }\n }\n\n &--typeWarning {\n @extend %icon-fill-face;\n\n // 文字色のコントラスト比を上げるため、 $vbNoticeColorより濃い色を使用する\n background-color: $vbColorsYE10;\n border-width: 0;\n\n &__dropdownIcon {\n fill: #fff;\n }\n\n &:hover {\n background-color: darken($vbColorsYE10, 12%);\n }\n }\n\n &--typeError {\n @extend %icon-fill-face;\n\n background-color: $vbAlertColor;\n border-width: 0;\n\n &__dropdownIcon {\n fill: #fff;\n }\n\n &:hover {\n background-color: darken($vbAlertColor, 12%);\n }\n }\n}\n" }, { "path": "stylesheets/lv2/stepper.scss", "content": ".vb-stepper {\n display: flex;\n flex-wrap: nowrap;\n justify-content: center;\n padding: 0;\n gap: 2rem;\n $block: &;\n\n &__listItem {\n list-style-type: none;\n width: 4rem;\n position: relative;\n\n &:not(:last-child)::after {\n content: '';\n width: 3rem;\n height: 0.25rem;\n background-color: $vbColorsS09;\n display: block;\n position: absolute;\n left: calc(100% - 0.5rem);\n top: 1.5rem;\n }\n }\n\n &__listContent {\n position: relative;\n z-index: 1;\n text-align: center;\n }\n\n &--small {\n gap: 1.5rem;\n\n #{$block}__listItem {\n width: 3rem;\n\n &:not(:last-child)::after {\n width: 2.5rem;\n top: 1rem;\n }\n }\n }\n}\n\n.vb-verticalSteps {\n &__number {\n // StepNumberが入る要素。__titleのほうにVisuallyHiddenで数字を書いているので、コピペ時に数字がダブらないように user-select: none にしてある\n user-select: none;\n }\n\n &__step {\n display: grid;\n grid-template-columns: 3rem 1fr;\n column-gap: 0.5rem;\n row-gap: 0;\n\n &:not(:last-child)::after {\n content: '';\n background: $vbColorsS09;\n grid-column: 1 / 2;\n grid-row: 2 / 3;\n width: 0.25rem;\n margin: 0 auto;\n }\n }\n\n &__title {\n grid-column: 2 / 3;\n font: $vbHeadlineFont2;\n color: $vbBlackColor;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &--future {\n color: $vbBurntColor;\n font-weight: normal;\n }\n }\n\n &__content {\n grid-column: 2 / 3;\n grid-row: 2 / 3;\n padding: 0 0 1.5rem;\n }\n\n &__actions {\n margin: 1rem 0 0 0;\n }\n}\n" }, { "path": "stylesheets/lv2/tabbar.scss", "content": ".vb-tabBar {\n border-bottom: 1px solid $vbBaseColor2;\n padding: 0 $vbLargeSize;\n background: #fff;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n\n &__buttonGroup {\n margin-left: $vbBasicSize;\n\n button {\n margin-left: $vbSmallSize;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/tagBox.scss", "content": "@use 'sass:math';\n\n.vb-tagBox {\n display: inline-block;\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 $vbSmallSize;\n border: $vbMinimum solid $vbBaseColor3;\n border-radius: $vbFullBorderRadius;\n height: $vbLargeSize;\n line-height: $vbLargeSize;\n font-size: $vbLargeSize;\n\n &--removable {\n padding-right: $vbXSmallSize;\n }\n\n &--maxWidthSmall {\n max-width: 10rem;\n }\n\n &--maxWidthMedium {\n max-width: 20rem;\n }\n\n &--maxWidthLarge {\n max-width: 30rem;\n }\n\n &--success {\n border-color: $vbPrimaryColor;\n }\n\n &--error {\n border-color: $vbAlertColor;\n }\n\n &--RE {\n background-color: $vbColorsRE02;\n border-color: $vbColorsRE02;\n }\n\n &--OR {\n background-color: $vbColorsOR02;\n border-color: $vbColorsOR02;\n }\n\n &--YE {\n background-color: $vbColorsYE02;\n border-color: $vbColorsYE02;\n }\n\n &--YG {\n background-color: $vbColorsYG02;\n border-color: $vbColorsYG02;\n }\n\n &--GR {\n background-color: $vbColorsGR02;\n border-color: $vbColorsGR02;\n }\n\n &--BG {\n background-color: $vbColorsBG02;\n border-color: $vbColorsBG02;\n }\n\n &--PU {\n background-color: $vbColorsPU02;\n border-color: $vbColorsPU02;\n }\n\n &--GY {\n background-color: $vbColorsGY02;\n border-color: $vbColorsGY02;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n margin-top: -$vbMinimum;\n height: $vbLargeSize;\n }\n\n &__type {\n display: inline-block;\n font-size: $vbCaptionFontSize;\n color: $vbBurntColor;\n margin-right: $vbSmallSize;\n white-space: nowrap;\n\n &--RE {\n color: $vbColorsRE10;\n }\n\n &--OR {\n color: $vbColorsOR10;\n }\n\n &--YE {\n color: $vbColorsYE10;\n }\n\n &--YG {\n color: $vbColorsYG10;\n }\n\n &--GR {\n color: $vbColorsGR10;\n }\n\n &--BG {\n color: $vbColorsBG10;\n }\n\n &--PU {\n color: $vbColorsPU10;\n }\n\n &--GY {\n color: $vbColorsGY10;\n }\n }\n\n &__body {\n font-size: $vbNormalFontSize;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &--success {\n color: $vbPrimaryColor;\n }\n\n &--error {\n color: $vbAlertColor;\n }\n\n &--RE {\n color: $vbColorsRE10;\n }\n\n &--OR {\n color: $vbColorsOR10;\n }\n\n &--YE {\n color: $vbColorsYE10;\n }\n\n &--YG {\n color: $vbColorsYG10;\n }\n\n &--GR {\n color: $vbColorsGR10;\n }\n\n &--BG {\n color: $vbColorsBG10;\n }\n\n &--PU {\n color: $vbColorsPU10;\n }\n\n &--GY {\n color: $vbColorsGY10;\n }\n }\n\n &__removeButton {\n font-size: 0;\n color: $vbBaseColor3;\n margin-left: $vbSmallSize;\n height: $vbLargeSize;\n width: $vbLargeSize;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: color;\n\n &:hover {\n color: darken($vbBaseColor3, 12%);\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n }\n\n &--RE {\n color: $vbColorsRE10;\n }\n\n &--OR {\n color: $vbColorsOR10;\n }\n\n &--YE {\n color: $vbColorsYE10;\n }\n\n &--YG {\n color: $vbColorsYG10;\n }\n\n &--GR {\n color: $vbColorsGR10;\n }\n\n &--BG {\n color: $vbColorsBG10;\n }\n\n &--PU {\n color: $vbColorsPU10;\n }\n\n &--GY {\n color: $vbColorsGY10;\n }\n }\n\n &__removeIcon {\n // アイコンの縦横サイズ指定\n font-size: $vbBasicSize;\n vertical-align: middle;\n }\n}\n\n.vb-miniTag {\n display: inline-block;\n height: 1.25rem;\n max-width: 100%;\n box-sizing: border-box;\n padding: 0 $vbXSmallSize;\n position: relative;\n border-radius: $vbMiniPaddingBorderRadius;\n font-size: $vbNormalFontSize;\n font-family: $vbFontFamily;\n\n &--RE {\n background-color: $vbColorsRE02;\n color: $vbColorsRE10;\n }\n\n &--OR {\n background-color: $vbColorsOR02;\n color: $vbColorsOR10;\n }\n\n &--YE {\n background-color: $vbColorsYE02;\n color: $vbColorsYE10;\n }\n\n &--YG {\n background-color: $vbColorsYG02;\n color: $vbColorsYG10;\n }\n\n &--GR {\n background-color: $vbColorsGR02;\n color: $vbColorsGR10;\n }\n\n &--BG {\n background-color: $vbColorsBG02;\n color: $vbColorsBG10;\n }\n\n &--PU {\n background-color: $vbColorsPU02;\n color: $vbColorsPU10;\n }\n\n &--GY {\n background-color: $vbColorsGY02;\n color: $vbColorsGY10;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n height: 1.25rem;\n }\n\n &__body {\n line-height: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__removeButton {\n width: $vbBasicSize;\n height: $vbBasicSize;\n position: relative;\n cursor: pointer;\n border: 0;\n background-color: transparent;\n padding: 0;\n flex-shrink: 0;\n margin-left: $vbXSmallSize;\n\n &::before {\n content: '';\n position: absolute;\n width: $vbLargeSize;\n height: $vbLargeSize;\n top: math.div($vbBasicSize - $vbLargeSize, 2);\n right: -$vbXSmallSize;\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n\n &:hover {\n cursor: not-allowed;\n }\n }\n\n &--RE {\n color: $vbColorsRE10;\n }\n\n &--OR {\n color: $vbColorsOR10;\n }\n\n &--YE {\n color: $vbColorsYE10;\n }\n\n &--YG {\n color: $vbColorsYG10;\n }\n\n &--GR {\n color: $vbColorsGR10;\n }\n\n &--BG {\n color: $vbColorsBG10;\n }\n\n &--PU {\n color: $vbColorsPU10;\n }\n\n &--GY {\n color: $vbColorsGY10;\n }\n }\n\n &__removeIcon {\n width: $vbBasicSize;\n height: $vbBasicSize;\n }\n}\n" }, { "path": "stylesheets/lv2/withAccordionContent.scss", "content": ".vb-withAccordionContent {\n display: inline-block;\n}\n" }, { "path": "stylesheets/lv2/withBalloon.scss", "content": ".vb-withBalloon {\n display: inline-block;\n\n &__contentWrapper {\n pointer-events: auto;\n }\n\n &__balloonWrapper {\n &--hidden {\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n }\n }\n}\n" }, { "path": "stylesheets/lv2/withFilterableDropdown.scss", "content": ".vb-withFilterableDropdown {\n &__popup {\n min-width: 11rem;\n padding: 1rem 1rem 0 1rem;\n }\n\n &__note {\n padding-bottom: 1rem;\n }\n\n &__footer {\n border-top: 1px solid $vbBaseColor2;\n margin: 0 -1rem;\n padding: 1rem;\n }\n}\n" }, { "path": "stylesheets/lv2/withPopup.scss", "content": ".vb-withPopup {\n display: inline-block;\n\n &__contentWrapper {\n display: block;\n }\n\n &__popupWrapper {\n position: relative;\n transition-property: opacity;\n transition-duration: 0.3s;\n }\n\n &__popup {\n position: absolute;\n top: 0;\n left: 0;\n\n &--rightAligned {\n left: auto;\n right: 0;\n }\n }\n\n &__animation {\n &-enter {\n opacity: 0;\n }\n\n &-enter-active {\n opacity: 1;\n }\n\n &-exit {\n opacity: 0;\n }\n }\n}\n" }, { "path": "stylesheets/lv2/withTOC.scss", "content": ".vb-withTOC {\n display: flex;\n gap: 0 1rem;\n\n &__toc {\n flex-grow: 0;\n flex-shrink: 0;\n width: 11rem;\n\n &__container {\n position: sticky;\n top: 0;\n overflow-y: auto;\n max-height: 100vh;\n margin: -1rem 0 0;\n padding: 0;\n list-style: none;\n }\n\n &__link {\n display: block;\n margin: 1rem 0;\n padding: 0.25rem 1rem;\n text-decoration: none;\n font: $vbHeadlineFont2;\n color: $vbBlackColor;\n border-radius: $vbMiniPaddingBorderRadius;\n cursor: pointer;\n\n &:hover {\n background-color: $vbColorsS01;\n }\n\n &--current {\n background-color: $vbColorsP01;\n color: $vbColorsP05;\n\n &:hover {\n background-color: $vbColorsP01;\n }\n }\n }\n }\n\n &__contents {\n flex-grow: 1;\n\n &__section {\n // Preventing child margins to pierce through which may confuse scrolling spy.\n overflow-y: hidden;\n outline: none;\n }\n }\n}\n" }, { "path": "stylesheets/vibes_2021.scss", "content": "@import './lv0/colors';\n@import './lv0/size';\n@import './lv0/fonts';\n@import './lv0/focus';\n@import './lv1';\n@import './lv2';\n" }, { "path": "tsconfig.build.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"typeRoots\": [\"node_modules/@types\", \"src/@types\"],\n \"removeComments\": false,\n \"declaration\": true\n },\n \"include\": [\"src/**/*\"],\n \"exclude\": [\"src/**/*.stories.tsx\"]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"extends\": \"./node_modules/tsconfig-freee/tsconfig\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "utilities.js.flow", "content": "// @flow\n\nimport * as React from 'react';\n\ntype MarginSize =\n | 0.25\n | 0.5\n | 1\n | 1.5\n | 2\n | 3\n | -0.25\n | -0.5\n | -1\n | -1.5\n | -2\n | -3\n | 'auto';\n\ntype CommonProps = {|\n 'data-guide'?: string,\n 'data-test'?: string,\n 'data-tracking'?: string,\n 'data-masking'?: boolean,\n ma?: MarginSize,\n mt?: MarginSize,\n mb?: MarginSize,\n ml?: MarginSize,\n mr?: MarginSize,\n|};\n\ntype VibesContextValue = {|\n responsive: boolean,\n|};\n\ntype getFocusableElements = (el: HTMLElement) => NodeList;\ntype isFocusableElement = (el: HTMLElement) => boolean;\n\ndeclare module.exports: {\n CommonProps: CommonProps,\n convertRemToPixel: (rem: number) => number,\n pickCommonProps: (props: CommonProps) => CommonProps,\n VibesContext: React.Context,\n useResponsive: (responsiveProp?: boolean) => boolean,\n VibesProvider: ({\n children: React.Node,\n fixedLayout?: boolean,\n portalParent?: HTMLElement,\n portalParentRef?: React.Ref,\n lang?: 'ja' | 'en',\n }) => React.Node,\n getFocusableElements: getFocusableElements,\n isFocusableElement: isFocusableElement,\n};\n" }, { "path": "vibes_2021.css", "content": "@charset \"UTF-8\";\n@font-face {\n font-family: \"freee-logo\";\n font-style: normal;\n src: local(\"Noto Sans CJK JP Medium\"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format(\"woff2\"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format(\"woff\"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format(\"opentype\");\n}\n.vb-loading--block {\n position: relative;\n}\n.vb-loading--inline {\n display: inline-block;\n}\n.vb-loading__fade-enter, .vb-loading__fade-exit {\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.vb-loading__fade-enter-active, .vb-loading__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n}\n.vb-loading__cover {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.7);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n.vb-loading__cover--coverAll {\n position: fixed;\n z-index: 2147483647;\n}\n.vb-loading__animation {\n position: relative;\n width: 3rem;\n height: 3rem;\n max-width: 100%;\n max-height: 100%;\n}\n.vb-loading__animation--coverAll {\n width: 31.5rem;\n height: 10.5rem;\n max-width: 80vw;\n}\n.vb-loading__message {\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #323232;\n margin-top: 1.5rem;\n}\n\n/** @define base */\n.vb-cardBase, .vb-dialogBase, .vb-popupBase, .vb-scrimBase, .vb-floatingBase, .vb-columnBase {\n box-sizing: border-box;\n padding: 1.5rem;\n background-color: #f7f5f5;\n}\n\n.vb-marginBase--fitContent {\n max-width: fit-content;\n}\n\n.vb-columnBase--overflowHidden {\n overflow: hidden;\n}\n.vb-columnBase--rounded {\n border-radius: 0.5rem;\n}\n\n.vb-floatingBase {\n background-color: #fff;\n box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n z-index: 500;\n position: relative;\n border-radius: 1rem;\n overflow: hidden;\n}\n.vb-floatingBase--fitContent {\n max-width: fit-content;\n}\n\n.vb-scrimBase {\n background-color: rgba(0, 0, 0, 0.5);\n color: #fff;\n z-index: 999;\n}\n.vb-scrimBase--small {\n padding: 1rem;\n}\n\n.vb-popupBase {\n background-color: #fff;\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1), 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);\n z-index: 2000;\n position: relative;\n border-radius: 1rem;\n overflow: hidden;\n}\n.vb-popupBase--fitContent {\n max-width: fit-content;\n}\n\n.vb-dialogBase {\n background-color: #fff;\n z-index: 1000;\n position: relative;\n border-radius: 1.5rem;\n overflow: hidden;\n}\n.vb-dialogBase--message {\n z-index: 1500;\n}\n\n.vb-cardBase {\n background-color: #fff;\n box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);\n position: relative;\n border-radius: 0.75rem;\n}\n.vb-cardBase--overflowHidden {\n overflow: hidden;\n}\n.vb-cardBase:not(.vb-cardBase--disabled) .vb-cardBase--clickable {\n border-radius: 0.75rem;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n}\n.vb-cardBase:not(.vb-cardBase--disabled) .vb-cardBase--clickable:hover {\n background-color: #f2f5fc;\n}\n.vb-cardBase--disabled {\n background-color: #f0eded;\n opacity: 0.5;\n cursor: not-allowed;\n}\n.vb-cardBase__link, .vb-cardBase__button {\n text-decoration: none;\n color: #323232;\n display: block;\n text-align: left;\n border: 0;\n background-color: transparent;\n font-size: 100%;\n padding: 0;\n font-family: inherit;\n cursor: pointer;\n}\n.vb-cardBase__link::after, .vb-cardBase__button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n border-radius: 0.75rem;\n}\n.vb-cardBase__link:hover::after, .vb-cardBase__button:hover::after {\n background-color: #ebf3ff;\n mix-blend-mode: multiply;\n}\n.vb-cardBase__link--disabled, .vb-cardBase__button--disabled {\n cursor: not-allowed;\n}\n.vb-cardBase__content {\n position: relative;\n}\n\n.vb-zebraBase {\n padding: 1.5rem;\n background-color: #f7f5f5;\n}\n\n.vb-columnBase--borderDefault,\n.vb-floatingBase--borderDefault,\n.vb-popupBase--borderDefault,\n.vb-dialogBase--borderDefault {\n border: 1px solid #e9e7e7;\n background-color: #fff;\n}\n.vb-columnBase--borderAlert,\n.vb-floatingBase--borderAlert,\n.vb-popupBase--borderAlert,\n.vb-dialogBase--borderAlert {\n border: 1px solid #dc1e32;\n background-color: #fff;\n}\n.vb-columnBase--borderNotice,\n.vb-floatingBase--borderNotice,\n.vb-popupBase--borderNotice,\n.vb-dialogBase--borderNotice {\n border: 1px solid #be8c14;\n background-color: #fff;\n}\n.vb-columnBase--borderSuccess,\n.vb-floatingBase--borderSuccess,\n.vb-popupBase--borderSuccess,\n.vb-dialogBase--borderSuccess {\n border: 1px solid #285ac8;\n background-color: #fff;\n}\n\n.vb-columnBase--inline,\n.vb-popupBase--inline,\n.vb-floatingBase--inline,\n.vb-dialogBase--inline,\n.vb-cardBase--inline {\n display: inline-block;\n vertical-align: middle;\n}\n\n.vb-columnBase--paddingSmall,\n.vb-popupBase--paddingSmall,\n.vb-floatingBase--paddingSmall,\n.vb-dialogBase--paddingSmall,\n.vb-zebraBase--paddingSmall,\n.vb-cardBase--paddingSmall {\n padding: 1rem;\n}\n.vb-columnBase--paddingLarge,\n.vb-popupBase--paddingLarge,\n.vb-floatingBase--paddingLarge,\n.vb-dialogBase--paddingLarge,\n.vb-zebraBase--paddingLarge,\n.vb-cardBase--paddingLarge {\n padding: 2rem;\n}\n.vb-columnBase--paddingZero,\n.vb-popupBase--paddingZero,\n.vb-floatingBase--paddingZero,\n.vb-dialogBase--paddingZero,\n.vb-zebraBase--paddingZero,\n.vb-cardBase--paddingZero {\n padding: 0;\n}\n\n@media (max-width: 48rem) {\n .vb-columnBase--paddingResponsive,\n.vb-zebraBase--paddingResponsive,\n.vb-cardBase--paddingResponsive {\n padding: 1.5rem 1rem;\n }\n}\n\n.vb-zebraBase:nth-child(even) {\n background-color: #fff;\n}\n\n.vb-balloon::after {\n content: \"\";\n display: block;\n border-top: 0.5rem solid #f7f5f5;\n border-left: 0.314rem solid transparent;\n border-right: 0.314rem solid transparent;\n position: absolute;\n bottom: -0.5rem;\n transform: translateX(-50%);\n}\n\n.vb-balloon::before {\n content: \"\";\n display: block;\n border-top: 0.6rem solid #e9e7e7;\n border-left: 0.414rem solid transparent;\n border-right: 0.414rem solid transparent;\n position: absolute;\n bottom: -0.6rem;\n transform: translateX(-50%);\n}\n\n.vb-balloon {\n box-sizing: border-box;\n width: max-content;\n min-width: 13rem;\n min-width: min(13rem, 66vw);\n max-width: 44rem;\n max-width: min(44rem, calc(100vw - 5rem), 66vw);\n padding: 1rem;\n background-color: #f7f5f5;\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1), 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);\n position: absolute;\n left: 50%;\n bottom: calc(100% + 0.5rem);\n transform: translateX(-50%);\n font-size: 0.75rem;\n z-index: 3000;\n}\n.vb-balloon::after {\n left: 50%;\n transform: translateX(-50%);\n}\n.vb-balloon::before {\n left: 50%;\n transform: translateX(-50%);\n}\n.vb-balloon--left {\n transform: none;\n left: calc(-50% + 0.414rem + 1px);\n}\n.vb-balloon--left::before, .vb-balloon--left::after {\n left: calc(1rem - 1px);\n transform: translateX(-50%);\n}\n.vb-balloon--right {\n transform: none;\n left: auto;\n right: calc(-50% + 0.414rem + 1px);\n}\n.vb-balloon--right::before, .vb-balloon--right::after {\n left: auto;\n right: calc(1rem - 1px);\n transform: translateX(50%);\n}\n.vb-balloon--bottom {\n bottom: auto;\n top: 0.5rem;\n}\n.vb-balloon--bottom::after {\n border-top: 0;\n border-bottom: 0.5rem solid #f7f5f5;\n bottom: auto;\n top: -0.5rem;\n}\n.vb-balloon--bottom::before {\n border-top: 0;\n border-bottom: 0.6rem solid #e9e7e7;\n bottom: auto;\n top: -0.6rem;\n}\n.vb-balloon--border-default {\n border: 1px solid #e9e7e7;\n background-color: #fff;\n}\n.vb-balloon--border-default::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n}\n.vb-balloon--border-alert {\n border: 1px solid #dc1e32;\n background-color: #fff;\n}\n.vb-balloon--border-alert::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n}\n.vb-balloon--border-alert::before {\n border-top-color: #dc1e32;\n border-bottom-color: #dc1e32;\n}\n.vb-balloon--border-notice {\n border: 1px solid #be8c14;\n background-color: #fff;\n}\n.vb-balloon--border-notice::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n}\n.vb-balloon--border-notice::before {\n border-top-color: #be8c14;\n border-bottom-color: #be8c14;\n}\n.vb-balloon--border-success {\n border: 1px solid #285ac8;\n background-color: #fff;\n}\n.vb-balloon--border-success::after {\n border-top-color: #fff;\n border-bottom-color: #fff;\n}\n.vb-balloon--border-success::before {\n border-top-color: #285ac8;\n border-bottom-color: #285ac8;\n}\n\n.vb-container {\n display: block;\n width: calc(100vw - 3rem);\n margin: 0 auto;\n position: relative;\n box-sizing: border-box;\n max-width: 70rem;\n min-width: 70rem;\n}\n.vb-container--widthWide {\n max-width: 100rem;\n}\n.vb-container--widthNarrow {\n max-width: 40rem;\n min-width: 40rem;\n}\n.vb-container--responsive {\n min-width: 20rem;\n}\n@media (max-width: 48rem) {\n .vb-container--responsive {\n width: 100vw;\n }\n}\n\n.vb-contentsBase {\n display: block;\n background-color: #fff;\n padding: 1.5rem;\n position: relative;\n box-sizing: border-box;\n}\n.vb-contentsBase--padding-small {\n padding: 1rem;\n}\n.vb-contentsBase--padding-large {\n padding: 2rem;\n}\n@media (max-width: 48rem) {\n .vb-contentsBase--responsive {\n padding: 1rem;\n }\n}\n.vb-contentsBase--responsive + .vb-contentsBase--responsive {\n margin-top: 1.5rem;\n}\n@media (max-width: 48rem) {\n .vb-contentsBase--responsive + .vb-contentsBase--responsive {\n margin-top: 0;\n border-top: 1px solid #e9e7e7;\n }\n}\n\n.vb-negativeContentsBase {\n margin-left: -1.5rem;\n margin-right: -1.5rem;\n}\n.vb-negativeContentsBase:last-child {\n margin-bottom: -1.5rem;\n}\n.vb-negativeContentsBase--negativeMarginSmall {\n margin-left: -1rem;\n margin-right: -1rem;\n}\n.vb-negativeContentsBase--negativeMarginSmall:last-child {\n margin-bottom: -1.5rem;\n}\n.vb-negativeContentsBase--negativeMarginLarge {\n margin-left: -2rem;\n margin-right: -2rem;\n}\n.vb-negativeContentsBase--negativeMarginLarge:last-child {\n margin-bottom: -2rem;\n}\n@media (max-width: 48rem) {\n .vb-negativeContentsBase--responsive {\n margin-left: -1rem;\n margin-right: -1rem;\n }\n .vb-negativeContentsBase--responsive:last-child {\n margin-bottom: -1rem;\n }\n}\n\n.vb-negativeMargin--small--top {\n margin-top: -1rem;\n}\n.vb-negativeMargin--small--left {\n margin-left: -1rem;\n}\n.vb-negativeMargin--small--right {\n margin-right: -1rem;\n}\n.vb-negativeMargin--small--bottom {\n margin-bottom: -1rem;\n}\n.vb-negativeMargin--medium--top {\n margin-top: -1.5rem;\n}\n.vb-negativeMargin--medium--left {\n margin-left: -1.5rem;\n}\n.vb-negativeMargin--medium--right {\n margin-right: -1.5rem;\n}\n.vb-negativeMargin--medium--bottom {\n margin-bottom: -1.5rem;\n}\n.vb-negativeMargin--large--top {\n margin-top: -2rem;\n}\n.vb-negativeMargin--large--left {\n margin-left: -2rem;\n}\n.vb-negativeMargin--large--right {\n margin-right: -2rem;\n}\n.vb-negativeMargin--large--bottom {\n margin-bottom: -2rem;\n}\n\n.vb-scrollableBase--scrollableY {\n overflow-y: auto;\n}\n.vb-scrollableBase--scrollableX {\n overflow-x: auto;\n}\n\n.vb-listButtonSelector__button--disabled, .vb-dropdownItem--disabled, .vb-iconOnlyButton--disabled, .vb-pagerButton--disabled, .vb-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-listButtonSelector__button--disabled:hover, .vb-dropdownItem--disabled:hover, .vb-iconOnlyButton--disabled:hover, .vb-pagerButton--disabled:hover, .vb-button--disabled:hover {\n cursor: not-allowed;\n}\n\n.vb-listButton, .vb-tabButton, .vb-button {\n display: inline-block;\n margin: 0;\n padding: 0 1rem;\n text-align: center;\n text-decoration: none;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, box-shadow, border-color;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n font-size: 0.875rem;\n height: 2.25rem;\n vertical-align: middle;\n white-space: nowrap;\n line-height: calc(2.25rem - 2px);\n}\n.vb-listButton:hover, .vb-tabButton:hover, .vb-button:hover {\n text-decoration: none;\n}\n.vb-listButton:focus, .vb-tabButton:focus, .vb-button:focus {\n outline: none;\n box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2864f0, 0 0 0 4px #fff;\n}\n\n.vb-button--small {\n height: 1.5rem;\n padding: 0 0.5rem;\n font-size: 0.75rem;\n line-height: calc(1.5rem - 2px);\n}\n\n.vb-button--large {\n height: 3rem;\n padding: 0 1rem;\n font-size: 1rem;\n line-height: calc(3rem - 2px);\n}\n\n.vb-iconOnlyButton--appearanceSecondary, .vb-pagerButton, .vb-button--appearanceSecondary {\n background-color: #fff;\n color: #323232;\n border: 1px solid #dcdcdc;\n font-weight: bold;\n}\n.vb-iconOnlyButton--appearanceSecondary:hover, .vb-pagerButton:hover, .vb-button--appearanceSecondary:hover {\n color: #1e46aa;\n background-color: #dce8ff;\n border-color: #1e46aa;\n}\n\n.vb-tabButton {\n background-color: #f0eded;\n color: #323232;\n font-weight: normal;\n}\n.vb-tabButton:hover {\n background-color: #dbd4d4;\n}\n\n.vb-iconOnlyButton--appearancePrimary, .vb-button--appearancePrimary {\n border: 0;\n background-color: #285ac8;\n color: #fff;\n font-weight: bold;\n}\n.vb-iconOnlyButton--appearancePrimary:hover, .vb-button--appearancePrimary:hover {\n background-color: #23418c;\n}\n.vb-iconOnlyButton--appearancePrimary:hover, .vb-button--appearancePrimary:hover, .vb-iconOnlyButton--appearancePrimary:focus, .vb-button--appearancePrimary:focus {\n color: #fff;\n}\n\n.vb-iconOnlyButton--appearancePrimary.vb-iconOnlyButton--danger, .vb-button--appearancePrimary.vb-button--danger {\n border: 0;\n background-color: #dc1e32;\n color: #fff;\n font-weight: bold;\n}\n.vb-iconOnlyButton--appearancePrimary.vb-iconOnlyButton--danger:hover, .vb-button--appearancePrimary.vb-button--danger:hover {\n background-color: #a51428;\n}\n\n.vb-pagerButton.vb-pagerButton--current, .vb-tabButton.vb-tabButton--current {\n border: 0;\n background-color: #285ac8;\n color: #fff;\n font-weight: bold;\n cursor: default;\n}\n.vb-pagerButton.vb-pagerButton--current:hover, .vb-tabButton.vb-tabButton--current:hover {\n background-color: #285ac8;\n}\n\n.vb-button__icon {\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/** @define button */\n.vb-button--leftIcon {\n padding-left: 2.75em;\n position: relative;\n text-align: left;\n}\n.vb-button--rightIcon {\n padding-right: 2.75em;\n position: relative;\n text-align: left;\n}\n.vb-button__icon--left {\n left: 0.625em;\n}\n.vb-button__icon--right {\n right: 0.625em;\n}\n.vb-button--appearanceSecondary.vb-button--danger {\n color: #dc1e32;\n}\n.vb-button--appearanceSecondary.vb-button--danger:hover {\n border-color: #a51428;\n color: #a51428;\n background-color: #fad2d7;\n}\n\n.vb-button--widthFull {\n width: 100%;\n}\n.vb-button--hasMinWidth {\n min-width: 6rem;\n}\n.vb-button.vb-button--hasMinWidth.vb-button--small {\n min-width: 5rem;\n}\n.vb-button.vb-button--hasMinWidth.vb-button--large {\n min-width: 11rem;\n}\n.vb-button--appearanceTertiary {\n min-width: auto;\n background-color: transparent;\n color: #323232;\n font-weight: bold;\n border: 1px solid transparent;\n}\n.vb-button--appearanceTertiary:hover {\n color: #1e46aa;\n background-color: rgba(138, 178, 255, 0.3);\n}\n.vb-button--appearanceTertiary.vb-button:not(.vb-button--leftIcon) {\n padding-left: 0.5rem;\n}\n\n.vb-button--appearanceTertiary.vb-button:not(.vb-button--rightIcon) {\n padding-right: 0.5rem;\n}\n\n.vb-button--appearanceTertiary.vb-button--danger {\n color: #dc1e32;\n}\n.vb-button--appearanceTertiary.vb-button--danger:hover {\n color: #a51428;\n background-color: rgba(238, 105, 122, 0.3);\n}\n\n/** @define textButton */\n.vb-textButton {\n display: inline-block;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n.vb-textButton .vb-textButton__icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n margin-right: 0.25rem;\n fill: #323232;\n vertical-align: middle;\n}\n.vb-textButton .vb-textButton__icon--right {\n margin-right: 0;\n margin-left: 0.25rem;\n}\n.vb-textButton__link {\n text-decoration: underline;\n color: #285ac8;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.vb-textButton__button {\n text-decoration: underline;\n color: #285ac8;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.vb-textButton--noBorder .vb-textButton__link, .vb-textButton--noBorder .vb-textButton__button {\n text-decoration: none;\n}\n.vb-textButton:not(.vb-textButton--disabled) .vb-textButton__link:hover, .vb-textButton:not(.vb-textButton--disabled) .vb-textButton__button:hover {\n color: #73a5ff;\n cursor: pointer;\n}\n.vb-textButton--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.vb-textButton--small {\n font-size: 0.75rem;\n}\n\n.vb-globalNaviButton {\n font-weight: bold;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n text-decoration: none;\n color: #fff;\n display: block;\n padding: 1rem;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n box-sizing: border-box;\n color: #323232;\n padding: 0 1rem;\n height: calc(3rem - 1px);\n line-height: calc(2.75rem - 1px);\n}\n.vb-globalNaviButton__icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n margin-right: 0.375em;\n vertical-align: middle;\n}\n.vb-globalNaviButton .vb-globalNaviButton__text {\n vertical-align: middle;\n}\n.vb-globalNaviButton:not(.vb-globalNaviButton--current):hover {\n background-color: rgba(255, 255, 255, 0.1);\n background-color: #ebf3ff;\n color: #285ac8;\n}\n.vb-globalNaviButton--current {\n background-color: rgba(0, 0, 0, 0.15);\n color: #285ac8;\n background-color: #fff;\n border-bottom: 0.25rem solid #2864f0;\n}\n\n/** @define jumpButton */\n.vb-jumpButton,\n.vb-backwardButton {\n display: inline-block;\n padding: 0;\n}\n\n/** @define tabButton */\n.vb-tabButton {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n.vb-tabButton:hover:not(.vb-tabButton--current) {\n color: #323232;\n}\n.vb-tabButton.vb-tabButton--current {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n cursor: default;\n}\n.vb-tabButton.vb-tabButton--small {\n min-width: 7rem;\n padding: 0.5rem;\n font-size: 0.75rem;\n}\n\n/** @define pagerButton */\n.vb-pagerButton {\n padding: 0 0.5rem;\n box-sizing: border-box;\n min-width: 2rem;\n height: 2rem;\n border-radius: 0.5rem;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n font-size: 0.875rem;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n.vb-pagerButton.vb-pagerButton--current {\n font-size: 1rem;\n cursor: default;\n outline: 0;\n}\n.vb-pagerButton.vb-pagerButton--small {\n height: 1.5rem;\n min-width: 1.5rem;\n font-size: 0.75rem;\n}\n/** @define iconOnlyButton */\n.vb-iconOnlyButton {\n padding: 0;\n box-sizing: border-box;\n width: 2.25rem;\n height: 2.25rem;\n border-radius: 0.5rem;\n text-align: center;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, border;\n font-size: 1.5rem;\n display: inline-block;\n}\n.vb-iconOnlyButton .vb-iconOnlyButton__icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.vb-iconOnlyButton--appearancePrimary:hover {\n color: #fff;\n}\n.vb-iconOnlyButton--appearanceSecondary.vb-iconOnlyButton--danger {\n color: #dc1e32;\n}\n.vb-iconOnlyButton--appearanceSecondary.vb-iconOnlyButton--danger:hover {\n border-color: #a51428;\n color: #a51428;\n background-color: #fad2d7;\n}\n\n.vb-iconOnlyButton--appearanceTertiary {\n background-color: transparent;\n color: #323232;\n border: 1px solid transparent;\n}\n.vb-iconOnlyButton--appearanceTertiary:hover {\n color: #1e46aa;\n background-color: rgba(138, 178, 255, 0.3);\n}\n.vb-iconOnlyButton--appearanceTertiary.vb-iconOnlyButton--danger {\n color: #dc1e32;\n}\n.vb-iconOnlyButton--appearanceTertiary.vb-iconOnlyButton--danger:hover {\n background-color: rgba(238, 105, 122, 0.3);\n}\n\n.vb-iconOnlyButton--small {\n height: 1.5rem;\n width: 1.5rem;\n font-size: 1rem;\n}\n.vb-iconOnlyButton--large {\n height: 3rem;\n width: 3rem;\n font-size: 2rem;\n}\n.vb-iconOnlyButton:hover {\n text-decoration: none;\n}\n.vb-listButton {\n display: block;\n width: 100%;\n border-radius: 0;\n background-color: #f7f5f5;\n font-weight: bold;\n text-align: left;\n color: inherit;\n word-break: keep-all;\n}\n.vb-listButton:hover:not([aria-selected]) {\n background-color: #f0eded;\n}\n.vb-listButton--selected {\n cursor: default;\n color: #6e6b6b;\n}\n.vb-listButton--bgTransparent {\n background-color: transparent;\n}\n.vb-listButton__leftIcon {\n margin-right: 0.375em;\n}\n.vb-listButton__farRightIcon {\n float: right;\n}\n\n.vb-inlineLink {\n transition-duration: 0.2s;\n transition-property: color, background-color;\n display: inline;\n border: 0;\n padding: 0;\n background: transparent;\n font-size: 1em;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #285ac8;\n cursor: pointer;\n text-decoration: underline;\n}\n.vb-inlineLink:hover {\n color: #23418c;\n}\n.vb-inlineLink__iconWrapper {\n height: 1em;\n width: 1.5em;\n vertical-align: middle;\n display: inline-block;\n position: relative;\n line-height: 1;\n}\n.vb-inlineLink__icon {\n font-size: 1.5em;\n position: absolute;\n left: 0;\n top: 50%;\n margin-top: -50%;\n}\n.vb-inlineLink--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.vb-calendarDate {\n padding: 0;\n margin: 0;\n border-bottom: 1px solid #e9e7e7;\n position: relative;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n}\n.vb-calendarDate::before {\n content: \"\";\n display: block;\n padding-top: 100%;\n}\n\n.vb-calendarDate {\n color: #323232;\n cursor: pointer;\n}\n.vb-calendarDate:hover {\n background-color: #f0eded;\n}\n\n.vb-calendarDate--input {\n background-color: #285ac8;\n color: #fff;\n cursor: pointer;\n}\n.vb-calendarDate--input:hover {\n background-color: #73a5ff;\n}\n\n.vb-calendarDate--secondary-holiday {\n color: #6e6b6b;\n cursor: pointer;\n}\n.vb-calendarDate--secondary-holiday:hover {\n background-color: #f0eded;\n}\n\n.vb-calendarDate--primary-holiday {\n color: #dc1e32;\n cursor: pointer;\n}\n.vb-calendarDate--primary-holiday:hover {\n background-color: #f0eded;\n}\n\n.vb-calendarDate--disabled {\n background-color: #f7f5f5;\n color: #8c8989;\n cursor: not-allowed;\n outline: none;\n pointer-events: none;\n}\n\n.vb-calendarDate__number {\n display: block;\n font-size: 1.5rem;\n line-height: 1;\n position: absolute;\n top: 1rem;\n left: 1rem;\n}\n\n.vb-calendarDate__number--today {\n width: 2em;\n height: 2em;\n margin: -0.5em 0 0 -0.5em;\n border-radius: 99rem;\n background-color: #285ac8;\n color: #fff;\n font-size: 1em;\n text-align: center;\n line-height: 2em;\n}\n\n.vb-calendarDate__number--today--input {\n width: 2em;\n height: 2em;\n margin: -0.5em 0 0 -0.5em;\n border-radius: 99rem;\n background-color: #fff;\n color: #285ac8;\n font-size: 1em;\n text-align: center;\n line-height: 2em;\n}\n\n/** @define calendar */\n.vb-calendarDate__inner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.vb-calendarDate__status--alert {\n position: relative;\n}\n.vb-calendarDate__status--alert::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid #dc1e32;\n}\n.vb-calendarDate__status--notice {\n position: relative;\n}\n.vb-calendarDate__status--notice::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid #be8c14;\n}\n.vb-calendarDate__status--success {\n position: relative;\n}\n.vb-calendarDate__status--success::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n padding: 0;\n width: 0;\n height: 0;\n border: 0 solid transparent;\n border-top-width: 0;\n border-bottom-width: 2.7em;\n border-right: 2.7em solid #73a5ff;\n}\n.vb-calendarDate__icon {\n display: block;\n position: absolute;\n color: #fff;\n top: 0.25em;\n right: 0.25em;\n}\n.vb-calendarDate--disabled .vb-calendarDate__number--today {\n color: #fff;\n background: #8c8989;\n}\n.vb-calendarDate__type {\n display: block;\n font-size: 0.75rem;\n line-height: 1;\n position: absolute;\n top: 3rem;\n left: 1rem;\n}\n.vb-calendarDate__time {\n display: block;\n font-size: 0.875rem;\n text-align: right;\n line-height: 1;\n position: absolute;\n right: 1rem;\n bottom: 1rem;\n}\n\n.vb-calendarHead {\n border-bottom: 1px solid #e9e7e7;\n}\n.vb-calendarHead__cell {\n text-align: left;\n font-weight: 0.875rem;\n font-weight: normal;\n padding: 0 0 1rem 1rem;\n}\n.vb-calendarHead__cell--secondary-holiday {\n color: #001478;\n}\n.vb-calendarHead__cell--primary-holiday {\n color: #c7423a;\n}\n\n/** @define iconWrapper */\n.vb-iconWrapper {\n display: inline-block;\n margin: 0;\n padding: 0.5rem;\n background-color: #fff;\n line-height: 1;\n}\n\n.vb-focusHighlight {\n display: block;\n width: fit-content;\n position: relative;\n}\n.vb-focusHighlight--inline {\n display: inline-block;\n}\n.vb-focusHighlight--full {\n width: 100%;\n}\n.vb-focusHighlight::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n opacity: 0;\n transition-duration: 0.2s;\n transition-property: opacity;\n}\n.vb-focusHighlight--round::after {\n border-radius: 0.25rem;\n}\n.vb-focusHighlight:focus-within.vb-focusHighlight:after {\n box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2864f0, 0 0 0 4px #fff;\n opacity: 1;\n}\n\n.vb-focusHighlight:focus-within.vb-focusHighlight--inset:after {\n box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #2864f0, inset 0 0 0 4px #fff;\n}\n\n.vb-focusTrap--inline {\n display: inline-block;\n}\n\n/** @define form */\n.vb-radio,\n.vb-checkbox, .vb-indexSearchField .vb-indexSearchField__input, .vb-textField, .vb-select__body, .vb-searchField .vb-searchField__input, .vb-textarea {\n display: inline-flex;\n padding: 0;\n margin: 0;\n border: none;\n box-shadow: none;\n box-sizing: border-box;\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n vertical-align: inherit;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n -ms-appearance: none;\n}\n.vb-radio::-ms-expand,\n.vb-checkbox::-ms-expand, .vb-indexSearchField .vb-indexSearchField__input::-ms-expand, .vb-textField::-ms-expand, .vb-select__body::-ms-expand, .vb-searchField .vb-searchField__input::-ms-expand, .vb-textarea::-ms-expand {\n display: none;\n}\n\n.vb-indexSearchField .vb-indexSearchField__input, .vb-textField, .vb-select__body, .vb-searchField .vb-searchField__input, .vb-textarea {\n height: 2.25rem;\n padding: 0 0.5rem;\n border: 1px solid #dcdcdc;\n border-radius: 0.5rem;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: border-color, background-color, color;\n}\n.vb-indexSearchField .vb-indexSearchField__input:-ms-input-placeholder, .vb-textField:-ms-input-placeholder, .vb-select__body:-ms-input-placeholder, .vb-searchField .vb-searchField__input:-ms-input-placeholder, .vb-textarea:-ms-input-placeholder {\n color: #8c8989;\n transition-duration: 0.3s;\n transition-property: opacity;\n}\n.vb-indexSearchField .vb-indexSearchField__input::placeholder, .vb-textField::placeholder, .vb-select__body::placeholder, .vb-searchField .vb-searchField__input::placeholder, .vb-textarea::placeholder {\n color: #8c8989;\n transition-duration: 0.3s;\n transition-property: opacity;\n}\n.vb-indexSearchField .vb-indexSearchField__input:focus:-ms-input-placeholder, .vb-textField:focus:-ms-input-placeholder, .vb-select__body:focus:-ms-input-placeholder, .vb-searchField .vb-searchField__input:focus:-ms-input-placeholder, .vb-textarea:focus:-ms-input-placeholder {\n opacity: 0;\n}\n.vb-indexSearchField .vb-indexSearchField__input:focus::placeholder, .vb-textField:focus::placeholder, .vb-select__body:focus::placeholder, .vb-searchField .vb-searchField__input:focus::placeholder, .vb-textarea:focus::placeholder {\n opacity: 0;\n}\n.vb-indexSearchField [disabled].vb-indexSearchField__input, [disabled].vb-textField, [disabled].vb-select__body, .vb-searchField [disabled].vb-searchField__input, [disabled].vb-textarea {\n background-color: #f0eded;\n cursor: not-allowed;\n color: revert;\n}\n\n.vb-textField--error, .vb-textarea--error, .vb-select__body--error, .vb-searchField .vb-searchField__input--error {\n border-color: #dc1e32;\n color: #dc1e32;\n}\n.vb-textField--error:-ms-input-placeholder, .vb-textarea--error:-ms-input-placeholder, .vb-select__body--error:-ms-input-placeholder, .vb-searchField .vb-searchField__input--error:-ms-input-placeholder {\n color: #dc1e32;\n}\n.vb-textField--error::placeholder, .vb-textarea--error::placeholder, .vb-select__body--error::placeholder, .vb-searchField .vb-searchField__input--error::placeholder {\n color: #dc1e32;\n}\n\n.vb-textField--small, .vb-textarea--small, .vb-select__body--small, .vb-searchField .vb-searchField__input--small {\n height: 1.5rem;\n padding: 0 0.5rem;\n font-size: 0.75rem;\n}\n\n.vb-textField--large, .vb-textarea--large, .vb-select__body--large, .vb-searchField .vb-searchField__input--large {\n height: 3rem;\n padding: 0 1rem;\n font-size: 1rem;\n}\n\n.vb-textField--borderless, .vb-searchField .vb-searchField__input--borderless {\n border: 0;\n border-radius: 0;\n outline: none;\n}\n\n.vb-textarea {\n min-width: 55em;\n height: 5em;\n max-width: 100%;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.vb-radio .vb-radio__control,\n.vb-radio .vb-checkbox__control,\n.vb-checkbox .vb-radio__control,\n.vb-checkbox .vb-checkbox__control {\n cursor: pointer;\n margin: 0;\n vertical-align: middle;\n}\n\n.vb-radio .vb-radio__label,\n.vb-radio .vb-checkbox__label,\n.vb-checkbox .vb-radio__label,\n.vb-checkbox .vb-checkbox__label {\n margin-left: 0.5rem;\n vertical-align: middle;\n}\n\n.vb-radio--error,\n.vb-checkbox--error {\n color: #dc1e32;\n}\n\n.vb-radio--small,\n.vb-checkbox--small {\n font-size: 0.75rem;\n}\n\n/**\n @define radio\n @define checkbox\n*/\n.vb-radio,\n.vb-checkbox {\n align-items: baseline;\n cursor: pointer;\n}\n.vb-radio .vb-radio__control--disabled,\n.vb-radio .vb-checkbox__control--disabled,\n.vb-checkbox .vb-radio__control--disabled,\n.vb-checkbox .vb-checkbox__control--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.vb-radio--disabled,\n.vb-checkbox--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n/** @define searchField */\n.vb-searchField {\n display: inline-block;\n position: relative;\n max-width: 100%;\n min-width: 4rem;\n}\n.vb-searchField--widthFull {\n width: 100%;\n}\n.vb-searchField .vb-searchField__input {\n padding-left: 2.75em;\n max-width: 100%;\n min-width: 4rem;\n}\n.vb-searchField .vb-searchField__input::-webkit-search-cancel-button {\n cursor: pointer;\n}\n.vb-searchField .vb-searchField__input + svg {\n fill: #e9e7e7;\n}\n.vb-searchField .vb-searchField__input--error + svg {\n fill: #dc1e32;\n}\n.vb-searchField .vb-searchField__input--small {\n padding-left: 1.75rem;\n}\n.vb-searchField .vb-searchField__input--widthXSmall {\n width: 4rem;\n}\n.vb-searchField .vb-searchField__input--widthSmall {\n width: 7rem;\n}\n.vb-searchField .vb-searchField__input--widthMedium {\n width: 11rem;\n}\n.vb-searchField .vb-searchField__input--widthLarge {\n width: 24rem;\n}\n.vb-searchField .vb-searchField__input--widthFull {\n width: 100%;\n}\n@media (max-width: 48rem) {\n .vb-searchField .vb-searchField__input--responsive {\n font-size: 1rem;\n }\n}\n.vb-searchField .vb-searchField__icon {\n display: block;\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n left: 0.75em;\n transform: translateY(-50%);\n}\n.vb-searchField .vb-searchField__icon--small {\n display: block;\n width: 1em;\n height: 1em;\n position: absolute;\n top: 50%;\n left: 0.5em;\n transform: translateY(-50%);\n}\n\n/** @define select */\n.vb-select {\n display: inline-flex;\n position: relative;\n min-width: 4rem;\n max-width: 100%;\n overflow: hidden;\n border-radius: 0.5rem;\n}\n.vb-select:focus-within {\n box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2864f0, 0 0 0 4px #fff;\n}\n.vb-select::before, .vb-select::after {\n content: \"\";\n display: block;\n width: 0;\n border-left: 0.1875em solid transparent;\n border-right: 0.1875em solid transparent;\n position: absolute;\n right: 0.5em;\n pointer-events: none;\n z-index: 1;\n}\n.vb-select::before {\n border-bottom: 0.315em solid #323232;\n bottom: 50%;\n transform: translateY(-0.08em);\n}\n.vb-select::after {\n border-top: 0.315em solid #323232;\n top: 50%;\n transform: translateY(0.08em);\n}\n.vb-select--widthXSmall {\n width: 4rem;\n}\n.vb-select--widthSmall {\n width: 7rem;\n}\n.vb-select--widthMedium {\n width: 11rem;\n}\n.vb-select--widthLarge {\n width: 24rem;\n}\n.vb-select--widthFull {\n width: 100%;\n}\n.vb-select--error::before {\n border-bottom-color: #dc1e32;\n}\n.vb-select--error::after {\n border-top-color: #dc1e32;\n}\n.vb-select__body {\n padding-right: 1rem;\n width: 100%;\n text-overflow: ellipsis;\n}\n.vb-select__body:focus {\n outline: none;\n}\n.vb-select__body:not(.vb-select__body--error) {\n color: #323232;\n}\n.vb-select__body--error optgroup:not(:disabled),\n.vb-select__body--error option:not(:disabled) {\n color: initial;\n}\n.vb-select__body--alignCenter {\n text-align: center;\n}\n.vb-select__body--alignRight {\n text-align: right;\n}\n\n/** @define textarea */\n.vb-textarea {\n font-family: inherit;\n}\n.vb-textarea--resizeNone {\n resize: none;\n}\n.vb-textarea--resizeHorizontal {\n resize: horizontal;\n}\n.vb-textarea--resizeVertical {\n resize: vertical;\n}\n.vb-textarea--resizeBoth {\n resize: both;\n}\n.vb-textarea--widthSmall {\n min-width: 24rem;\n}\n.vb-textarea--widthMedium {\n min-width: 55rem;\n}\n.vb-textarea--widthLarge {\n min-width: 67rem;\n}\n.vb-textarea--widthFull {\n min-width: 100%;\n}\n.vb-textarea--height1 {\n height: 1rem;\n}\n.vb-textarea--height2 {\n height: 2rem;\n}\n.vb-textarea--height3 {\n height: 3rem;\n}\n.vb-textarea--height4 {\n height: 4rem;\n}\n.vb-textarea--height5 {\n height: 5rem;\n}\n.vb-textarea--height6 {\n height: 6rem;\n}\n.vb-textarea--height7 {\n height: 7rem;\n}\n.vb-textarea--height8 {\n height: 8rem;\n}\n.vb-textarea--height9 {\n height: 9rem;\n}\n.vb-textarea--height10 {\n height: 10rem;\n}\n.vb-textarea--height11 {\n height: 11rem;\n}\n.vb-textarea--height12 {\n height: 12rem;\n}\n.vb-textarea--height13 {\n height: 13rem;\n}\n.vb-textarea--height14 {\n height: 14rem;\n}\n.vb-textarea--height15 {\n height: 15rem;\n}\n.vb-textarea--height16 {\n height: 16rem;\n}\n.vb-textarea--height17 {\n height: 17rem;\n}\n.vb-textarea--height18 {\n height: 18rem;\n}\n.vb-textarea--height19 {\n height: 19rem;\n}\n.vb-textarea--height20 {\n height: 20rem;\n}\n.vb-textarea--height21 {\n height: 21rem;\n}\n.vb-textarea--height22 {\n height: 22rem;\n}\n.vb-textarea--height23 {\n height: 23rem;\n}\n.vb-textarea--height24 {\n height: 24rem;\n}\n.vb-textarea--height25 {\n height: 25rem;\n}\n.vb-textarea--height26 {\n height: 26rem;\n}\n.vb-textarea--height27 {\n height: 27rem;\n}\n.vb-textarea--height28 {\n height: 28rem;\n}\n.vb-textarea--height29 {\n height: 29rem;\n}\n.vb-textarea--height30 {\n height: 30rem;\n}\n.vb-textarea--height31 {\n height: 31rem;\n}\n.vb-textarea--height32 {\n height: 32rem;\n}\n.vb-textarea--height33 {\n height: 33rem;\n}\n.vb-textarea--height34 {\n height: 34rem;\n}\n.vb-textarea--height35 {\n height: 35rem;\n}\n.vb-textarea--height36 {\n height: 36rem;\n}\n.vb-textarea--height37 {\n height: 37rem;\n}\n.vb-textarea--height38 {\n height: 38rem;\n}\n.vb-textarea--height39 {\n height: 39rem;\n}\n.vb-textarea--height40 {\n height: 40rem;\n}\n.vb-textarea--height41 {\n height: 41rem;\n}\n.vb-textarea--height42 {\n height: 42rem;\n}\n.vb-textarea--height43 {\n height: 43rem;\n}\n.vb-textarea--height44 {\n height: 44rem;\n}\n.vb-textarea--height45 {\n height: 45rem;\n}\n.vb-textarea--height46 {\n height: 46rem;\n}\n.vb-textarea--height47 {\n height: 47rem;\n}\n.vb-textarea--height48 {\n height: 48rem;\n}\n.vb-textarea--height49 {\n height: 49rem;\n}\n.vb-textarea--height50 {\n height: 50rem;\n}\n.vb-textarea--height51 {\n height: 51rem;\n}\n.vb-textarea--height52 {\n height: 52rem;\n}\n.vb-textarea--height53 {\n height: 53rem;\n}\n.vb-textarea--height54 {\n height: 54rem;\n}\n.vb-textarea--height55 {\n height: 55rem;\n}\n.vb-textarea--height56 {\n height: 56rem;\n}\n.vb-textarea--height57 {\n height: 57rem;\n}\n.vb-textarea--height58 {\n height: 58rem;\n}\n.vb-textarea--height59 {\n height: 59rem;\n}\n.vb-textarea--height60 {\n height: 60rem;\n}\n.vb-textarea--height61 {\n height: 61rem;\n}\n.vb-textarea--height62 {\n height: 62rem;\n}\n.vb-textarea--height63 {\n height: 63rem;\n}\n.vb-textarea--height64 {\n height: 64rem;\n}\n.vb-textarea--height65 {\n height: 65rem;\n}\n.vb-textarea--height66 {\n height: 66rem;\n}\n.vb-textarea--height67 {\n height: 67rem;\n}\n.vb-textarea--height68 {\n height: 68rem;\n}\n.vb-textarea--height69 {\n height: 69rem;\n}\n.vb-textarea--height70 {\n height: 70rem;\n}\n@media (max-width: 48rem) {\n .vb-textarea--responsive {\n font-size: 1rem;\n }\n}\n\n/** @define textField */\n.vb-textField {\n min-width: 4rem;\n max-width: 100%;\n}\n.vb-textField__wrapper {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n}\n.vb-textField__wrapper--widthFull {\n width: 100%;\n}\n.vb-textField--alignCenter {\n text-align: center;\n}\n.vb-textField--alignRight {\n text-align: right;\n}\n.vb-textField--widthXSmall {\n width: 4rem;\n}\n.vb-textField--widthSmall {\n width: 7rem;\n}\n.vb-textField--widthMedium {\n width: 11rem;\n}\n.vb-textField--widthLarge {\n width: 24rem;\n}\n.vb-textField--widthFull {\n width: 100%;\n}\n.vb-textField--hideSpinner {\n -moz-appearance: textfield;\n}\n.vb-textField--hideSpinner::-webkit-outer-spin-button, .vb-textField--hideSpinner::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.vb-textField--withIcon {\n padding-right: 1.25rem;\n}\n.vb-textField__suffix {\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n margin-left: 0.25rem;\n}\n.vb-textField__suffix--small {\n font-size: 0.75rem;\n}\n.vb-textField__suffix--large {\n font-size: 1rem;\n}\n.vb-textField__icon, .vb-textField__iconButton {\n position: absolute;\n right: 0.25rem;\n top: 0;\n bottom: 0;\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n text-align: center;\n line-height: 1;\n color: #8c8989;\n box-sizing: border-box;\n}\n.vb-textField__icon::before, .vb-textField__iconButton::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n right: -0.25rem;\n width: 1.5rem;\n}\n.vb-textField__icon {\n pointer-events: none;\n}\n.vb-textField__iconButton {\n border: 0;\n background: transparent;\n padding: 0;\n}\n.vb-textField__iconButton[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.vb-textField__iconButton:not([disabled]):hover {\n cursor: pointer;\n color: #285ac8;\n}\n@media (max-width: 48rem) {\n .vb-textField--responsive {\n font-size: 1rem;\n }\n}\n\n.vb-readOnlyField {\n display: inline-block;\n min-height: 2.25rem;\n font-size: 0.875rem;\n vertical-align: middle;\n}\n.vb-readOnlyField__inner {\n display: flex;\n align-items: center;\n height: 100%;\n min-height: 2.25rem;\n white-space: pre-line;\n}\n.vb-readOnlyField--alignRight .vb-readOnlyField__inner {\n justify-content: flex-end;\n}\n.vb-readOnlyField--small {\n height: 1.5rem;\n font-size: 0.75rem;\n}\n.vb-readOnlyField--large {\n height: 3rem;\n font-size: 1rem;\n}\n.vb-readOnlyField--widthXSmall {\n min-width: 4rem;\n}\n.vb-readOnlyField--widthSmall {\n min-width: 7rem;\n}\n.vb-readOnlyField--widthMedium {\n min-width: 11rem;\n}\n.vb-readOnlyField--widthLarge {\n min-width: 24rem;\n}\n.vb-readOnlyField--widthFull {\n min-width: 100%;\n}\n\n.vb-formControlLabel {\n display: inline-block;\n}\n.vb-formControlLabel__text {\n display: inline-block;\n vertical-align: middle;\n overflow-wrap: break-word;\n color: #323232;\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n\n.vb-toggleButton {\n display: inline-block;\n}\n.vb-toggleButton--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.vb-toggleButton__input {\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n}\n.vb-toggleButton__body {\n display: inline-block;\n cursor: pointer;\n font-size: 0.875rem;\n box-sizing: border-box;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n height: 2.25rem;\n line-height: 2.25rem;\n vertical-align: middle;\n padding: 0 0.5rem;\n border: 1px solid #e9e7e7;\n margin-left: -1px;\n color: #285ac8;\n background-color: #fff;\n position: relative;\n}\n.vb-toggleButton__body:hover {\n background-color: #f2f5fc;\n}\n.vb-toggleButton__body::before {\n transition-duration: 0.2s;\n transition-property: border-color;\n content: \"\";\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 2px solid transparent;\n}\n.vb-toggleButton--small .vb-toggleButton__body {\n height: 1.5rem;\n line-height: 1.5rem;\n font-size: 0.75rem;\n}\n.vb-toggleButton:first-child .vb-toggleButton__body {\n margin-left: unset;\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n}\n.vb-toggleButton:first-child .vb-toggleButton__body::before {\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n}\n.vb-toggleButton:last-child .vb-toggleButton__body {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n}\n.vb-toggleButton:last-child .vb-toggleButton__body::before {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n}\n.vb-toggleButton .vb-toggleButton__input:focus + .vb-toggleButton__body {\n z-index: 2;\n}\n.vb-toggleButton .vb-toggleButton__input:focus + .vb-toggleButton__body::before {\n border-color: #73a5ff;\n}\n.vb-toggleButton__input:checked + .vb-toggleButton__body {\n background: #f7f5f5;\n border-color: #8c8989;\n font-weight: bold;\n z-index: 1;\n}\n.vb-toggleButton__input:checked + .vb-toggleButton__body:hover {\n background-color: #f2f5fc;\n}\n.vb-optionButton {\n border-radius: 0.5rem;\n box-sizing: border-box;\n border: 1px solid #d7d2d2;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n background: #fff;\n position: relative;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, box-shadow;\n}\n.vb-optionButton:hover {\n background-color: #f2f5fc;\n}\n.vb-optionButton--sizeSmall {\n min-height: 1.5rem;\n min-width: 5rem;\n padding: 0 0.5rem;\n}\n.vb-optionButton--sizeSmall .vb-optionButton__children {\n min-height: 1.5rem;\n}\n.vb-optionButton--sizeMedium {\n min-height: 2.25rem;\n min-width: 6rem;\n padding: 0 1rem;\n}\n.vb-optionButton--sizeMedium .vb-optionButton__children {\n min-height: 2.25rem;\n}\n.vb-optionButton--sizeLarge {\n min-width: 11rem;\n min-height: 3rem;\n padding: 0 1rem;\n}\n.vb-optionButton--sizeLarge .vb-optionButton__children {\n min-height: 3rem;\n}\n.vb-optionButton--widthFull {\n width: 100%;\n}\n.vb-optionButton--checked {\n border-color: #2864f0;\n box-shadow: 0 0 0 1px #2864f0;\n}\n.vb-optionButton__button {\n position: absolute;\n inset: 0;\n}\n.vb-optionButton__children {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n height: 100%;\n}\n.vb-optionButton__children__inner {\n width: 100%;\n}\n\n.vb-gridWrapper {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: stretch;\n}\n\n.vb-gridBlock {\n display: flex;\n}\n.vb-gridBlock > * {\n flex-grow: 1;\n}\n.vb-gridBlock--oneThird {\n flex-basis: calc((100% - 1.5rem * 2) / 3);\n}\n.vb-gridBlock--twoThirds {\n flex-basis: calc(\n (100% - 1.5rem * 2) / 3 * 2 + 1.5rem\n );\n}\n.vb-gridBlock--half {\n flex-basis: calc((100% - 1.5rem) / 2);\n}\n.vb-gridBlock--oneQuarter {\n flex-basis: calc((100% - 1.5rem * 3) / 4);\n}\n.vb-gridBlock--threeQuarters {\n flex-basis: calc(\n (100% - 1.5rem * 3) / 4 * 3 + 1.5rem * 2\n );\n}\n\n.vb-text, .vb-paragraph, .vb-note, .vb-subSectionTitle, .vb-sectionTitle, .vb-pageTitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n}\n\n.vb-subSectionTitle, .vb-sectionTitle, .vb-pageTitle {\n display: block;\n overflow-wrap: break-word;\n border-radius: 0.25rem;\n}\n.vb-subSectionTitle:focus, .vb-sectionTitle:focus, .vb-pageTitle:focus {\n outline: none;\n}\n.vb-subSectionTitle:focus:focus-visible, .vb-sectionTitle:focus:focus-visible, .vb-pageTitle:focus:focus-visible {\n box-shadow: 0 0 0 2px #dce8ff;\n}\n\n.vb-pageTitle {\n color: #323232;\n font: bold 1.5rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n@media (max-width: 48rem) {\n .vb-pageTitle--responsive {\n font: bold 1rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n }\n}\n\n.vb-sectionTitle {\n color: #323232;\n font: bold 1rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n@media (max-width: 48rem) {\n .vb-sectionTitle--responsive {\n font: bold 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n }\n}\n\n.vb-subSectionTitle {\n color: #6e6b6b;\n font: bold 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n@media (max-width: 48rem) {\n .vb-subSectionTitle--responsive {\n font: bold 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n }\n}\n\n/** @define note */\n.vb-note {\n display: block;\n color: #6e6b6b;\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n\n/** @define paragraph */\n.vb-paragraph {\n display: block;\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #323232;\n}\n\n.vb-text {\n color: #323232;\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n.vb-text--weightBold {\n font-weight: bold;\n}\n.vb-text--size0750 {\n font-size: 0.75rem;\n}\n.vb-text--size1500 {\n font-size: 1.5rem;\n}\n.vb-text--size1000 {\n font-size: 1rem;\n}\n.vb-text--colorWhite {\n color: #fff;\n}\n.vb-text--colorGY7 {\n color: #323232;\n}\n.vb-text--colorS9 {\n color: #6e6b6b;\n}\n.vb-text--colorP7 {\n color: #285ac8;\n}\n.vb-text--colorP5 {\n color: #2864f0;\n}\n.vb-text--colorRE5 {\n color: #dc1e32;\n}\n.vb-text--colorYE10 {\n color: #825a0f;\n}\n.vb-text--ellipsis {\n display: inline-block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.vb-pageTitle--inline,\n.vb-sectionTitle--inline,\n.vb-subSectionTitle--inline,\n.vb-paragraph--inline,\n.vb-note--inline {\n display: inline-block;\n}\n.vb-pageTitle--alignLeft,\n.vb-sectionTitle--alignLeft,\n.vb-subSectionTitle--alignLeft,\n.vb-paragraph--alignLeft,\n.vb-note--alignLeft {\n text-align: left;\n}\n.vb-pageTitle--alignRight,\n.vb-sectionTitle--alignRight,\n.vb-subSectionTitle--alignRight,\n.vb-paragraph--alignRight,\n.vb-note--alignRight {\n text-align: right;\n}\n.vb-pageTitle--alignCenter,\n.vb-sectionTitle--alignCenter,\n.vb-subSectionTitle--alignCenter,\n.vb-paragraph--alignCenter,\n.vb-note--alignCenter {\n text-align: center;\n}\n\n.vb-paragraph--ellipsis,\n.vb-note--ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n/** @define materialIcon */\n.vb-materialIcon {\n width: 1.5rem;\n height: 1.5rem;\n color: #323232;\n}\n.vb-materialIcon--small {\n width: 1rem;\n height: 1rem;\n}\n.vb-materialIcon--pointerEventsNone {\n pointer-events: none;\n}\n.vb-materialIcon--colorInherit {\n color: inherit;\n}\n.vb-materialIcon--colorWhite {\n color: #fff;\n}\n.vb-materialIcon--colorP1 {\n color: #ebf3ff;\n}\n.vb-materialIcon--colorP2 {\n color: #dce8ff;\n}\n.vb-materialIcon--colorP3 {\n color: #aac8ff;\n}\n.vb-materialIcon--colorP4 {\n color: #73a5ff;\n}\n.vb-materialIcon--colorP5 {\n color: #2864f0;\n}\n.vb-materialIcon--colorP6 {\n color: #3264dc;\n}\n.vb-materialIcon--colorP7 {\n color: #285ac8;\n}\n.vb-materialIcon--colorP8 {\n color: #1e46aa;\n}\n.vb-materialIcon--colorP9 {\n color: #23418c;\n}\n.vb-materialIcon--colorP10 {\n color: #143278;\n}\n.vb-materialIcon--colorS1 {\n color: #f7f5f5;\n}\n.vb-materialIcon--colorS2 {\n color: #f0eded;\n}\n.vb-materialIcon--colorS3 {\n color: #e9e7e7;\n}\n.vb-materialIcon--colorS4 {\n color: #e1dcdc;\n}\n.vb-materialIcon--colorS5 {\n color: #d7d2d2;\n}\n.vb-materialIcon--colorS6 {\n color: #bebaba;\n}\n.vb-materialIcon--colorS7 {\n color: #aaa7a7;\n}\n.vb-materialIcon--colorS8 {\n color: #8c8989;\n}\n.vb-materialIcon--colorS9 {\n color: #6e6b6b;\n}\n.vb-materialIcon--colorS10 {\n color: #464343;\n}\n.vb-materialIcon--colorRE2 {\n color: #fad2d7;\n}\n.vb-materialIcon--colorRE4 {\n color: #f07882;\n}\n.vb-materialIcon--colorRE5 {\n color: #dc1e32;\n}\n.vb-materialIcon--colorRE7 {\n color: #a51428;\n}\n.vb-materialIcon--colorRE10 {\n color: #6e0f19;\n}\n.vb-materialIcon--colorOR2 {\n color: #ffe1d2;\n}\n.vb-materialIcon--colorOR4 {\n color: #ffaa78;\n}\n.vb-materialIcon--colorOR5 {\n color: #fa6414;\n}\n.vb-materialIcon--colorOR7 {\n color: #be4b0f;\n}\n.vb-materialIcon--colorOR10 {\n color: #7d320a;\n}\n.vb-materialIcon--colorYE2 {\n color: #fff0d2;\n}\n.vb-materialIcon--colorYE4 {\n color: #ffd278;\n}\n.vb-materialIcon--colorYE5 {\n color: #ffb91e;\n}\n.vb-materialIcon--colorYE7 {\n color: #be8c14;\n}\n.vb-materialIcon--colorYE10 {\n color: #825a0f;\n}\n.vb-materialIcon--colorYG2 {\n color: #e6f0d2;\n}\n.vb-materialIcon--colorYG4 {\n color: #b4dc7d;\n}\n.vb-materialIcon--colorYG5 {\n color: #82c31e;\n}\n.vb-materialIcon--colorYG7 {\n color: #50961e;\n}\n.vb-materialIcon--colorYG10 {\n color: #3c5f14;\n}\n.vb-materialIcon--colorGR2 {\n color: #cdebd7;\n}\n.vb-materialIcon--colorGR4 {\n color: #64be8c;\n}\n.vb-materialIcon--colorGR5 {\n color: #00963c;\n}\n.vb-materialIcon--colorGR7 {\n color: #006e2d;\n}\n.vb-materialIcon--colorGR10 {\n color: #004b1e;\n}\n.vb-materialIcon--colorBG2 {\n color: #cdf0f0;\n}\n.vb-materialIcon--colorBG4 {\n color: #64d2d2;\n}\n.vb-materialIcon--colorBG5 {\n color: #00b9b9;\n}\n.vb-materialIcon--colorBG7 {\n color: #008c8c;\n}\n.vb-materialIcon--colorBG10 {\n color: #146464;\n}\n.vb-materialIcon--colorPU2 {\n color: #e6d7fa;\n}\n.vb-materialIcon--colorPU4 {\n color: #b482f0;\n}\n.vb-materialIcon--colorPU5 {\n color: #733ce6;\n}\n.vb-materialIcon--colorPU7 {\n color: #5a2daa;\n}\n.vb-materialIcon--colorPU10 {\n color: #3c1e73;\n}\n.vb-materialIcon--colorGY1 {\n color: #fbfbfb;\n}\n.vb-materialIcon--colorGY2 {\n color: #dcdcdc;\n}\n.vb-materialIcon--colorGY4 {\n color: #a0a0a0;\n}\n.vb-materialIcon--colorGY5 {\n color: #5a5a5a;\n}\n.vb-materialIcon--colorGY7 {\n color: #323232;\n}\n.vb-materialIcon--colorGY10 {\n color: #1e1e1e;\n}\n\n.vb-statusSelector, .vb-statusIcon {\n display: inline-block;\n min-width: 2.375rem;\n box-sizing: border-box;\n padding: 0.2rem 0.5rem;\n font-size: 0.6875rem;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n vertical-align: middle;\n border-radius: 0.25rem;\n}\n\n.vb-statusSelector--typeRequired, .vb-statusSelector--typeProgress, .vb-statusSelector--typeSuccess, .vb-statusSelector--typeDone, .vb-statusIcon--required, .vb-statusIcon--progress, .vb-statusIcon--success, .vb-statusIcon--done {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n border: 1px solid #8c8989;\n background-color: #fff;\n}\n\n.vb-statusSelector--typeError, .vb-statusSelector--typeWarning, .vb-statusSelector--typeEmphasis, .vb-statusSelector--typeDisabled, .vb-statusIcon--error, .vb-statusIcon--warning, .vb-statusIcon--emphasis, .vb-statusIcon--disabled {\n color: #fff;\n}\n\n/** @define statusIcon */\n.vb-statusIcon--done {\n border-color: #8c8989;\n color: #6e6b6b;\n}\n.vb-statusIcon--success {\n border-color: #285ac8;\n color: #285ac8;\n}\n.vb-statusIcon--progress {\n border-color: #be8c14;\n color: #825a0f;\n}\n.vb-statusIcon--required {\n border-color: #dc1e32;\n color: #dc1e32;\n}\n.vb-statusIcon--disabled {\n background-color: #6e6b6b;\n}\n.vb-statusIcon--emphasis {\n background-color: #285ac8;\n}\n.vb-statusIcon--warning {\n background-color: #825a0f;\n}\n.vb-statusIcon--error {\n background-color: #dc1e32;\n}\n\n.vb-avatar {\n width: 2rem;\n height: 2rem;\n font-size: 2rem;\n line-height: 2rem;\n display: inline-block;\n box-sizing: border-box;\n}\n.vb-avatar__background {\n fill: #f0eded;\n}\n.vb-avatar__placeholderIcon {\n display: block;\n width: 100%;\n height: 100%;\n fill: #8c8989;\n}\n.vb-avatar--small {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 1.5rem;\n line-height: 1.5rem;\n}\n.vb-avatar--large {\n width: 3rem;\n height: 3rem;\n font-size: 3rem;\n line-height: 3rem;\n}\n.vb-avatar--xLarge {\n width: 6rem;\n height: 6rem;\n font-size: 6rem;\n line-height: 6rem;\n}\n\n.vb-requiredIcon {\n display: inline-block;\n vertical-align: middle;\n line-height: 1;\n box-sizing: border-box;\n padding-bottom: 0.125em;\n}\n.vb-requiredIcon__content {\n background-color: #fad2d7;\n color: #a51428;\n font-size: 0.625rem;\n display: block;\n border-radius: 99rem;\n padding: 0.125rem 0.25rem;\n line-height: 1;\n}\n\n.vb-storeBadge, .vb-illust {\n margin: 0;\n padding: 0;\n display: inline-block;\n line-height: 0;\n}\n\n/** @define logo */\n.vb-logo {\n margin: 0;\n padding: 0;\n fill: #4575b4;\n display: inline-block;\n line-height: 0;\n}\n.vb-logo .vb-logo__svg {\n height: 3rem;\n text-indent: 0;\n}\n.vb-logo--minpaku .vb-logo__svg {\n width: 10.9375rem;\n}\n.vb-logo--seal .vb-logo__svg {\n width: 10.9375rem;\n}\n.vb-logo--sfa .vb-logo__svg {\n width: 10.75rem;\n}\n.vb-logo--cryptocurrency .vb-logo__svg {\n width: 9.8125rem;\n}\n\n/** @define illust */\n.vb-illust .vb-illust__svg {\n height: 12rem;\n}\n.vb-illust .vb-illust__background {\n fill: #fff;\n}\n.vb-illust .vb-illust__frame {\n fill: #e9e7e7;\n}\n.vb-illust .vb-illust__border {\n fill: #f0eded;\n}\n.vb-illust--fileUpload .vb-illust__svg, .vb-illust--imageUpload .vb-illust__svg, .vb-illust--csvUpload .vb-illust__svg, .vb-illust--cloudUpload .vb-illust__svg, .vb-illust--cloudSkeleton .vb-illust__svg {\n height: 8rem;\n width: 8rem;\n}\n\n.vb-swallow__svg {\n display: block;\n margin: auto;\n}\n\n/** @define storeBadge */\n.vb-storeBadge .vb-storeBadge__svg {\n height: 2.5rem;\n}\n.vb-storeBadge--googlePlayStore .vb-storeBadge__svg {\n width: 8.4375rem;\n}\n.vb-storeBadge--appStore .vb-storeBadge__svg {\n width: 6.8125rem;\n}\n\n.vb-tab {\n display: inline-block;\n min-width: 7.25em;\n height: 2em;\n padding: 0 0.75rem;\n margin: 0;\n background-color: #fff;\n border: none;\n box-sizing: border-box;\n font-size: 1rem;\n font-weight: bold;\n text-align: center;\n line-height: 2em;\n vertical-align: bottom;\n position: relative;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n color: #6e6b6b;\n}\n.vb-tab::after {\n content: \"\";\n display: block;\n height: 1px;\n background-color: #e9e7e7;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1px;\n transition-duration: 0.2s;\n transition-property: background-color;\n}\n.vb-tab:focus {\n color: #323232;\n z-index: 1;\n}\n.vb-tab:hover:not(.vb-tab--current) {\n cursor: pointer;\n background-color: #f2f5fc;\n}\n.vb-tab:hover:not(.vb-tab--current)::after {\n background-color: #73a5ff;\n}\n.vb-tab--current {\n color: #285ac8;\n cursor: default;\n color: #2864f0;\n}\n.vb-tab--current::after {\n height: 2px;\n background-color: #285ac8;\n background-color: #2864f0;\n}\n.vb-tab--small {\n font-size: 0.75rem;\n}\n.vb-tab__block {\n display: inline-block;\n position: relative;\n}\n.vb-tab__notificationDot {\n display: inline-block;\n width: 0.5rem;\n height: 0.5rem;\n position: absolute;\n right: 0;\n top: 0;\n background-color: #dc1e32;\n border-radius: 99rem;\n z-index: 1;\n}\n\n/** @define segmentControl */\n.vb-segmentControlButton {\n display: inline-block;\n height: 2.25rem;\n line-height: calc(2.25rem - 2px);\n padding: 0 1rem;\n border: 1px solid #285ac8;\n min-width: 3rem;\n border-right-width: 0;\n box-sizing: border-box;\n font-size: 0.875rem;\n font-weight: bold;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n background-color: #fff;\n color: #285ac8;\n cursor: pointer;\n text-decoration: none;\n}\n.vb-segmentControlButton:hover {\n background-color: #f7f5f5;\n text-decoration: none;\n}\n.vb-segmentControlButton:first-child {\n border-top-left-radius: 0.4em;\n border-bottom-left-radius: 0.4em;\n}\n.vb-segmentControlButton:last-child {\n border-top-right-radius: 0.4em;\n border-bottom-right-radius: 0.4em;\n border-right-width: 1px;\n}\n.vb-segmentControlButton--large {\n font-size: 1rem;\n height: 3rem;\n line-height: calc(3rem - 2px);\n}\n.vb-segmentControlButton--small {\n font-size: 0.75rem;\n height: 1.5rem;\n line-height: calc(1.5rem - 2px);\n}\n.vb-segmentControlButton--icon {\n padding-left: 2.75em;\n position: relative;\n text-align: left;\n}\n.vb-segmentControlButton__icon {\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.625em;\n}\n.vb-segmentControlButton--current {\n background-color: #285ac8;\n color: #fff;\n cursor: default;\n}\n.vb-segmentControlButton--current:hover {\n background-color: #285ac8;\n}\n\n.vb-stepNumber {\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 3rem;\n height: 3rem;\n border-radius: 99rem;\n position: relative;\n background-color: #fff;\n border: 1px solid #8c8989;\n color: #6e6b6b;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n font-size: 1.5em;\n}\n.vb-stepNumber__numberCheck {\n width: 1rem;\n height: 1rem;\n margin: 0;\n border-radius: 99rem;\n background-color: #8c8989;\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n.vb-stepNumber__numberCheckSvg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n fill: #fff;\n}\n.vb-stepNumber--current {\n background-color: #fff;\n border: 1px solid #2864f0;\n color: #2864f0;\n}\n.vb-stepNumber--done {\n background-color: #fff;\n border: 1px solid #8c8989;\n color: #6e6b6b;\n}\n.vb-stepNumber--disabled {\n background-color: #fff;\n border: 1px dashed #8c8989;\n color: #6e6b6b;\n}\n.vb-stepNumber--small {\n font-size: 1rem;\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.vb-stepBlock {\n display: inline-block;\n width: 4rem;\n text-align: center;\n}\n.vb-stepBlock__title {\n display: block;\n margin-top: 0.5rem;\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #6e6b6b;\n}\n.vb-stepBlock--current .vb-stepBlock__title {\n color: #2864f0;\n}\n.vb-stepBlock--small {\n font-size: 0.75rem;\n}\n\n.vb-stepBorder {\n display: inline-block;\n width: 3em;\n height: 4px;\n background-color: #e9e7e7;\n background-color: #e9e7e7;\n}\n.vb-stepBorder--done {\n background-color: #285ac8;\n background-color: #6e6b6b;\n}\n.vb-stepBorder--separator {\n margin: 1.5em -0.5em 0;\n}\n\n.vb-tableListRow, .vb-tableListHead {\n border: none;\n border-collapse: collapse;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n height: 2.5rem;\n}\n\n.vb-descriptionListCell, .vb-descriptionListHeadCell, .vb-treeFoldingButtonCell, .vb-checkBoxCell, .vb-tableListCell,\n.vb-BorderTableListCell {\n border: none;\n border-spacing: 0;\n border-collapse: collapse;\n font-size: 0.875rem;\n text-align: left;\n padding: 0.25rem 0.5rem;\n line-height: 1;\n vertical-align: middle;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n word-break: break-all;\n}\n.vb-descriptionListCell:first-child, .vb-descriptionListHeadCell:first-child, .vb-treeFoldingButtonCell:first-child, .vb-checkBoxCell:first-child, .vb-tableListCell:first-child,\n.vb-BorderTableListCell:first-child {\n padding-left: 1.5rem;\n}\n.vb-descriptionListCell:last-child, .vb-descriptionListHeadCell:last-child, .vb-treeFoldingButtonCell:last-child, .vb-checkBoxCell:last-child, .vb-tableListCell:last-child,\n.vb-BorderTableListCell:last-child {\n padding-right: 1.5rem;\n}\n\n.vb-BorderTableListCell {\n border-right: 1px solid #e9e7e7;\n border-bottom: 1px solid #e9e7e7;\n}\n.vb-BorderTableListCell:last-child {\n border-right: none;\n}\n\n.vb-tableListRow.vb-tableListRow--clickable:hover, .vb-tableListRow.vb-tableListRow--clickable:nth-child(2n):hover, .vb-BorderTableListCell--clickable:hover {\n background-color: #f7f5f5;\n}\n\n.vb-tableListCell,\n.vb-BorderTableListCell {\n position: relative;\n}\n.vb-tableListCell--small,\n.vb-BorderTableListCell--small {\n font-size: 0.75rem;\n}\n.vb-tableListCell--alignCenter,\n.vb-BorderTableListCell--alignCenter {\n text-align: center;\n}\n.vb-tableListCell--alignRight,\n.vb-BorderTableListCell--alignRight {\n text-align: right;\n}\n.vb-tableListCell--alignBottom,\n.vb-BorderTableListCell--alignBottom {\n vertical-align: bottom;\n}\n.vb-tableListCell--alignTop,\n.vb-BorderTableListCell--alignTop {\n vertical-align: top;\n}\n.vb-tableListCell--breakWord,\n.vb-BorderTableListCell--breakWord {\n word-break: normal;\n overflow-wrap: break-word;\n}\n\n.vb-tableListCell {\n border-bottom: 1px solid #e9e7e7;\n}\n.vb-tableListCell__link {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.vb-tableListCell__indentContainer {\n display: flex;\n flex-direction: row;\n}\n.vb-tableListCell__indent {\n width: 1rem;\n flex-shrink: 0;\n}\n.vb-tableListCell__indentedContent {\n flex-grow: 1;\n min-width: 0;\n}\n.vb-tableListCell__indentedContent--alignCenter {\n text-align: center;\n}\n.vb-tableListCell__indentedContent--alignRight {\n text-align: right;\n}\n.vb-tableListCell__text {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.vb-tableListCell__text--withLink {\n pointer-events: none;\n}\n.vb-tableListCell__text--withLink a[href],\n.vb-tableListCell__text--withLink button,\n.vb-tableListCell__text--withLink label,\n.vb-tableListCell__text--withLink input,\n.vb-tableListCell__text--withLink select,\n.vb-tableListCell__text--withLink textarea,\n.vb-tableListCell__text--withLink [role=button] {\n pointer-events: auto;\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n .vb-tableListCell__link {\n top: -0.25rem;\n left: -0.5rem;\n right: -0.5rem;\n bottom: -0.25rem;\n }\n\n .vb-tableListCell:first-child .vb-tableListCell__link {\n left: -1.5rem;\n }\n\n .vb-tableListCell:last-child .vb-tableListCell__link {\n right: -1.5rem;\n }\n\n .vb-tableListCell__indentContainerWrapper {\n display: table;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .vb-tableListCell__indentContainer {\n display: table-row;\n }\n\n .vb-tableListCell__indent {\n display: table-cell;\n }\n\n .vb-tableListCell__indentedContent {\n display: table-cell;\n vertical-align: middle;\n }\n\n .vb-tableListCell--alignTop .vb-tableListCell__indentedContent {\n vertical-align: top;\n }\n\n .vb-tableListCell--alignBottom .vb-tableListCell__indentedContent {\n vertical-align: bottom;\n }\n}\n\n.vb-BorderTableListCell--clickable {\n cursor: pointer;\n}\n.vb-BorderTableListCell__clickElement::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.vb-BorderTableListCell__status::after {\n position: absolute;\n content: \"\";\n top: 0;\n right: 0;\n border: 0 solid transparent;\n border-bottom-width: 1rem;\n border-right-width: 1rem;\n}\n.vb-BorderTableListCell__status--alert::after {\n border-right-color: #dc1e32;\n}\n.vb-BorderTableListCell__status--notice::after {\n border-right-color: #be8c14;\n}\n.vb-BorderTableListCell__status--success::after {\n border-right-color: #73a5ff;\n}\n.vb-BorderTableListCell--noWrap {\n white-space: nowrap;\n}\n.vb-BorderTableListCell--rowHeader {\n background-color: #f7f5f5;\n font-weight: normal;\n}\n.vb-BorderTableListCell--fixedRowHeader {\n position: sticky;\n left: 0;\n z-index: 1;\n border-right: none;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft1 {\n left: 1rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft2 {\n left: 2rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft3 {\n left: 3rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft4 {\n left: 4rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft5 {\n left: 5rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft6 {\n left: 6rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft7 {\n left: 7rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft8 {\n left: 8rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft9 {\n left: 9rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft10 {\n left: 10rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft11 {\n left: 11rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft12 {\n left: 12rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft13 {\n left: 13rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft14 {\n left: 14rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft15 {\n left: 15rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft16 {\n left: 16rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft17 {\n left: 17rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft18 {\n left: 18rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft19 {\n left: 19rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft20 {\n left: 20rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft21 {\n left: 21rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft22 {\n left: 22rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft23 {\n left: 23rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft24 {\n left: 24rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft25 {\n left: 25rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft26 {\n left: 26rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft27 {\n left: 27rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft28 {\n left: 28rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft29 {\n left: 29rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft30 {\n left: 30rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft31 {\n left: 31rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft32 {\n left: 32rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft33 {\n left: 33rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft34 {\n left: 34rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft35 {\n left: 35rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft36 {\n left: 36rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft37 {\n left: 37rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft38 {\n left: 38rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft39 {\n left: 39rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft40 {\n left: 40rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft41 {\n left: 41rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft42 {\n left: 42rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft43 {\n left: 43rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft44 {\n left: 44rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft45 {\n left: 45rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft46 {\n left: 46rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft47 {\n left: 47rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft48 {\n left: 48rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft49 {\n left: 49rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft50 {\n left: 50rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft51 {\n left: 51rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft52 {\n left: 52rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft53 {\n left: 53rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft54 {\n left: 54rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft55 {\n left: 55rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft56 {\n left: 56rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft57 {\n left: 57rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft58 {\n left: 58rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft59 {\n left: 59rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft60 {\n left: 60rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft61 {\n left: 61rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft62 {\n left: 62rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft63 {\n left: 63rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft64 {\n left: 64rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft65 {\n left: 65rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft66 {\n left: 66rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft67 {\n left: 67rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft68 {\n left: 68rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft69 {\n left: 69rem;\n}\n.vb-BorderTableListCell--fixedRowHeaderLeft70 {\n left: 70rem;\n}\n\n.vb-checkBoxCell {\n position: relative;\n border-bottom: 1px solid #e9e7e7;\n box-sizing: border-box;\n width: 2rem;\n text-align: center;\n}\n.vb-checkBoxCell + .vb-BorderTableListCell {\n border-left: 1px solid #e9e7e7;\n}\n.vb-checkBoxCell__label:not(.vb-checkBoxCell__label--disabled) {\n cursor: pointer;\n}\n.vb-checkBoxCell__label--disabled ::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n cursor: not-allowed;\n}\n.vb-checkBoxCell__label::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n\n.vb-treeFoldingButtonCell {\n position: relative;\n border-bottom: 1px solid #e9e7e7;\n box-sizing: border-box;\n width: 2rem;\n text-align: center;\n}\n.vb-treeFoldingButtonCell__button {\n cursor: pointer;\n color: #285ac8;\n display: inline;\n border: 0;\n background: none;\n padding: 0;\n}\n.vb-treeFoldingButtonCell__button::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.vb-treeFoldingButtonCell__button:hover {\n color: #1e4395;\n}\n.vb-treeFoldingButtonCell__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.vb-descriptionListHeadCell {\n width: 1px;\n white-space: nowrap;\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n vertical-align: middle;\n}\n.vb-descriptionListHeadCell--minWidth1 {\n min-width: 1rem;\n}\n.vb-descriptionListHeadCell--minWidth2 {\n min-width: 2rem;\n}\n.vb-descriptionListHeadCell--minWidth3 {\n min-width: 3rem;\n}\n.vb-descriptionListHeadCell--minWidth4 {\n min-width: 4rem;\n}\n.vb-descriptionListHeadCell--minWidth5 {\n min-width: 5rem;\n}\n.vb-descriptionListHeadCell--minWidth6 {\n min-width: 6rem;\n}\n.vb-descriptionListHeadCell--minWidth7 {\n min-width: 7rem;\n}\n.vb-descriptionListHeadCell--minWidth8 {\n min-width: 8rem;\n}\n.vb-descriptionListHeadCell--minWidth9 {\n min-width: 9rem;\n}\n.vb-descriptionListHeadCell--minWidth10 {\n min-width: 10rem;\n}\n.vb-descriptionListHeadCell--minWidth11 {\n min-width: 11rem;\n}\n.vb-descriptionListHeadCell--minWidth12 {\n min-width: 12rem;\n}\n.vb-descriptionListHeadCell--minWidth13 {\n min-width: 13rem;\n}\n.vb-descriptionListHeadCell--minWidth14 {\n min-width: 14rem;\n}\n.vb-descriptionListHeadCell--minWidth15 {\n min-width: 15rem;\n}\n.vb-descriptionListHeadCell--minWidth16 {\n min-width: 16rem;\n}\n.vb-descriptionListHeadCell--minWidth17 {\n min-width: 17rem;\n}\n.vb-descriptionListHeadCell--minWidth18 {\n min-width: 18rem;\n}\n.vb-descriptionListHeadCell--minWidth19 {\n min-width: 19rem;\n}\n.vb-descriptionListHeadCell--minWidth20 {\n min-width: 20rem;\n}\n.vb-descriptionListHeadCell--minWidth21 {\n min-width: 21rem;\n}\n.vb-descriptionListHeadCell--minWidth22 {\n min-width: 22rem;\n}\n.vb-descriptionListHeadCell--minWidth23 {\n min-width: 23rem;\n}\n.vb-descriptionListHeadCell--minWidth24 {\n min-width: 24rem;\n}\n.vb-descriptionListHeadCell--minWidth25 {\n min-width: 25rem;\n}\n.vb-descriptionListHeadCell--minWidth26 {\n min-width: 26rem;\n}\n.vb-descriptionListHeadCell--minWidth27 {\n min-width: 27rem;\n}\n.vb-descriptionListHeadCell--minWidth28 {\n min-width: 28rem;\n}\n.vb-descriptionListHeadCell--minWidth29 {\n min-width: 29rem;\n}\n.vb-descriptionListHeadCell--minWidth30 {\n min-width: 30rem;\n}\n.vb-descriptionListHeadCell--minWidth31 {\n min-width: 31rem;\n}\n.vb-descriptionListHeadCell--minWidth32 {\n min-width: 32rem;\n}\n.vb-descriptionListHeadCell--minWidth33 {\n min-width: 33rem;\n}\n.vb-descriptionListHeadCell--minWidth34 {\n min-width: 34rem;\n}\n.vb-descriptionListHeadCell--minWidth35 {\n min-width: 35rem;\n}\n.vb-descriptionListHeadCell--minWidth36 {\n min-width: 36rem;\n}\n.vb-descriptionListHeadCell--minWidth37 {\n min-width: 37rem;\n}\n.vb-descriptionListHeadCell--minWidth38 {\n min-width: 38rem;\n}\n.vb-descriptionListHeadCell--minWidth39 {\n min-width: 39rem;\n}\n.vb-descriptionListHeadCell--minWidth40 {\n min-width: 40rem;\n}\n.vb-descriptionListHeadCell--minWidth41 {\n min-width: 41rem;\n}\n.vb-descriptionListHeadCell--minWidth42 {\n min-width: 42rem;\n}\n.vb-descriptionListHeadCell--minWidth43 {\n min-width: 43rem;\n}\n.vb-descriptionListHeadCell--minWidth44 {\n min-width: 44rem;\n}\n.vb-descriptionListHeadCell--minWidth45 {\n min-width: 45rem;\n}\n.vb-descriptionListHeadCell--minWidth46 {\n min-width: 46rem;\n}\n.vb-descriptionListHeadCell--minWidth47 {\n min-width: 47rem;\n}\n.vb-descriptionListHeadCell--minWidth48 {\n min-width: 48rem;\n}\n.vb-descriptionListHeadCell--minWidth49 {\n min-width: 49rem;\n}\n.vb-descriptionListHeadCell--minWidth50 {\n min-width: 50rem;\n}\n.vb-descriptionListHeadCell--minWidth51 {\n min-width: 51rem;\n}\n.vb-descriptionListHeadCell--minWidth52 {\n min-width: 52rem;\n}\n.vb-descriptionListHeadCell--minWidth53 {\n min-width: 53rem;\n}\n.vb-descriptionListHeadCell--minWidth54 {\n min-width: 54rem;\n}\n.vb-descriptionListHeadCell--minWidth55 {\n min-width: 55rem;\n}\n.vb-descriptionListHeadCell--minWidth56 {\n min-width: 56rem;\n}\n.vb-descriptionListHeadCell--minWidth57 {\n min-width: 57rem;\n}\n.vb-descriptionListHeadCell--minWidth58 {\n min-width: 58rem;\n}\n.vb-descriptionListHeadCell--minWidth59 {\n min-width: 59rem;\n}\n.vb-descriptionListHeadCell--minWidth60 {\n min-width: 60rem;\n}\n.vb-descriptionListHeadCell--minWidth61 {\n min-width: 61rem;\n}\n.vb-descriptionListHeadCell--minWidth62 {\n min-width: 62rem;\n}\n.vb-descriptionListHeadCell--minWidth63 {\n min-width: 63rem;\n}\n.vb-descriptionListHeadCell--minWidth64 {\n min-width: 64rem;\n}\n.vb-descriptionListHeadCell--minWidth65 {\n min-width: 65rem;\n}\n.vb-descriptionListHeadCell--minWidth66 {\n min-width: 66rem;\n}\n.vb-descriptionListHeadCell--minWidth67 {\n min-width: 67rem;\n}\n.vb-descriptionListHeadCell--minWidth68 {\n min-width: 68rem;\n}\n.vb-descriptionListHeadCell--minWidth69 {\n min-width: 69rem;\n}\n.vb-descriptionListHeadCell--minWidth70 {\n min-width: 70rem;\n}\n@media (max-width: 48rem) {\n .vb-descriptionListHeadCell--responsive {\n display: block;\n width: auto;\n }\n .vb-descriptionListHeadCell--responsive, .vb-descriptionListHeadCell--responsive:first-child, .vb-descriptionListHeadCell--responsive:last-child {\n padding: 1rem 1rem 0.25rem;\n }\n}\n\n.vb-descriptionListCell {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n@media (max-width: 48rem) {\n .vb-descriptionListCell--responsive {\n display: block;\n width: auto;\n }\n .vb-descriptionListCell--responsive, .vb-descriptionListCell--responsive:first-child, .vb-descriptionListCell--responsive:last-child {\n padding: 0.25rem 1rem 1rem;\n }\n}\n\n.vb-tableListHeadCell {\n border: none;\n border-spacing: 0;\n border-collapse: collapse;\n box-sizing: border-box;\n padding: 0.25rem 0.5rem;\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n height: 1.875rem;\n text-align: left;\n line-height: 1;\n vertical-align: middle;\n border-bottom: 1px solid #e9e7e7;\n position: relative;\n transition-duration: 0.3s;\n transition-property: background-color;\n}\n.vb-tableListHeadCell:first-child {\n padding-left: 1.5rem;\n}\n.vb-tableListHeadCell:last-child {\n padding-right: 1.5rem;\n}\n.vb-tableListHeadCell--alignCenter {\n text-align: center;\n}\n.vb-tableListHeadCell--alignRight {\n text-align: right;\n}\n.vb-tableListHeadCell--clickable:hover {\n background: #f0eded;\n}\n.vb-tableListHeadCell--fixedRowHeader {\n position: sticky;\n left: 0;\n z-index: 1;\n background-color: #f7f5f5;\n}\n.vb-tableListHeadCell--width1 {\n width: 1rem;\n}\n.vb-tableListHeadCell--minWidth1 {\n min-width: 1rem;\n}\n.vb-tableListHeadCell--maxWidth1 {\n max-width: 1rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft1 {\n left: 1rem;\n}\n.vb-tableListHeadCell--width2 {\n width: 2rem;\n}\n.vb-tableListHeadCell--minWidth2 {\n min-width: 2rem;\n}\n.vb-tableListHeadCell--maxWidth2 {\n max-width: 2rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft2 {\n left: 2rem;\n}\n.vb-tableListHeadCell--width3 {\n width: 3rem;\n}\n.vb-tableListHeadCell--minWidth3 {\n min-width: 3rem;\n}\n.vb-tableListHeadCell--maxWidth3 {\n max-width: 3rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft3 {\n left: 3rem;\n}\n.vb-tableListHeadCell--width4 {\n width: 4rem;\n}\n.vb-tableListHeadCell--minWidth4 {\n min-width: 4rem;\n}\n.vb-tableListHeadCell--maxWidth4 {\n max-width: 4rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft4 {\n left: 4rem;\n}\n.vb-tableListHeadCell--width5 {\n width: 5rem;\n}\n.vb-tableListHeadCell--minWidth5 {\n min-width: 5rem;\n}\n.vb-tableListHeadCell--maxWidth5 {\n max-width: 5rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft5 {\n left: 5rem;\n}\n.vb-tableListHeadCell--width6 {\n width: 6rem;\n}\n.vb-tableListHeadCell--minWidth6 {\n min-width: 6rem;\n}\n.vb-tableListHeadCell--maxWidth6 {\n max-width: 6rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft6 {\n left: 6rem;\n}\n.vb-tableListHeadCell--width7 {\n width: 7rem;\n}\n.vb-tableListHeadCell--minWidth7 {\n min-width: 7rem;\n}\n.vb-tableListHeadCell--maxWidth7 {\n max-width: 7rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft7 {\n left: 7rem;\n}\n.vb-tableListHeadCell--width8 {\n width: 8rem;\n}\n.vb-tableListHeadCell--minWidth8 {\n min-width: 8rem;\n}\n.vb-tableListHeadCell--maxWidth8 {\n max-width: 8rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft8 {\n left: 8rem;\n}\n.vb-tableListHeadCell--width9 {\n width: 9rem;\n}\n.vb-tableListHeadCell--minWidth9 {\n min-width: 9rem;\n}\n.vb-tableListHeadCell--maxWidth9 {\n max-width: 9rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft9 {\n left: 9rem;\n}\n.vb-tableListHeadCell--width10 {\n width: 10rem;\n}\n.vb-tableListHeadCell--minWidth10 {\n min-width: 10rem;\n}\n.vb-tableListHeadCell--maxWidth10 {\n max-width: 10rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft10 {\n left: 10rem;\n}\n.vb-tableListHeadCell--width11 {\n width: 11rem;\n}\n.vb-tableListHeadCell--minWidth11 {\n min-width: 11rem;\n}\n.vb-tableListHeadCell--maxWidth11 {\n max-width: 11rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft11 {\n left: 11rem;\n}\n.vb-tableListHeadCell--width12 {\n width: 12rem;\n}\n.vb-tableListHeadCell--minWidth12 {\n min-width: 12rem;\n}\n.vb-tableListHeadCell--maxWidth12 {\n max-width: 12rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft12 {\n left: 12rem;\n}\n.vb-tableListHeadCell--width13 {\n width: 13rem;\n}\n.vb-tableListHeadCell--minWidth13 {\n min-width: 13rem;\n}\n.vb-tableListHeadCell--maxWidth13 {\n max-width: 13rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft13 {\n left: 13rem;\n}\n.vb-tableListHeadCell--width14 {\n width: 14rem;\n}\n.vb-tableListHeadCell--minWidth14 {\n min-width: 14rem;\n}\n.vb-tableListHeadCell--maxWidth14 {\n max-width: 14rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft14 {\n left: 14rem;\n}\n.vb-tableListHeadCell--width15 {\n width: 15rem;\n}\n.vb-tableListHeadCell--minWidth15 {\n min-width: 15rem;\n}\n.vb-tableListHeadCell--maxWidth15 {\n max-width: 15rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft15 {\n left: 15rem;\n}\n.vb-tableListHeadCell--width16 {\n width: 16rem;\n}\n.vb-tableListHeadCell--minWidth16 {\n min-width: 16rem;\n}\n.vb-tableListHeadCell--maxWidth16 {\n max-width: 16rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft16 {\n left: 16rem;\n}\n.vb-tableListHeadCell--width17 {\n width: 17rem;\n}\n.vb-tableListHeadCell--minWidth17 {\n min-width: 17rem;\n}\n.vb-tableListHeadCell--maxWidth17 {\n max-width: 17rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft17 {\n left: 17rem;\n}\n.vb-tableListHeadCell--width18 {\n width: 18rem;\n}\n.vb-tableListHeadCell--minWidth18 {\n min-width: 18rem;\n}\n.vb-tableListHeadCell--maxWidth18 {\n max-width: 18rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft18 {\n left: 18rem;\n}\n.vb-tableListHeadCell--width19 {\n width: 19rem;\n}\n.vb-tableListHeadCell--minWidth19 {\n min-width: 19rem;\n}\n.vb-tableListHeadCell--maxWidth19 {\n max-width: 19rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft19 {\n left: 19rem;\n}\n.vb-tableListHeadCell--width20 {\n width: 20rem;\n}\n.vb-tableListHeadCell--minWidth20 {\n min-width: 20rem;\n}\n.vb-tableListHeadCell--maxWidth20 {\n max-width: 20rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft20 {\n left: 20rem;\n}\n.vb-tableListHeadCell--width21 {\n width: 21rem;\n}\n.vb-tableListHeadCell--minWidth21 {\n min-width: 21rem;\n}\n.vb-tableListHeadCell--maxWidth21 {\n max-width: 21rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft21 {\n left: 21rem;\n}\n.vb-tableListHeadCell--width22 {\n width: 22rem;\n}\n.vb-tableListHeadCell--minWidth22 {\n min-width: 22rem;\n}\n.vb-tableListHeadCell--maxWidth22 {\n max-width: 22rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft22 {\n left: 22rem;\n}\n.vb-tableListHeadCell--width23 {\n width: 23rem;\n}\n.vb-tableListHeadCell--minWidth23 {\n min-width: 23rem;\n}\n.vb-tableListHeadCell--maxWidth23 {\n max-width: 23rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft23 {\n left: 23rem;\n}\n.vb-tableListHeadCell--width24 {\n width: 24rem;\n}\n.vb-tableListHeadCell--minWidth24 {\n min-width: 24rem;\n}\n.vb-tableListHeadCell--maxWidth24 {\n max-width: 24rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft24 {\n left: 24rem;\n}\n.vb-tableListHeadCell--width25 {\n width: 25rem;\n}\n.vb-tableListHeadCell--minWidth25 {\n min-width: 25rem;\n}\n.vb-tableListHeadCell--maxWidth25 {\n max-width: 25rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft25 {\n left: 25rem;\n}\n.vb-tableListHeadCell--width26 {\n width: 26rem;\n}\n.vb-tableListHeadCell--minWidth26 {\n min-width: 26rem;\n}\n.vb-tableListHeadCell--maxWidth26 {\n max-width: 26rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft26 {\n left: 26rem;\n}\n.vb-tableListHeadCell--width27 {\n width: 27rem;\n}\n.vb-tableListHeadCell--minWidth27 {\n min-width: 27rem;\n}\n.vb-tableListHeadCell--maxWidth27 {\n max-width: 27rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft27 {\n left: 27rem;\n}\n.vb-tableListHeadCell--width28 {\n width: 28rem;\n}\n.vb-tableListHeadCell--minWidth28 {\n min-width: 28rem;\n}\n.vb-tableListHeadCell--maxWidth28 {\n max-width: 28rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft28 {\n left: 28rem;\n}\n.vb-tableListHeadCell--width29 {\n width: 29rem;\n}\n.vb-tableListHeadCell--minWidth29 {\n min-width: 29rem;\n}\n.vb-tableListHeadCell--maxWidth29 {\n max-width: 29rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft29 {\n left: 29rem;\n}\n.vb-tableListHeadCell--width30 {\n width: 30rem;\n}\n.vb-tableListHeadCell--minWidth30 {\n min-width: 30rem;\n}\n.vb-tableListHeadCell--maxWidth30 {\n max-width: 30rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft30 {\n left: 30rem;\n}\n.vb-tableListHeadCell--width31 {\n width: 31rem;\n}\n.vb-tableListHeadCell--minWidth31 {\n min-width: 31rem;\n}\n.vb-tableListHeadCell--maxWidth31 {\n max-width: 31rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft31 {\n left: 31rem;\n}\n.vb-tableListHeadCell--width32 {\n width: 32rem;\n}\n.vb-tableListHeadCell--minWidth32 {\n min-width: 32rem;\n}\n.vb-tableListHeadCell--maxWidth32 {\n max-width: 32rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft32 {\n left: 32rem;\n}\n.vb-tableListHeadCell--width33 {\n width: 33rem;\n}\n.vb-tableListHeadCell--minWidth33 {\n min-width: 33rem;\n}\n.vb-tableListHeadCell--maxWidth33 {\n max-width: 33rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft33 {\n left: 33rem;\n}\n.vb-tableListHeadCell--width34 {\n width: 34rem;\n}\n.vb-tableListHeadCell--minWidth34 {\n min-width: 34rem;\n}\n.vb-tableListHeadCell--maxWidth34 {\n max-width: 34rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft34 {\n left: 34rem;\n}\n.vb-tableListHeadCell--width35 {\n width: 35rem;\n}\n.vb-tableListHeadCell--minWidth35 {\n min-width: 35rem;\n}\n.vb-tableListHeadCell--maxWidth35 {\n max-width: 35rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft35 {\n left: 35rem;\n}\n.vb-tableListHeadCell--width36 {\n width: 36rem;\n}\n.vb-tableListHeadCell--minWidth36 {\n min-width: 36rem;\n}\n.vb-tableListHeadCell--maxWidth36 {\n max-width: 36rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft36 {\n left: 36rem;\n}\n.vb-tableListHeadCell--width37 {\n width: 37rem;\n}\n.vb-tableListHeadCell--minWidth37 {\n min-width: 37rem;\n}\n.vb-tableListHeadCell--maxWidth37 {\n max-width: 37rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft37 {\n left: 37rem;\n}\n.vb-tableListHeadCell--width38 {\n width: 38rem;\n}\n.vb-tableListHeadCell--minWidth38 {\n min-width: 38rem;\n}\n.vb-tableListHeadCell--maxWidth38 {\n max-width: 38rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft38 {\n left: 38rem;\n}\n.vb-tableListHeadCell--width39 {\n width: 39rem;\n}\n.vb-tableListHeadCell--minWidth39 {\n min-width: 39rem;\n}\n.vb-tableListHeadCell--maxWidth39 {\n max-width: 39rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft39 {\n left: 39rem;\n}\n.vb-tableListHeadCell--width40 {\n width: 40rem;\n}\n.vb-tableListHeadCell--minWidth40 {\n min-width: 40rem;\n}\n.vb-tableListHeadCell--maxWidth40 {\n max-width: 40rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft40 {\n left: 40rem;\n}\n.vb-tableListHeadCell--width41 {\n width: 41rem;\n}\n.vb-tableListHeadCell--minWidth41 {\n min-width: 41rem;\n}\n.vb-tableListHeadCell--maxWidth41 {\n max-width: 41rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft41 {\n left: 41rem;\n}\n.vb-tableListHeadCell--width42 {\n width: 42rem;\n}\n.vb-tableListHeadCell--minWidth42 {\n min-width: 42rem;\n}\n.vb-tableListHeadCell--maxWidth42 {\n max-width: 42rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft42 {\n left: 42rem;\n}\n.vb-tableListHeadCell--width43 {\n width: 43rem;\n}\n.vb-tableListHeadCell--minWidth43 {\n min-width: 43rem;\n}\n.vb-tableListHeadCell--maxWidth43 {\n max-width: 43rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft43 {\n left: 43rem;\n}\n.vb-tableListHeadCell--width44 {\n width: 44rem;\n}\n.vb-tableListHeadCell--minWidth44 {\n min-width: 44rem;\n}\n.vb-tableListHeadCell--maxWidth44 {\n max-width: 44rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft44 {\n left: 44rem;\n}\n.vb-tableListHeadCell--width45 {\n width: 45rem;\n}\n.vb-tableListHeadCell--minWidth45 {\n min-width: 45rem;\n}\n.vb-tableListHeadCell--maxWidth45 {\n max-width: 45rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft45 {\n left: 45rem;\n}\n.vb-tableListHeadCell--width46 {\n width: 46rem;\n}\n.vb-tableListHeadCell--minWidth46 {\n min-width: 46rem;\n}\n.vb-tableListHeadCell--maxWidth46 {\n max-width: 46rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft46 {\n left: 46rem;\n}\n.vb-tableListHeadCell--width47 {\n width: 47rem;\n}\n.vb-tableListHeadCell--minWidth47 {\n min-width: 47rem;\n}\n.vb-tableListHeadCell--maxWidth47 {\n max-width: 47rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft47 {\n left: 47rem;\n}\n.vb-tableListHeadCell--width48 {\n width: 48rem;\n}\n.vb-tableListHeadCell--minWidth48 {\n min-width: 48rem;\n}\n.vb-tableListHeadCell--maxWidth48 {\n max-width: 48rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft48 {\n left: 48rem;\n}\n.vb-tableListHeadCell--width49 {\n width: 49rem;\n}\n.vb-tableListHeadCell--minWidth49 {\n min-width: 49rem;\n}\n.vb-tableListHeadCell--maxWidth49 {\n max-width: 49rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft49 {\n left: 49rem;\n}\n.vb-tableListHeadCell--width50 {\n width: 50rem;\n}\n.vb-tableListHeadCell--minWidth50 {\n min-width: 50rem;\n}\n.vb-tableListHeadCell--maxWidth50 {\n max-width: 50rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft50 {\n left: 50rem;\n}\n.vb-tableListHeadCell--width51 {\n width: 51rem;\n}\n.vb-tableListHeadCell--minWidth51 {\n min-width: 51rem;\n}\n.vb-tableListHeadCell--maxWidth51 {\n max-width: 51rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft51 {\n left: 51rem;\n}\n.vb-tableListHeadCell--width52 {\n width: 52rem;\n}\n.vb-tableListHeadCell--minWidth52 {\n min-width: 52rem;\n}\n.vb-tableListHeadCell--maxWidth52 {\n max-width: 52rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft52 {\n left: 52rem;\n}\n.vb-tableListHeadCell--width53 {\n width: 53rem;\n}\n.vb-tableListHeadCell--minWidth53 {\n min-width: 53rem;\n}\n.vb-tableListHeadCell--maxWidth53 {\n max-width: 53rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft53 {\n left: 53rem;\n}\n.vb-tableListHeadCell--width54 {\n width: 54rem;\n}\n.vb-tableListHeadCell--minWidth54 {\n min-width: 54rem;\n}\n.vb-tableListHeadCell--maxWidth54 {\n max-width: 54rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft54 {\n left: 54rem;\n}\n.vb-tableListHeadCell--width55 {\n width: 55rem;\n}\n.vb-tableListHeadCell--minWidth55 {\n min-width: 55rem;\n}\n.vb-tableListHeadCell--maxWidth55 {\n max-width: 55rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft55 {\n left: 55rem;\n}\n.vb-tableListHeadCell--width56 {\n width: 56rem;\n}\n.vb-tableListHeadCell--minWidth56 {\n min-width: 56rem;\n}\n.vb-tableListHeadCell--maxWidth56 {\n max-width: 56rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft56 {\n left: 56rem;\n}\n.vb-tableListHeadCell--width57 {\n width: 57rem;\n}\n.vb-tableListHeadCell--minWidth57 {\n min-width: 57rem;\n}\n.vb-tableListHeadCell--maxWidth57 {\n max-width: 57rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft57 {\n left: 57rem;\n}\n.vb-tableListHeadCell--width58 {\n width: 58rem;\n}\n.vb-tableListHeadCell--minWidth58 {\n min-width: 58rem;\n}\n.vb-tableListHeadCell--maxWidth58 {\n max-width: 58rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft58 {\n left: 58rem;\n}\n.vb-tableListHeadCell--width59 {\n width: 59rem;\n}\n.vb-tableListHeadCell--minWidth59 {\n min-width: 59rem;\n}\n.vb-tableListHeadCell--maxWidth59 {\n max-width: 59rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft59 {\n left: 59rem;\n}\n.vb-tableListHeadCell--width60 {\n width: 60rem;\n}\n.vb-tableListHeadCell--minWidth60 {\n min-width: 60rem;\n}\n.vb-tableListHeadCell--maxWidth60 {\n max-width: 60rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft60 {\n left: 60rem;\n}\n.vb-tableListHeadCell--width61 {\n width: 61rem;\n}\n.vb-tableListHeadCell--minWidth61 {\n min-width: 61rem;\n}\n.vb-tableListHeadCell--maxWidth61 {\n max-width: 61rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft61 {\n left: 61rem;\n}\n.vb-tableListHeadCell--width62 {\n width: 62rem;\n}\n.vb-tableListHeadCell--minWidth62 {\n min-width: 62rem;\n}\n.vb-tableListHeadCell--maxWidth62 {\n max-width: 62rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft62 {\n left: 62rem;\n}\n.vb-tableListHeadCell--width63 {\n width: 63rem;\n}\n.vb-tableListHeadCell--minWidth63 {\n min-width: 63rem;\n}\n.vb-tableListHeadCell--maxWidth63 {\n max-width: 63rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft63 {\n left: 63rem;\n}\n.vb-tableListHeadCell--width64 {\n width: 64rem;\n}\n.vb-tableListHeadCell--minWidth64 {\n min-width: 64rem;\n}\n.vb-tableListHeadCell--maxWidth64 {\n max-width: 64rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft64 {\n left: 64rem;\n}\n.vb-tableListHeadCell--width65 {\n width: 65rem;\n}\n.vb-tableListHeadCell--minWidth65 {\n min-width: 65rem;\n}\n.vb-tableListHeadCell--maxWidth65 {\n max-width: 65rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft65 {\n left: 65rem;\n}\n.vb-tableListHeadCell--width66 {\n width: 66rem;\n}\n.vb-tableListHeadCell--minWidth66 {\n min-width: 66rem;\n}\n.vb-tableListHeadCell--maxWidth66 {\n max-width: 66rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft66 {\n left: 66rem;\n}\n.vb-tableListHeadCell--width67 {\n width: 67rem;\n}\n.vb-tableListHeadCell--minWidth67 {\n min-width: 67rem;\n}\n.vb-tableListHeadCell--maxWidth67 {\n max-width: 67rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft67 {\n left: 67rem;\n}\n.vb-tableListHeadCell--width68 {\n width: 68rem;\n}\n.vb-tableListHeadCell--minWidth68 {\n min-width: 68rem;\n}\n.vb-tableListHeadCell--maxWidth68 {\n max-width: 68rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft68 {\n left: 68rem;\n}\n.vb-tableListHeadCell--width69 {\n width: 69rem;\n}\n.vb-tableListHeadCell--minWidth69 {\n min-width: 69rem;\n}\n.vb-tableListHeadCell--maxWidth69 {\n max-width: 69rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft69 {\n left: 69rem;\n}\n.vb-tableListHeadCell--width70 {\n width: 70rem;\n}\n.vb-tableListHeadCell--minWidth70 {\n min-width: 70rem;\n}\n.vb-tableListHeadCell--maxWidth70 {\n max-width: 70rem;\n}\n.vb-tableListHeadCell--fixedRowHeaderLeft70 {\n left: 70rem;\n}\n.vb-tableListHeadCell__clickElement {\n cursor: pointer;\n}\n.vb-tableListHeadCell__clickElement:hover {\n font-weight: bold;\n}\n.vb-tableListHeadCell__clickElement::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.vb-tableListHeadCell--orderAscending, .vb-tableListHeadCell--orderDescending {\n font-weight: bold;\n}\n.vb-tableListHeadCell__iconWrapper {\n height: 0.75rem;\n width: 1rem;\n display: inline-block;\n}\n.vb-tableListHeadCell__headerArrowUp, .vb-tableListHeadCell__headerArrowDown, .vb-tableListHeadCell__headerSwapVert {\n margin-left: 0.5rem;\n vertical-align: middle;\n height: 1rem;\n width: 1rem;\n margin-top: -0.25rem;\n}\n.vb-tableListHeadCell__headerSwapVert {\n color: #8c8989;\n}\n.vb-tableListHeadCell--noWrap {\n white-space: nowrap;\n}\n\n.vb-tableListHead {\n height: 1.875rem;\n background-color: #f7f5f5;\n}\n.vb-tableListHead--fixedHeader {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.vb-tableListRow.vb-tableListRow--clickable {\n cursor: pointer;\n}\n.vb-withSideContent {\n display: flex;\n justify-content: space-between;\n}\n.vb-withSideContent--alignTop {\n align-items: flex-start;\n}\n.vb-withSideContent--alignMiddle {\n align-items: center;\n}\n.vb-withSideContent--alignBottom {\n align-items: flex-end;\n}\n.vb-withSideContent__content {\n flex-grow: 1;\n}\n.vb-withSideContent__sideContent {\n flex-shrink: 0;\n}\n\n.vb-withDescriptionContent {\n display: flex;\n flex-direction: column-reverse;\n}\n.vb-withDescriptionContent--horizontal {\n flex-direction: row-reverse;\n align-items: center;\n}\n.vb-withDescriptionContent--verticalReverse {\n flex-direction: column;\n}\n.vb-withDescriptionContent__content {\n flex-grow: 0;\n}\n.vb-withDescriptionContent__description {\n flex-grow: 1;\n}\n\n.vb-stack {\n display: flex;\n}\n.vb-stack > * {\n flex-shrink: 0;\n}\n.vb-stack--inline {\n display: inline-flex;\n}\n.vb-stack--directionVertical {\n flex-direction: column;\n}\n.vb-stack--directionHorizontal {\n flex-direction: row;\n}\n.vb-stack--directionVerticalReverse {\n flex-direction: column-reverse;\n}\n.vb-stack--directionHorizontalReverse {\n flex-direction: row-reverse;\n}\n.vb-stack--gap25 {\n gap: 0.25rem;\n}\n.vb-stack--gap50 {\n gap: 0.5rem;\n}\n.vb-stack--gap100 {\n gap: 1rem;\n}\n.vb-stack--gap150 {\n gap: 1.5rem;\n}\n.vb-stack--gap200 {\n gap: 2rem;\n}\n.vb-stack--gap300 {\n gap: 3rem;\n}\n.vb-stack--justifyContentStart {\n justify-content: start;\n}\n.vb-stack--justifyContentEnd {\n justify-content: end;\n}\n.vb-stack--justifyContentCenter {\n justify-content: center;\n}\n.vb-stack--justifyContentSpaceBetween {\n justify-content: space-between;\n}\n.vb-stack--alignItemsStrech {\n align-items: stretch;\n}\n.vb-stack--alignItemsCenter {\n align-items: center;\n}\n.vb-stack--alignItemsStart {\n align-items: start;\n}\n.vb-stack--alignItemsEnd {\n align-items: end;\n}\n.vb-stack--wrapWrap {\n flex-wrap: wrap;\n}\n.vb-stack--wrapNowrap {\n flex-wrap: nowrap;\n}\n\n.vb-message {\n display: inline-flex;\n vertical-align: middle;\n}\n.vb-message__icon {\n flex-shrink: 0;\n}\n.vb-message__content {\n display: inline-block;\n font-size: 0.875rem;\n line-height: 1.5;\n padding-top: 0.09375rem;\n}\n\n.vb-ma25 {\n margin: 0.25rem;\n}\n\n.vb-mt25 {\n margin-top: 0.25rem;\n}\n\n.vb-mb25 {\n margin-bottom: 0.25rem;\n}\n\n.vb-ml25 {\n margin-left: 0.25rem;\n}\n\n.vb-mr25 {\n margin-right: 0.25rem;\n}\n\n.vb-ma-25 {\n margin: -0.25rem;\n}\n\n.vb-mt-25 {\n margin-top: -0.25rem;\n}\n\n.vb-mb-25 {\n margin-bottom: -0.25rem;\n}\n\n.vb-ml-25 {\n margin-left: -0.25rem;\n}\n\n.vb-mr-25 {\n margin-right: -0.25rem;\n}\n\n.vb-ma50 {\n margin: 0.5rem;\n}\n\n.vb-mt50 {\n margin-top: 0.5rem;\n}\n\n.vb-mb50 {\n margin-bottom: 0.5rem;\n}\n\n.vb-ml50 {\n margin-left: 0.5rem;\n}\n\n.vb-mr50 {\n margin-right: 0.5rem;\n}\n\n.vb-ma-50 {\n margin: -0.5rem;\n}\n\n.vb-mt-50 {\n margin-top: -0.5rem;\n}\n\n.vb-mb-50 {\n margin-bottom: -0.5rem;\n}\n\n.vb-ml-50 {\n margin-left: -0.5rem;\n}\n\n.vb-mr-50 {\n margin-right: -0.5rem;\n}\n\n.vb-ma100 {\n margin: 1rem;\n}\n\n.vb-mt100 {\n margin-top: 1rem;\n}\n\n.vb-mb100 {\n margin-bottom: 1rem;\n}\n\n.vb-ml100 {\n margin-left: 1rem;\n}\n\n.vb-mr100 {\n margin-right: 1rem;\n}\n\n.vb-ma-100 {\n margin: -1rem;\n}\n\n.vb-mt-100 {\n margin-top: -1rem;\n}\n\n.vb-mb-100 {\n margin-bottom: -1rem;\n}\n\n.vb-ml-100 {\n margin-left: -1rem;\n}\n\n.vb-mr-100 {\n margin-right: -1rem;\n}\n\n.vb-ma150 {\n margin: 1.5rem;\n}\n\n.vb-mt150 {\n margin-top: 1.5rem;\n}\n\n.vb-mb150 {\n margin-bottom: 1.5rem;\n}\n\n.vb-ml150 {\n margin-left: 1.5rem;\n}\n\n.vb-mr150 {\n margin-right: 1.5rem;\n}\n\n.vb-ma-150 {\n margin: -1.5rem;\n}\n\n.vb-mt-150 {\n margin-top: -1.5rem;\n}\n\n.vb-mb-150 {\n margin-bottom: -1.5rem;\n}\n\n.vb-ml-150 {\n margin-left: -1.5rem;\n}\n\n.vb-mr-150 {\n margin-right: -1.5rem;\n}\n\n.vb-ma200 {\n margin: 2rem;\n}\n\n.vb-mt200 {\n margin-top: 2rem;\n}\n\n.vb-mb200 {\n margin-bottom: 2rem;\n}\n\n.vb-ml200 {\n margin-left: 2rem;\n}\n\n.vb-mr200 {\n margin-right: 2rem;\n}\n\n.vb-ma-200 {\n margin: -2rem;\n}\n\n.vb-mt-200 {\n margin-top: -2rem;\n}\n\n.vb-mb-200 {\n margin-bottom: -2rem;\n}\n\n.vb-ml-200 {\n margin-left: -2rem;\n}\n\n.vb-mr-200 {\n margin-right: -2rem;\n}\n\n.vb-ma300 {\n margin: 3rem;\n}\n\n.vb-mt300 {\n margin-top: 3rem;\n}\n\n.vb-mb300 {\n margin-bottom: 3rem;\n}\n\n.vb-ml300 {\n margin-left: 3rem;\n}\n\n.vb-mr300 {\n margin-right: 3rem;\n}\n\n.vb-ma-300 {\n margin: -3rem;\n}\n\n.vb-mt-300 {\n margin-top: -3rem;\n}\n\n.vb-mb-300 {\n margin-bottom: -3rem;\n}\n\n.vb-ml-300 {\n margin-left: -3rem;\n}\n\n.vb-mr-300 {\n margin-right: -3rem;\n}\n\n.vb-ma-auto {\n margin: auto;\n}\n\n.vb-mt-auto {\n margin-top: auto;\n}\n\n.vb-mb-auto {\n margin-bottom: auto;\n}\n\n.vb-ml-auto {\n margin-left: auto;\n}\n\n.vb-mr-auto {\n margin-right: auto;\n}\n\n.vb-spinner {\n display: inline-block;\n vertical-align: middle;\n width: 1rem;\n height: 1rem;\n pointer-events: none;\n position: relative;\n}\n.vb-spinner--large {\n width: 1.75rem;\n height: 1.75rem;\n}\n.vb-spinner__base {\n position: absolute;\n top: -0.25rem;\n left: -0.25rem;\n}\n.vb-spinner__fade-enter-active, .vb-spinner__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n}\n.vb-spinner__animation {\n width: 1.5rem;\n height: 1.5rem;\n}\n.vb-spinner__animation--large {\n width: 2.25rem;\n height: 2.25rem;\n}\n\n@keyframes keyframes__vb-progressBar__indeterminateBar {\n 0% {\n transform: translate(-100%, 0);\n }\n 100% {\n transform: translate(250%, 0);\n }\n}\n.vb-progressBar {\n height: 0.5rem;\n width: 11rem;\n position: relative;\n border-radius: 99rem;\n display: inline-block;\n background-color: #e9e7e7;\n overflow: hidden;\n}\n.vb-progressBar--widthLarge {\n width: 24rem;\n}\n.vb-progressBar--widthSmall {\n width: 7rem;\n}\n.vb-progressBar--widthXSmall {\n width: 4rem;\n}\n.vb-progressBar--widthFull {\n width: 100%;\n}\n.vb-progressBar--progressing {\n background-color: #dce8ff;\n}\n.vb-progressBar__valueBar, .vb-progressBar__indeterminateBar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: #2864f0;\n border-radius: 99rem;\n}\n.vb-progressBar__valueBar--complete, .vb-progressBar__indeterminateBar--complete {\n background-color: #73a5ff;\n}\n.vb-progressBar__indeterminateBar {\n width: 40%;\n border-radius: 99rem;\n animation-name: keyframes__vb-progressBar__indeterminateBar;\n animation-duration: 1.6s;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-timing-function: ease-in-out;\n}\n@media (prefers-reduced-motion) {\n .vb-progressBar__indeterminateBar {\n animation-name: none;\n }\n}\n\n/** @define accordionPanel */\n.vb-accordionPanel {\n display: block;\n box-sizing: border-box;\n position: relative;\n background-color: #fff;\n transition-duration: 0.2s;\n}\n.vb-accordionPanel__title {\n display: block;\n padding: 1rem 3rem 1rem 1.5rem;\n margin: 0;\n font-size: 0.875rem;\n line-height: 1;\n position: relative;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n.vb-accordionPanel__title:hover {\n background-color: #ebf3ff;\n}\n@media (max-width: 48rem) {\n .vb-accordionPanel__title--responsive {\n padding-left: 1rem;\n padding-right: 2.5rem;\n }\n}\n.vb-accordionPanel__icon {\n display: block;\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n top: 50%;\n right: 1.5rem;\n transform: translateY(-50%);\n}\n@media (max-width: 48rem) {\n .vb-accordionPanel__icon--responsive {\n right: 1rem;\n }\n}\n.vb-accordionPanel__description {\n padding: 0.5rem 1.5rem;\n margin: 0;\n font-size: 0.875rem;\n}\n.vb-accordionPanel--borderBoth {\n border-width: 1px 0;\n border-style: solid;\n border-color: #e9e7e7;\n}\n.vb-accordionPanel--borderBottom {\n border-bottom: 1px solid #e9e7e7;\n}\n.vb-accordionPanel--borderTop {\n border-top: 1px solid #e9e7e7;\n}\n@media (max-width: 48rem) {\n .vb-accordionPanel--responsive {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n}\n\n/** @define bulletedList */\n.vb-bulletedList {\n font-size: 0.875rem;\n}\n.vb-bulletedList__list {\n list-style-type: disc;\n padding: 0 0 0 1.5em;\n margin: 0;\n}\n.vb-bulletedList__list--decimal {\n list-style-type: decimal;\n}\n.vb-bulletedList__list__listItem {\n margin: 0 0 0.5em;\n line-height: 1.5;\n}\n.vb-bulletedList__list__listItem:last-child {\n margin-bottom: 0;\n}\n.vb-bulletedList--small {\n font-size: 0.75rem;\n}\n\n.vb-buttonGroup {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.vb-buttonGroup__topPair {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.vb-buttonGroup__topPair:not(:last-child) {\n margin: 0 1rem 0 0;\n}\n.vb-buttonGroup--alignLeft {\n justify-content: flex-start;\n}\n.vb-buttonGroup__topItem:not(:last-child), .vb-buttonGroup__item:not(:last-child) {\n margin: 0 1rem 0 0;\n}\n@media (max-width: 48rem) {\n .vb-buttonGroup--responsive {\n flex-direction: column;\n width: 100%;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__topPair {\n flex-direction: column;\n margin-right: 0;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__topPair:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__topPair--mobileButtonLayoutRow {\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__topPair--mobileButtonLayoutRow:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__topItem--mobileButtonLayoutRow {\n flex-grow: 1;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__item,\n.vb-buttonGroup--responsive .vb-buttonGroup__topItem:not(.vb-buttonGroup__topItem--mobileButtonLayoutRow) {\n margin: 0 auto 0.5rem;\n min-width: 10rem;\n text-align: center;\n }\n .vb-buttonGroup--responsive .vb-buttonGroup__item:last-child,\n.vb-buttonGroup--responsive .vb-buttonGroup__topItem:not(.vb-buttonGroup__topItem--mobileButtonLayoutRow):last-child {\n margin-bottom: 0;\n }\n .vb-buttonGroup--responsive .vb-button:not(.vb-button--appearanceTertiary) {\n width: 100%;\n }\n}\n\n.vb-breadcrumbs__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n line-height: 1;\n}\n.vb-breadcrumbs__item {\n display: inline-flex;\n align-items: center;\n font-size: 0.875rem;\n}\n.vb-breadcrumbs__divider {\n font-size: 1.5rem;\n}\n\n/** @define calendar */\n.vb-calendar {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n min-width: 50rem;\n position: relative;\n}\n.vb-calendar__inner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.vb-datePicker {\n width: calc((2rem + 1px) * 7);\n font-size: 0.875rem;\n background: #fff;\n}\n.vb-datePicker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 0.25rem;\n}\n.vb-datePicker__calendar {\n width: 100%;\n border-collapse: collapse;\n}\n.vb-datePicker__calendarHead, .vb-datePicker__calendarCell {\n text-align: center;\n width: 2rem;\n box-sizing: border-box;\n}\n.vb-datePicker__calendarHead {\n font-size: 0.75rem;\n color: #6e6b6b;\n}\n.vb-datePicker__calendarCell {\n position: relative;\n border-top: 1px solid #e9e7e7;\n border-right: 1px solid #e9e7e7;\n box-sizing: border-box;\n padding: 0;\n width: 2rem;\n height: 2rem;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n}\n.vb-datePicker__calendarCell:last-of-type {\n border-right: 0;\n}\n.vb-datePicker__calendarCell--disabled {\n background-color: #f7f5f5;\n color: #8c8989;\n cursor: not-allowed;\n outline: none;\n}\n.vb-datePicker__calendarCell--selected {\n background: #285ac8;\n color: #fff;\n}\n.vb-datePicker__calendarCell--otherMonth {\n background: #f7f5f5;\n}\n.vb-datePicker__calendarCell:hover:not(.vb-datePicker__calendarCell--disabled):not(.vb-datePicker__calendarCell--selected) {\n background: #e9e7e7;\n}\n.vb-datePicker__dateButton::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.vb-datePicker__dateNumber--today {\n font-weight: bold;\n}\n\n.vb-cardNavigation {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.vb-cardNavigation__item {\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n.vb-cardNavigation__item--1 {\n margin-right: 0;\n}\n.vb-cardNavigation__content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 5rem;\n width: 12.75rem;\n}\n.vb-cardNavigation__content--3 {\n width: 18.3333333333rem;\n}\n.vb-cardNavigation__content--2 {\n width: 29.5rem;\n}\n.vb-cardNavigation__content--1 {\n width: 64rem;\n}\n.vb-cardNavigation__arrow {\n flex-shrink: 0;\n}\n.vb-cardNavigation__icon {\n width: 1.5rem;\n height: 1.5rem;\n fill: #285ac8;\n margin-right: 1rem;\n flex-shrink: 0;\n}\n.vb-cardNavigation__title {\n display: flex;\n justify-content: flex-start;\n}\n.vb-cardNavigation__title--text {\n margin-bottom: 1rem;\n}\n.vb-cardNavigation__url {\n text-decoration: initial;\n color: initial;\n}\n\n.vb-comboBox {\n display: inline;\n position: relative;\n}\n.vb-comboBox__listBox {\n display: none;\n}\n.vb-comboBox__listBox--open {\n display: block;\n}\n.vb-comboBox__listBox--widthXSmall {\n width: 6rem;\n}\n.vb-comboBox__listBox--widthSmall {\n width: 9rem;\n}\n.vb-comboBox__listBox--widthMedium {\n width: 13rem;\n}\n.vb-comboBox__listBox--widthLarge {\n width: 26rem;\n}\n.vb-comboBox__listOptions {\n overflow-y: auto;\n}\n.vb-comboBox__listOption {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n word-break: keep-all;\n overflow: hidden;\n transition-duration: 0.2s;\n transition-property: background-color;\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n}\n.vb-comboBox__listOption--disabled {\n background: inherit;\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n}\n.vb-comboBox__listOption--selected:not(.vb-comboBox__listOption--disabled) {\n background: #2864f0;\n color: #fff;\n}\n.vb-comboBox__listOption:hover:not(.vb-comboBox__listOption--selected):not(.vb-comboBox__listOption--disabled) {\n background: #f7f5f5;\n color: #323232;\n cursor: pointer;\n}\n.vb-comboBox__listOptionLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 fit-content;\n}\n.vb-comboBox__listOptionSubLabel {\n font: normal 0.75rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #6e6b6b;\n margin-left: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1 1 fit-content;\n text-align: right;\n}\n.vb-comboBox__listOption--selected .vb-comboBox__listOptionSubLabel {\n color: #fff;\n}\n\n.vb-comboBox__emptyMessage {\n padding: 0.5rem 0.5rem;\n text-align: center;\n}\n.vb-comboBox__spinner {\n padding: 1rem;\n text-align: center;\n}\n.vb-comboBox__fixedItem {\n display: flex;\n color: #285ac8;\n font-weight: bold;\n vertical-align: middle;\n margin: -0.5rem -1rem;\n padding: 0.5rem 1rem;\n}\n.vb-comboBox__fixedItem--add {\n border-top: 1px solid #e9e7e7;\n}\n.vb-comboBox__fixedItem--selected {\n background: #2864f0;\n color: #fff;\n}\n.vb-comboBox__fixedItemIcon {\n width: 1.5em;\n height: 1.5em;\n margin: -1px 0.25rem 0 0;\n}\n\n.vb-multiComboBox {\n display: inline-block;\n}\n.vb-multiComboBox--widthXSmall {\n width: 4rem;\n}\n.vb-multiComboBox--widthSmall {\n width: 7rem;\n}\n.vb-multiComboBox--widthMedium {\n width: 11rem;\n}\n.vb-multiComboBox--widthLarge {\n width: 24rem;\n}\n.vb-multiComboBox--widthFull {\n width: 100%;\n}\n.vb-multiComboBox__border {\n line-height: 1;\n vertical-align: middle;\n margin: -1px;\n display: inline-block;\n overflow: hidden;\n border: 1px solid #dcdcdc;\n border-radius: 0.5rem;\n background-color: #fff;\n transition-duration: 0.2s;\n transition-property: border-color, background-color, color;\n}\n.vb-multiComboBox__border--disabled {\n background-color: #f0eded;\n cursor: not-allowed;\n}\n.vb-multiComboBox__border--error {\n border-color: #dc1e32;\n}\n.vb-multiComboBox__border--widthXSmall {\n width: 4rem;\n}\n.vb-multiComboBox__border--widthSmall {\n width: 7rem;\n}\n.vb-multiComboBox__border--widthMedium {\n width: 11rem;\n}\n.vb-multiComboBox__border--widthLarge {\n width: 24rem;\n}\n.vb-multiComboBox__border--widthFull {\n width: 100%;\n}\n.vb-multiComboBox__flex {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n min-height: 2.25rem;\n}\n.vb-multiComboBox__field {\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 1rem;\n}\n.vb-multiComboBox__field--maxSelectionCountReached {\n width: 1px;\n height: 1px;\n clip: rect(1px 1px 1px 1px);\n position: absolute;\n left: 0;\n top: 0;\n overflow: hidden;\n}\n.vb-multiComboBox__list {\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: fit-content;\n max-width: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.vb-multiComboBox__listItem {\n margin: 0.25rem;\n max-width: calc(100% - 0.5rem);\n}\n\n.vb-descriptionList__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n}\n.vb-descriptionList__header {\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n}\n.vb-descriptionList__row {\n height: 3.25rem;\n}\n.vb-descriptionList__row--spacingCompact {\n height: 2rem;\n}\n.vb-descriptionList__row:nth-child(2n+1) {\n background-color: #f7f5f5;\n}\n.vb-descriptionList__row:nth-child(2n):last-child {\n border-bottom: 1px solid #e9e7e7;\n}\n@media (max-width: 48rem) {\n .vb-descriptionList--responsive {\n display: block;\n width: 100%;\n }\n .vb-descriptionList--responsive .vb-descriptionList__row {\n height: auto;\n display: block;\n }\n}\n\n.vb-dateInput {\n display: inline;\n position: relative;\n}\n.vb-dateInput__listbox {\n position: absolute;\n top: 0;\n left: 0;\n}\n.vb-dateInput__listbox--rightAligned {\n left: unset;\n right: 0;\n}\n\n.vb-ReactModal__Body--open {\n overflow: hidden;\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n}\n\n.vb-messageDialog {\n max-width: 70rem;\n min-width: 40rem;\n max-height: calc(100vh - 2rem);\n}\n.vb-messageDialog__inner {\n text-align: center;\n display: flex;\n flex-direction: column;\n}\n.vb-messageDialog__header, .vb-messageDialog__footer {\n padding: 1.5rem;\n}\n.vb-messageDialog__body {\n padding: 0 1.5rem;\n}\n.vb-messageDialog__body--alignLeft {\n text-align: left;\n}\n@media (max-width: 48rem) {\n .vb-messageDialog--responsive {\n margin: 0 1rem;\n min-width: 18rem;\n }\n .vb-messageDialog--responsive .vb-messageDialog__header, .vb-messageDialog--responsive .vb-messageDialog__footer {\n padding: 1rem;\n }\n .vb-messageDialog--responsive .vb-messageDialog__body {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n}\n\n.vb-taskDialog {\n max-width: 70rem;\n min-width: 40rem;\n}\n.vb-taskDialog__inner {\n overflow-y: auto;\n}\n.vb-taskDialog__flex {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 2rem);\n max-height: calc(100svh - 2rem);\n min-height: 12rem;\n}\n.vb-taskDialog__header, .vb-taskDialog__footer {\n background-color: #fff;\n padding: 1.5rem;\n}\n.vb-taskDialog__body {\n border-top: 1px solid #e9e7e7;\n border-bottom: 1px solid #e9e7e7;\n margin: 0;\n padding: 1.5rem;\n overflow: auto;\n background-color: #fff;\n min-height: 3rem;\n}\n@media (max-width: 48rem) {\n .vb-taskDialog--responsive {\n margin: 0 1rem;\n min-width: 18rem;\n }\n .vb-taskDialog--responsive .vb-taskDialog__header, .vb-taskDialog--responsive .vb-taskDialog__footer {\n padding: 1rem;\n }\n .vb-taskDialog--responsive .vb-taskDialog__body {\n padding: 1rem;\n }\n}\n\n.vb-guideDialog {\n text-align: center;\n width: 40rem;\n}\n@media (max-width: 40rem) {\n .vb-guideDialog {\n margin: 0 1rem;\n width: auto;\n min-width: 10rem;\n }\n}\n.vb-guideDialog__inner {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 5rem);\n}\n.vb-guideDialog__header {\n display: flex;\n justify-content: space-between;\n flex-direction: row-reverse;\n}\n.vb-guideDialog__footer {\n display: flex;\n justify-content: space-between;\n}\n.vb-guideDialog__body {\n overflow: auto;\n background-color: #fff;\n min-height: 3rem;\n}\n.vb-guideDialog__image {\n width: 320px;\n height: 240px;\n margin-bottom: 1rem;\n}\n@media (max-width: 48rem) {\n .vb-guideDialog__image {\n width: 240px;\n height: 180px;\n }\n}\n.vb-guideDialog__buttonBlock {\n display: flex;\n justify-content: space-between;\n}\n.vb-guideDialog__closeButtonBlock {\n display: flex;\n justify-content: space-between;\n flex-direction: row-reverse;\n}\n\n.vb-guideStepCount {\n color: #6e6b6b;\n}\n.vb-guideStepCount__currentStep {\n font-weight: bold;\n}\n\n.vb-DialogFooter {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n@media (max-width: 48rem) {\n .vb-DialogFooter--responsive {\n justify-content: center;\n flex-direction: column;\n }\n}\n@media (max-width: 48rem) {\n .vb-DialogFooter__sideContent--responsive {\n margin-top: 1rem;\n }\n}\n\n.vb-listButtonSelector__button--disabled, .vb-dropdownItem--disabled, .vb-button--disabled, .vb-pagerButton--disabled, .vb-iconOnlyButton--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-listButtonSelector__button--disabled:hover, .vb-dropdownItem--disabled:hover, .vb-button--disabled:hover, .vb-pagerButton--disabled:hover, .vb-iconOnlyButton--disabled:hover {\n cursor: not-allowed;\n}\n\n.vb-dropdown {\n position: relative;\n text-align: left;\n font-size: 0.875rem;\n}\n.vb-dropdown__body {\n position: absolute;\n top: 0;\n width: auto;\n}\n.vb-dropdown--alignRight .vb-dropdown__body {\n right: 0;\n}\n.vb-dropdown--positionRelative .vb-dropdown__body {\n position: relative;\n}\n\n.vb-dropdownMenuContent__list {\n margin: 0;\n padding: 0;\n list-style: none;\n max-height: 60vh;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n.vb-dropdownMenuContent__list li:first-child > *::before {\n border-top-left-radius: 1rem;\n border-top-right-radius: 1rem;\n}\n.vb-dropdownMenuContent__list li:last-child > *::before {\n border-bottom-left-radius: 1rem;\n border-bottom-right-radius: 1rem;\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n .vb-dropdownMenuContent__list {\n display: block;\n }\n}\n\n.vb-dropdownItem {\n width: 100%;\n}\n.vb-dropdownItem--selectable:not(.vb-dropdownItem--disabled) {\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color;\n}\n.vb-dropdownItem--selectable:not(.vb-dropdownItem--disabled):hover {\n background-color: #f7f5f5;\n}\n.vb-dropdownItem--unread {\n background-image: linear-gradient(135deg, #dc1e32 10px, transparent 0);\n}\n.vb-dropdownItem--rule {\n height: 0;\n min-height: 0;\n padding: 0;\n border-top: 1px solid #e9e7e7;\n}\n.vb-dropdownItem__text {\n font-size: 0.875rem;\n line-height: 1.5rem;\n padding: 0.46875rem 1rem;\n width: 100%;\n display: inline-block;\n box-sizing: border-box;\n}\n.vb-dropdownItem__content, .vb-dropdownItem__checkBoxItem {\n display: block;\n min-width: 10rem;\n max-width: 42rem;\n max-width: min(42rem, calc(100vw - 6rem));\n width: max-content;\n}\n.vb-dropdownItem__content--danger {\n color: #dc1e32;\n}\n.vb-dropdownItem__checkBoxItem {\n font-size: 0.875rem;\n line-height: 1.5rem;\n padding: 0.46875rem 1rem;\n}\n.vb-dropdownItem__selectable {\n cursor: pointer;\n background: transparent;\n padding: 0.46875rem 1rem;\n line-height: 1.5;\n font-size: 0.875rem;\n border: 0;\n text-align: left;\n width: 100%;\n color: #323232;\n text-decoration: none;\n display: block;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n}\n.vb-dropdownItem__selectable--rightIcon {\n padding-right: 3rem;\n}\n.vb-dropdownItem__selectable:focus {\n outline: none;\n}\n.vb-dropdownItem__selectable:focus::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #73a5ff;\n}\n.vb-dropdownItem__rightIcon {\n position: absolute;\n top: 50%;\n right: 0.5rem;\n transform: translateY(-50%);\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.vb-dropdownButton {\n display: inline-block;\n}\n\n.vb-nameField--small {\n margin: 0 0.25rem;\n}\n.vb-nameField--error {\n color: #dc1e32;\n}\n.vb-nameField--disabled {\n color: #e9e7e7;\n}\n\n.vb-phoneNumberField {\n display: flex;\n align-items: center;\n}\n.vb-phoneNumberField .vb-phoneNumberField__hyphen {\n margin: 0 0.5rem;\n}\n.vb-phoneNumberField .vb-phoneNumberField__hyphen--small {\n margin: 0 0.25rem;\n}\n.vb-phoneNumberField .vb-phoneNumberField__hyphen--error {\n color: #dc1e32;\n}\n.vb-phoneNumberField .vb-phoneNumberField__hyphen--disabled {\n color: #e9e7e7;\n}\n\n.vb-dateField .vb-dateField__unit {\n margin: 0 0.5rem;\n font: normal 0.875rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n.vb-dateField .vb-dateField__unit--small {\n margin: 0 0.25rem;\n font-size: 0.6875rem;\n}\n\n.vb-amountRangeField {\n display: inline-flex;\n align-items: center;\n}\n\n.vb-filterTag__block {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 0 0.5rem;\n border-radius: 0.75rem;\n height: 1.5rem;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, border;\n color: #464343;\n background-color: #fff;\n border: 1px solid #8c8989;\n}\n.vb-filterTag__block .vb-filterTag__icon {\n width: 1rem;\n height: 1rem;\n margin-left: 0.5rem;\n transition-duration: 0.2s;\n transition-property: fill;\n fill: #464343;\n}\n.vb-filterTag__block:hover {\n background-color: #f0eded;\n}\n.vb-filterTag__block:active {\n background-color: #e9e7e7;\n}\n.vb-filterTag__block.active {\n color: #285ac8;\n background-color: #ebf3ff;\n border-color: #285ac8;\n}\n.vb-filterTag__block.active .vb-filterTag__icon {\n fill: #285ac8;\n}\n.vb-filterTag__block.active:hover {\n background-color: #dce8ff;\n}\n.vb-filterTag__block.active:active {\n background-color: #aac8ff;\n}\n.vb-filterTag__body {\n font-size: 0.75rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vb-fileUploader {\n width: 32.75rem;\n height: 19.625rem;\n background-color: #f7f5f5;\n transition-duration: 0.2s;\n transition-property: background-color;\n position: relative;\n border-radius: 0.5rem;\n}\n.vb-fileUploader__content, .vb-fileUploader__dropMessage, .vb-fileUploader__errorMessage {\n text-align: center;\n position: absolute;\n width: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition-duration: 0.2s;\n transition-property: opacity;\n}\n.vb-fileUploader__content {\n opacity: 1;\n}\n.vb-fileUploader__content--disabled {\n cursor: default;\n}\n.vb-fileUploader__dropMessage, .vb-fileUploader__errorMessage {\n opacity: 0;\n}\n.vb-fileUploader--widthFull {\n width: 100%;\n height: 100%;\n}\n.vb-fileUploader--typeCompact .vb-fileUploader__content,\n.vb-fileUploader--typeCompact .vb-fileUploader__dropMessage {\n display: flex;\n align-items: center;\n}\n.vb-fileUploader--typeCompact .vb-fileUploader__contentIllust {\n flex: 1;\n margin: 0;\n}\n.vb-fileUploader--typeCompact .vb-fileUploader__contentDescription {\n flex: 1;\n margin: 0 1rem;\n}\n.vb-fileUploader--active {\n background-color: #f0eded;\n}\n.vb-fileUploader--active .vb-illust--cloudUpload .vb-illust__frame {\n fill: #8c8989;\n}\n.vb-fileUploader--active .vb-fileUploader__content {\n opacity: 0;\n}\n.vb-fileUploader--active .vb-fileUploader__dropMessage {\n opacity: 1;\n}\n.vb-fileUploader--error .vb-fileUploader__content {\n opacity: 0;\n}\n.vb-fileUploader--error .vb-fileUploader__errorMessage {\n opacity: 1;\n}\n.vb-fileUploader__icon {\n width: 3rem;\n height: 3rem;\n margin-bottom: 1rem;\n fill: #5a5a5a;\n}\n\n.vb-fileDropArea {\n width: auto;\n height: auto;\n position: relative;\n}\n.vb-fileDropArea__fade-enter, .vb-fileDropArea__fade-exit {\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.vb-fileDropArea__fade-enter-active, .vb-fileDropArea__fade-enter-done {\n opacity: 1;\n transition: opacity 0.3s ease;\n}\n.vb-fileDropArea__overlay {\n z-index: 100;\n border: dashed 2px #2864f0;\n transition-duration: 0.2s;\n transition-property: opacity;\n background-color: rgba(40, 100, 240, 0.1);\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n backdrop-filter: blur(1px);\n}\n.vb-fileDropArea__overlay--disabled {\n cursor: not-allowed;\n border: dashed 2px #5a5a5a;\n background-color: rgba(90, 90, 90, 0.1);\n}\n.vb-fileDropArea__icon {\n fill: #143278;\n}\n.vb-fileDropArea__icon--disabled {\n width: 3rem;\n height: 3rem;\n margin-bottom: 1rem;\n fill: #5a5a5a;\n}\n.vb-fileDropArea__contentDescription {\n color: #143278;\n font-weight: bold;\n}\n.vb-fileDropArea__contentDescription--disabled {\n color: #5a5a5a;\n}\n\n.vb-footer {\n display: flex;\n max-width: 70rem;\n width: calc(100vw - 3rem);\n margin-left: auto;\n margin-right: auto;\n flex-wrap: nowrap;\n justify-content: space-between;\n}\n@media (max-width: 48rem) {\n .vb-footer {\n width: calc(100vw - 1rem);\n flex-direction: column;\n }\n}\n.vb-footer--widthWide {\n max-width: 100rem;\n}\n.vb-footer--widthNarrow {\n max-width: 40rem;\n}\n.vb-footerLinks {\n display: block;\n padding: 0;\n margin: 0 0 1rem;\n list-style: none;\n overflow: hidden;\n}\n.vb-footerLinks__item {\n display: block;\n margin-right: 1rem;\n float: left;\n line-height: 1;\n}\n.vb-footerLinks__item:last-child {\n margin-right: 0;\n}\n.vb-footerLinks__item > a {\n color: #323232;\n font-size: 0.875rem;\n font-weight: normal;\n text-decoration: underline;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.vb-footerLinks__item > a:hover {\n color: #6e6b6b;\n}\n.vb-footerCopyright {\n display: block;\n font-size: 0.75rem;\n font-style: normal;\n line-height: 1;\n}\n.vb-footerBadges {\n display: block;\n padding: 0;\n margin: 0;\n list-style: none;\n overflow: hidden;\n}\n@media (max-width: 48rem) {\n .vb-footerBadges {\n margin-top: 1.5rem;\n }\n}\n.vb-footerBadges__item {\n display: block;\n margin-right: 1rem;\n float: left;\n}\n.vb-footerBadges__item:last-child {\n margin-right: 0;\n}\n@media (max-width: 48rem) {\n .vb-footerSection {\n margin-top: 1.5rem;\n }\n}\n\n/** @define formControlGroup */\n.vb-formControlGroup {\n display: flex;\n flex-wrap: wrap;\n}\n.vb-formControlGroup--block {\n display: block;\n}\n\n/** @define formControl */\n.vb-formControl {\n max-width: 100%;\n}\n.vb-formControl__legend {\n padding: 0;\n}\n.vb-formControl__labelArea {\n display: flex;\n align-items: flex-end;\n min-height: 1.5rem;\n margin-bottom: 0.25rem;\n}\n.vb-formControl__fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n min-inline-size: 0;\n max-width: 100%;\n}\n\n.vb-formActions--fixed {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #fff;\n z-index: 200;\n}\n.vb-formActions--fixed .vb-popupBase {\n border-radius: initial;\n}\n.vb-formActions__inner {\n box-sizing: border-box;\n max-width: 70rem;\n margin: 0 auto;\n padding: 0 1.5rem;\n}\n.vb-formActions__inner--widthWide {\n max-width: 100rem;\n}\n.vb-formActions__inner--widthNarrow {\n max-width: 40rem;\n min-width: 40rem;\n}\n.vb-formActions__animation-enter, .vb-formActions__animation-exit {\n transform: translateY(100%);\n transition: transform 0.3s ease;\n}\n.vb-formActions__animation-enter-active, .vb-formActions__animation-enter-done {\n transform: translateY(0);\n transition: transform 0.3s ease;\n}\n\n.vb-globalNavi {\n display: flex;\n box-sizing: border-box;\n min-width: 73rem;\n padding: 0 1.5rem;\n background-color: #285ac8;\n box-sizing: border-box;\n background-color: #fff;\n border-bottom: 1px solid #2864f0;\n height: 3rem;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n}\n.vb-globalNavi--disableGutters {\n min-width: 70rem;\n}\n.vb-globalNaviList {\n display: block;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.vb-globalNaviList__item {\n display: block;\n float: left;\n}\n.vb-globalNaviList__itemInner {\n display: block;\n padding: 1rem;\n}\n\n.vb-guidanceMessage {\n position: relative;\n background-color: #ebf3ff;\n color: #143278;\n border-radius: 0.5rem;\n}\n.vb-guidanceMessage__content--alignMiddle {\n display: flex;\n align-items: center;\n}\n.vb-guidanceMessage--inline {\n display: inline-block;\n}\n.vb-guidanceMessage--widthFitContent {\n width: fit-content;\n}\n.vb-guidanceMessage--widthFull {\n width: 100%;\n}\n.vb-guidanceMessage--clickable {\n border-radius: 0.5rem;\n}\n.vb-guidanceMessage__container {\n display: grid;\n display: -ms-grid;\n grid-template-columns: auto 1fr;\n -ms-grid-columns: auto 1fr;\n padding: 1rem;\n}\n@media (max-width: 48rem) {\n .vb-guidanceMessage__container--responsive {\n padding: 0.5rem;\n }\n}\n.vb-guidanceMessage__container--alignTop {\n align-items: flex-start;\n}\n.vb-guidanceMessage__container--alignMiddle {\n align-items: center;\n}\n.vb-guidanceMessage__container--small {\n padding: 0.25rem 0.5rem;\n}\n.vb-guidanceMessage__icon {\n grid-column: 1/2;\n -ms-grid-column: 1;\n margin-right: 0.5rem;\n font-size: 1.5rem;\n}\n.vb-guidanceMessage__link, .vb-guidanceMessage__button {\n color: #143278;\n text-decoration: none;\n display: inline-block;\n text-align: left;\n border: 0;\n background-color: transparent;\n font-size: 0.875rem;\n font-weight: bold;\n padding: 0;\n font-family: inherit;\n}\n.vb-guidanceMessage__link::before, .vb-guidanceMessage__button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n}\n.vb-guidanceMessage__link:hover::before, .vb-guidanceMessage__button:hover::before {\n background-color: rgba(40, 90, 200, 0.06);\n}\n\n/** @define GuidContent */\n.vb-guidedContent {\n display: grid;\n grid-template-columns: auto min-content;\n grid-template-rows: auto;\n}\n.vb-guidedContent__title {\n grid-column: 1/-1;\n}\n.vb-guidedContent__guide {\n grid-column: 3/-1;\n grid-row: span 2;\n}\n@media (max-width: 48rem) {\n .vb-guidedContent--responsive .vb-guidedContent__guide {\n grid-column: 1/-1;\n }\n}\n\n/** @define Header */\n.vb-header {\n box-sizing: border-box;\n min-width: 73rem;\n height: 5rem;\n padding: 1rem 1.5rem;\n display: flex;\n justify-content: space-between;\n background-color: #fff;\n font-size: 0.75rem;\n padding: 0.75rem 1.5rem 0.25rem;\n height: 4rem;\n}\n.vb-header--disableGutters {\n min-width: 70rem;\n}\n.vb-header .vb-header__logo {\n width: fit-content;\n}\n.vb-header .vb-header__info {\n text-align: center;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n}\n.vb-header .vb-header__children {\n display: flex;\n flex: 1;\n padding: 0 2rem;\n align-items: center;\n}\n.vb-header .vb-header__plan {\n display: inline-block;\n box-sizing: border-box;\n padding: 0 0.2em;\n margin-bottom: -0.1em;\n font-weight: bold;\n border: 1px solid #285ac8;\n color: #285ac8;\n text-decoration: none;\n}\n.vb-header .vb-header__icon {\n vertical-align: middle;\n width: 1rem;\n height: 1rem;\n}\n.vb-header .vb-header__icon--notice {\n color: #be8c14;\n}\n.vb-header .vb-header__icon--alert {\n color: #dc1e32;\n}\n.vb-header .vb-header__text {\n vertical-align: middle;\n}\n.vb-header .vb-header__link {\n color: #323232;\n transition-duration: 0.2s;\n transition-property: background-color;\n}\n.vb-header .vb-header__link:hover {\n background-color: #f7f5f5;\n}\n.vb-header .vb-header__button {\n color: #323232;\n display: inline;\n border: 0;\n background: transparent;\n padding: 0;\n text-decoration: underline;\n cursor: pointer;\n font-size: 0.75rem;\n transition-duration: 0.2s;\n transition-property: background-color;\n}\n.vb-header .vb-header__button--active {\n background-color: #f0eded;\n}\n.vb-header .vb-header__button:hover {\n background-color: #f7f5f5;\n}\n.vb-header .vb-header__icon + .vb-header__text {\n margin-left: 0.2em;\n}\n.vb-header .vb-header__section {\n position: relative;\n}\n.vb-header .vb-header__section:not(:last-child) {\n margin-right: 1em;\n}\n.vb-header .vb-header__dropdownWrapper {\n padding-bottom: 8px;\n}\n.vb-header .vb-header__badge {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 99rem;\n background: #dc1e32;\n display: block;\n position: absolute;\n top: 0.25rem;\n left: 0.5rem;\n border: solid 1px white;\n}\n\n.vb-headlineArea {\n display: block;\n padding-bottom: 2rem;\n position: relative;\n}\n\n/** @define indexSearchField */\n.vb-indexSearchField {\n display: inline-block;\n position: relative;\n max-width: 100%;\n}\n.vb-indexSearchField--widthFull {\n width: 100%;\n}\n.vb-indexSearchField .vb-indexSearchField__icon {\n display: block;\n width: 1.5em;\n height: 1.5em;\n position: absolute;\n top: 50%;\n left: 0.5em;\n pointer-events: none;\n transform: translateY(-50%);\n transition: left 0.3s ease, fill 0.3s ease;\n}\n.vb-indexSearchField .vb-indexSearchField__icon--searchAreaClosed {\n left: 0.375em;\n pointer-events: none;\n}\n.vb-indexSearchField .vb-indexSearchField__input {\n padding-left: 2.75em;\n max-width: 100%;\n transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;\n}\n.vb-indexSearchField .vb-indexSearchField__input::placeholder {\n opacity: 1;\n transition: opacity 0.3s ease;\n}\n.vb-indexSearchField .vb-indexSearchField__input::-webkit-search-cancel-button {\n cursor: pointer;\n}\n.vb-indexSearchField .vb-indexSearchField__input + svg {\n fill: #e9e7e7;\n}\n.vb-indexSearchField .vb-indexSearchField__input--widthXSmall {\n width: 4rem;\n}\n.vb-indexSearchField .vb-indexSearchField__input--widthSmall {\n width: 7rem;\n}\n.vb-indexSearchField .vb-indexSearchField__input--widthMedium {\n width: 11rem;\n}\n.vb-indexSearchField .vb-indexSearchField__input--widthLarge {\n width: 24rem;\n}\n.vb-indexSearchField .vb-indexSearchField__input--widthFull {\n width: 100%;\n}\n.vb-indexSearchField .vb-indexSearchField__input--searchAreaClosed {\n width: 2.25rem;\n padding: 0;\n cursor: pointer;\n}\n.vb-indexSearchField .vb-indexSearchField__input--searchAreaClosed::placeholder {\n opacity: 0;\n}\n.vb-indexSearchField .vb-indexSearchField__input:not(.vb-indexSearchField .vb-indexSearchField__input--disabled):hover {\n background-color: #dce8ff;\n border-color: #1e46aa;\n}\n.vb-indexSearchField .vb-indexSearchField__input:not(.vb-indexSearchField .vb-indexSearchField__input--disabled):hover + .vb-indexSearchField__icon {\n fill: #1e46aa;\n}\n.vb-indexSearchField .vb-indexSearchField__dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n opacity: 0;\n}\n.vb-indexSearchField .vb-indexSearchField__dropdown--searchAreaOpen {\n transition: opacity 0.3s 0.3s ease;\n opacity: 1;\n}\n.vb-indexSearchField .vb-indexSearchField__dropdownItem {\n margin: 0.25em;\n padding: 0.25em;\n cursor: pointer;\n}\n\n/** @define lineSeparatedList */\n.vb-lineSeparatedList__list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.vb-lineSeparatedList__list__listItem {\n background-color: #fff;\n border-top: 1px solid #e9e7e7;\n padding: 1rem;\n}\n\n.vb-listButtonSelector__button--disabled, .vb-button--disabled, .vb-pagerButton--disabled, .vb-iconOnlyButton--disabled, .vb-dropdownItem--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-listButtonSelector__button--disabled:hover, .vb-button--disabled:hover, .vb-pagerButton--disabled:hover, .vb-iconOnlyButton--disabled:hover, .vb-dropdownItem--disabled:hover {\n cursor: not-allowed;\n}\n\n.vb-listButtonSelector {\n position: relative;\n display: inline-block;\n}\n.vb-listButtonSelector__popupWrapper {\n position: absolute;\n top: 100%;\n min-width: 100%;\n}\n.vb-listButtonSelector__button {\n display: inline-block;\n padding: 1rem;\n padding-right: 3em;\n background-color: #fff;\n border: solid 1px #285ac8;\n border-radius: 0.5rem;\n font-size: 1rem;\n font-weight: bold;\n color: #285ac8;\n cursor: pointer;\n line-height: 1;\n}\n.vb-listButtonSelector__button--isOpen {\n background-color: #f0eded;\n}\n.vb-listButtonSelector__icon {\n position: absolute;\n display: inline-block;\n font-size: 1.5em;\n right: 0.5em;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/** @define listTable */\n.vb-listTable__table,\n.vb-groupedListTable__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n height: 1px;\n}\n.vb-listTable--fitContent,\n.vb-groupedListTable--fitContent {\n max-width: fit-content;\n}\n\n.vb-listCard {\n position: relative;\n background-color: #fff;\n border-radius: 0.75rem;\n box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);\n padding: 1rem;\n}\n.vb-listCard--disabled {\n opacity: 0.5;\n}\n.vb-listCard__link, .vb-listCard__button {\n cursor: pointer;\n text-decoration: none;\n color: #323232;\n display: block;\n text-align: left;\n padding: 0;\n border: 0;\n background-color: #fff;\n}\n.vb-listCard__link--disabled, .vb-listCard__button--disabled {\n cursor: not-allowed;\n}\n.vb-listCard__link::before, .vb-listCard__button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n border-radius: 0.75rem;\n}\n.vb-listCard__link--current::after, .vb-listCard__button--current::after {\n content: \"\";\n height: 100%;\n width: 4px;\n background-color: #2864f0;\n position: absolute;\n top: 0;\n left: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n.vb-listCard__link:not(.vb-listCard__link--disabled):hover::before {\n background-color: #f2f5fc;\n}\n.vb-listCard__button:not(.vb-listCard__button--disabled):hover::before {\n background-color: #f2f5fc;\n}\n.vb-listCard__content {\n position: relative;\n z-index: 1;\n margin-right: 1.5rem;\n display: flex;\n}\n.vb-listCard__thumbnail {\n margin-right: 1rem;\n flex-shrink: 0;\n flex-grow: 0;\n max-width: 5rem;\n}\n.vb-listCard__thumbnail * {\n max-width: 100%;\n max-height: 5rem;\n}\n.vb-listCard__thumbnail--large {\n margin-right: 1rem;\n flex-shrink: 0;\n flex-grow: 0;\n max-width: 12rem;\n}\n.vb-listCard__thumbnail--large * {\n max-width: 100%;\n max-height: 12rem;\n}\n@media (max-width: 48rem) {\n .vb-listCard__thumbnail--large {\n max-width: 7.2rem;\n }\n .vb-listCard__thumbnail--large * {\n max-height: 7.2rem;\n }\n}\n@media (max-width: 48rem) {\n .vb-listCard__thumbnail {\n max-width: 3rem;\n }\n .vb-listCard__thumbnail * {\n max-height: 3rem;\n }\n}\n.vb-listCard__main {\n flex-shrink: 1;\n flex-grow: 1;\n}\n.vb-listCard__icon {\n position: absolute;\n z-index: 1;\n top: 50%;\n transform: translateY(-50%);\n right: 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n}\n.vb-listCard__title {\n font-size: 1rem;\n font-weight: bold;\n}\n.vb-listCard__actions {\n position: relative;\n z-index: 1;\n padding: 0.5rem 1rem 1rem;\n margin: 0.5rem -1rem -1rem;\n width: fit-content;\n}\n\n.vb-messageBlock {\n container-type: inline-size;\n width: 100%;\n}\n.vb-messageBlock--hover {\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1), 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);\n border-radius: 0.5rem;\n z-index: 500;\n}\n.vb-messageBlock__inner {\n border: 1px solid #d7d2d2;\n background-color: #f7f5f5;\n border-radius: 0.5rem;\n box-sizing: border-box;\n display: grid;\n display: -ms-grid;\n grid-template-columns: 1fr auto;\n -ms-grid-columns: 1fr auto;\n padding: 1rem;\n}\n@media (max-width: 48rem) {\n .vb-messageBlock__inner--responsive {\n padding: 0.5rem;\n display: block;\n }\n}\n@container (max-width: 48rem) {\n .vb-messageBlock__inner {\n padding: 0.5rem;\n display: block;\n }\n}\n.vb-messageBlock__inner--alert {\n border: 1px solid #dc1e32;\n background-color: #fad2d7;\n}\n.vb-messageBlock__inner--notice {\n border: 1px solid #be8c14;\n background-color: #fff0d2;\n}\n.vb-messageBlock__inner--success, .vb-messageBlock__inner--assistance, .vb-messageBlock__inner--discovery {\n border: 1px solid #285ac8;\n background-color: #dce8ff;\n}\n.vb-messageBlock__message {\n -ms-grid-column: 1;\n grid-column: 1/2;\n}\n.vb-messageBlock__buttons {\n -ms-grid-column: 2;\n grid-column: 2/3;\n margin-top: -0.375rem;\n height: 1.5rem;\n}\n@media (max-width: 48rem) {\n .vb-messageBlock__buttons--responsive {\n margin-top: 0.25rem;\n margin-left: 1rem;\n height: auto;\n }\n}\n@container (max-width: 48rem) {\n .vb-messageBlock__buttons {\n margin-top: 0.25rem;\n margin-left: 1rem;\n height: auto;\n }\n}\n.vb-messageBlock__linkButton, .vb-messageBlock__closeButton {\n display: inline-block;\n white-space: nowrap;\n margin-top: -0.375rem;\n height: 1.5rem;\n}\n\n.vb-messageBlockInternalMessage__inner {\n display: flex;\n flex: 1 auto;\n align-items: flex-start;\n}\n.vb-messageBlockInternalMessage__icon {\n display: inline-block;\n margin-right: 0.5rem;\n font-size: 1.5rem;\n min-width: 1.5rem;\n}\n.vb-messageBlockInternalMessage__icon--alert {\n color: #dc1e32;\n}\n.vb-messageBlockInternalMessage__icon--notice {\n color: #be8c14;\n}\n.vb-messageBlockInternalMessage__icon--success, .vb-messageBlockInternalMessage__icon--assistance, .vb-messageBlockInternalMessage__icon--discovery {\n color: #285ac8;\n}\n.vb-messageBlockInternalMessage__icon--explanatory, .vb-messageBlockInternalMessage__icon--info {\n color: #8c8989;\n}\n.vb-messageBlockInternalMessage__content {\n display: inline-block;\n font-size: 0.875rem;\n line-height: 1.5;\n margin-top: 0.09375rem;\n}\n\n.vb-floatingMessageBlockPortal {\n position: fixed;\n top: 2rem;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: 4000;\n}\n\n.vb-floatingMessageBlock {\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1), 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);\n border-radius: 1rem;\n margin: auto;\n min-width: 16rem;\n max-width: calc(100vw - 3rem);\n width: 50rem;\n transition-property: opacity;\n transition-duration: 0.3s;\n}\n.vb-floatingMessageBlock .vb-messageBlock__inner {\n border-radius: 1rem;\n}\n.vb-floatingMessageBlock__animation-enter {\n opacity: 0;\n}\n.vb-floatingMessageBlock__animation-enter-active {\n opacity: 1;\n}\n.vb-floatingMessageBlock__animation-exit {\n opacity: 0;\n}\n\n.vb-pageSelector {\n display: inline-block;\n}\n.vb-pageSelector__currentPage {\n font-weight: bold;\n font-size: 0.875rem;\n padding: 0 0.5rem;\n}\n\n.vb-messageIcon {\n position: relative;\n display: inline-block;\n width: 1.5rem;\n min-height: 1em;\n}\n.vb-messageIcon__control {\n cursor: pointer;\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.vb-messageIcon__icon {\n width: 1.5rem;\n height: 1.5rem;\n color: #8c8989;\n display: inline-block;\n vertical-align: middle;\n}\n.vb-messageIcon__icon--error {\n color: #dc1e32;\n}\n.vb-messageIcon__icon--notice {\n color: #be8c14;\n}\n.vb-messageIcon__icon--success {\n color: #285ac8;\n}\n.vb-messageIcon--small .vb-messageIcon__icon {\n width: 1rem;\n height: 1rem;\n}\n\n.vb-messageIconMessageWrapper--hidden {\n display: none;\n}\n\n.vb-messageIconMessage {\n position: relative;\n width: 1.5rem;\n}\n\n.vb-fullScreenModal {\n z-index: 700;\n background-color: #fff;\n}\n.vb-fullScreenModal__inner {\n display: flex;\n flex-direction: column;\n width: 100vw;\n height: 100vh;\n}\n.vb-fullScreenModal__header {\n padding: 1.5rem;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #e9e7e7;\n}\n.vb-fullScreenModal__headerInnerContent {\n flex-grow: 1;\n}\n.vb-fullScreenModal__body {\n padding: 1.5rem 1.5rem 1.5rem 4.75rem;\n overflow: auto;\n}\n\n.vb-numericTable__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n}\n\n.vb-noSearchResults,\n.vb-noDataCreated {\n text-align: center;\n}\n.vb-noSearchResults__image,\n.vb-noDataCreated__image {\n margin-bottom: 1rem;\n}\n\n.vb-pager {\n text-align: center;\n}\n.vb-pager .vb-pager__list {\n padding: 0;\n margin: 1em auto;\n}\n.vb-pager .vb-pager__break {\n display: inline-block;\n margin: 0 0.5em 0 -0.5em;\n vertical-align: middle;\n}\n.vb-pager .vb-pager__icon--arrow {\n transform: scale(1.5);\n vertical-align: middle;\n}\n\n.vb-selectableButton__button {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n padding: 0 1rem;\n text-align: center;\n text-decoration: none;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: background-color, color, box-shadow, border-color;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n font-size: 0.875rem;\n height: 2.25rem;\n vertical-align: middle;\n white-space: nowrap;\n color: #323232;\n background-color: #f7f5f5;\n}\n.vb-selectableButton__button .vb-selectableButton__icon {\n width: 1.375rem;\n height: 1.375rem;\n fill: #285ac8;\n}\n.vb-selectableButton__button:hover {\n background-color: #f0eded;\n}\n.vb-selectableButton__button:active {\n background-color: #e9e7e7;\n}\n.vb-selectableButton__button.active {\n background-color: #ebf3ff;\n}\n.vb-selectableButton__button.active .vb-selectableButton__label {\n color: #285ac8;\n font-weight: bold;\n}\n.vb-selectableButton__button.active:hover {\n background-color: #dce8ff;\n}\n.vb-selectableButton__button.active:active {\n background-color: #aac8ff;\n}\n.vb-selectableButton__button.active:focus {\n outline: none;\n box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2864f0, 0 0 0 4px #fff;\n background-color: #aac8ff;\n}\n.vb-selectableButton__badge {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1.25rem;\n margin-left: -0.25rem;\n padding: 0 0.625rem;\n color: #1e1e1e;\n background-color: #dcdcdc;\n border-radius: 0.75rem;\n}\n\n.vb-stackedBarChart__container {\n height: 1.5rem;\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n background-color: #fff;\n border: 1px solid #bebaba;\n border-radius: 99rem;\n list-style-type: none;\n padding-inline-start: 0;\n margin-block: 0;\n}\n.vb-stackedBarChart__item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n.vb-stackedBarChart__item + .vb-stackedBarChart__item {\n border-left: 1px solid #8c8989;\n}\n.vb-stackedBarChart__item__button {\n width: 100%;\n height: calc(1.5rem - 2px);\n border: none;\n padding: 0 0.5rem;\n font-size: 0.75rem;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.vb-stackedBarChart__item__button:focus {\n outline: none;\n box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #2864f0, inset 0 0 0 4px #fff;\n}\n.vb-stackedBarChart__item__button--first {\n border-radius: 99rem 0 0 99rem;\n}\n.vb-stackedBarChart__item__button--last {\n border-radius: 0 99rem 99rem 0;\n}\n.vb-stackedBarChart__item__button--RE {\n background-color: #fad2d7;\n color: #6e0f19;\n}\n.vb-stackedBarChart__item__button--OR {\n background-color: #ffe1d2;\n color: #7d320a;\n}\n.vb-stackedBarChart__item__button--YE {\n background-color: #fff0d2;\n color: #825a0f;\n}\n.vb-stackedBarChart__item__button--YG {\n background-color: #e6f0d2;\n color: #3c5f14;\n}\n.vb-stackedBarChart__item__button--GR {\n background-color: #cdebd7;\n color: #004b1e;\n}\n.vb-stackedBarChart__item__button--BG {\n background-color: #cdf0f0;\n color: #146464;\n}\n.vb-stackedBarChart__item__button--PU {\n background-color: #e6d7fa;\n color: #3c1e73;\n}\n.vb-stackedBarChart__item__button--GY {\n background-color: #dcdcdc;\n color: #1e1e1e;\n}\n\n/** @define statusSelector */\n.vb-statusSelector {\n display: flex;\n align-items: center;\n cursor: pointer;\n border-color: transparent;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color;\n}\n.vb-statusSelector--disabled {\n opacity: 0.5;\n}\n.vb-statusSelector__dropdownIcon {\n width: 1rem;\n height: 1rem;\n margin-left: 0.25rem;\n margin-right: -0.25rem;\n}\n.vb-statusSelector--typeDone {\n border-color: #8c8989;\n color: #6e6b6b;\n}\n.vb-statusSelector--typeDone__dropdownIcon {\n fill: #6e6b6b;\n}\n.vb-statusSelector--typeDone:hover {\n background-color: #f0eded;\n}\n.vb-statusSelector--typeSuccess {\n border-color: #285ac8;\n color: #285ac8;\n}\n.vb-statusSelector--typeSuccess__dropdownIcon {\n fill: #285ac8;\n}\n.vb-statusSelector--typeSuccess:hover {\n background-color: #dce8ff;\n}\n.vb-statusSelector--typeProgress {\n border-color: #be8c14;\n color: #825a0f;\n}\n.vb-statusSelector--typeProgress__dropdownIcon {\n fill: #825a0f;\n}\n.vb-statusSelector--typeProgress:hover {\n background-color: #fff0d2;\n}\n.vb-statusSelector--typeRequired {\n border-color: #dc1e32;\n color: #dc1e32;\n}\n.vb-statusSelector--typeRequired__dropdownIcon {\n fill: #dc1e32;\n}\n.vb-statusSelector--typeRequired:hover {\n background-color: #fad2d7;\n}\n.vb-statusSelector--typeDisabled {\n background-color: #6e6b6b;\n border-width: 0;\n}\n.vb-statusSelector--typeDisabled__dropdownIcon {\n fill: #fff;\n}\n.vb-statusSelector--typeDisabled:hover {\n background-color: #4f4d4d;\n}\n.vb-statusSelector--typeEmphasis {\n background-color: #285ac8;\n border-width: 0;\n}\n.vb-statusSelector--typeEmphasis__dropdownIcon {\n fill: #fff;\n}\n.vb-statusSelector--typeEmphasis:hover {\n background-color: #1e4395;\n}\n.vb-statusSelector--typeWarning {\n background-color: #825a0f;\n border-width: 0;\n}\n.vb-statusSelector--typeWarning__dropdownIcon {\n fill: #fff;\n}\n.vb-statusSelector--typeWarning:hover {\n background-color: #4b3409;\n}\n.vb-statusSelector--typeError {\n background-color: #dc1e32;\n border-width: 0;\n}\n.vb-statusSelector--typeError__dropdownIcon {\n fill: #fff;\n}\n.vb-statusSelector--typeError:hover {\n background-color: #a61726;\n}\n\n.vb-stepper {\n display: flex;\n flex-wrap: nowrap;\n justify-content: center;\n padding: 0;\n gap: 2rem;\n}\n.vb-stepper__listItem {\n list-style-type: none;\n width: 4rem;\n position: relative;\n}\n.vb-stepper__listItem:not(:last-child)::after {\n content: \"\";\n width: 3rem;\n height: 0.25rem;\n background-color: #6e6b6b;\n display: block;\n position: absolute;\n left: calc(100% - 0.5rem);\n top: 1.5rem;\n}\n.vb-stepper__listContent {\n position: relative;\n z-index: 1;\n text-align: center;\n}\n.vb-stepper--small {\n gap: 1.5rem;\n}\n.vb-stepper--small .vb-stepper__listItem {\n width: 3rem;\n}\n.vb-stepper--small .vb-stepper__listItem:not(:last-child)::after {\n width: 2.5rem;\n top: 1rem;\n}\n\n.vb-verticalSteps__number {\n user-select: none;\n}\n.vb-verticalSteps__step {\n display: grid;\n grid-template-columns: 3rem 1fr;\n column-gap: 0.5rem;\n row-gap: 0;\n}\n.vb-verticalSteps__step:not(:last-child)::after {\n content: \"\";\n background: #6e6b6b;\n grid-column: 1/2;\n grid-row: 2/3;\n width: 0.25rem;\n margin: 0 auto;\n}\n.vb-verticalSteps__title {\n grid-column: 2/3;\n font: bold 1rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #323232;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.vb-verticalSteps__title--future {\n color: #6e6b6b;\n font-weight: normal;\n}\n.vb-verticalSteps__content {\n grid-column: 2/3;\n grid-row: 2/3;\n padding: 0 0 1.5rem;\n}\n.vb-verticalSteps__actions {\n margin: 1rem 0 0 0;\n}\n\n.vb-tabBar {\n border-bottom: 1px solid #e9e7e7;\n padding: 0 1.5rem;\n background: #fff;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n}\n.vb-tabBar__buttonGroup {\n margin-left: 1rem;\n}\n.vb-tabBar__buttonGroup button {\n margin-left: 0.5rem;\n}\n\n.vb-tagBox {\n display: inline-block;\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 0.5rem;\n border: 1px solid #8c8989;\n border-radius: 99rem;\n height: 1.5rem;\n line-height: 1.5rem;\n font-size: 1.5rem;\n}\n.vb-tagBox--removable {\n padding-right: 0.25rem;\n}\n.vb-tagBox--maxWidthSmall {\n max-width: 10rem;\n}\n.vb-tagBox--maxWidthMedium {\n max-width: 20rem;\n}\n.vb-tagBox--maxWidthLarge {\n max-width: 30rem;\n}\n.vb-tagBox--success {\n border-color: #285ac8;\n}\n.vb-tagBox--error {\n border-color: #dc1e32;\n}\n.vb-tagBox--RE {\n background-color: #fad2d7;\n border-color: #fad2d7;\n}\n.vb-tagBox--OR {\n background-color: #ffe1d2;\n border-color: #ffe1d2;\n}\n.vb-tagBox--YE {\n background-color: #fff0d2;\n border-color: #fff0d2;\n}\n.vb-tagBox--YG {\n background-color: #e6f0d2;\n border-color: #e6f0d2;\n}\n.vb-tagBox--GR {\n background-color: #cdebd7;\n border-color: #cdebd7;\n}\n.vb-tagBox--BG {\n background-color: #cdf0f0;\n border-color: #cdf0f0;\n}\n.vb-tagBox--PU {\n background-color: #e6d7fa;\n border-color: #e6d7fa;\n}\n.vb-tagBox--GY {\n background-color: #dcdcdc;\n border-color: #dcdcdc;\n}\n.vb-tagBox__inner {\n display: flex;\n align-items: center;\n margin-top: -1px;\n height: 1.5rem;\n}\n.vb-tagBox__type {\n display: inline-block;\n font-size: 0.75rem;\n color: #6e6b6b;\n margin-right: 0.5rem;\n white-space: nowrap;\n}\n.vb-tagBox__type--RE {\n color: #6e0f19;\n}\n.vb-tagBox__type--OR {\n color: #7d320a;\n}\n.vb-tagBox__type--YE {\n color: #825a0f;\n}\n.vb-tagBox__type--YG {\n color: #3c5f14;\n}\n.vb-tagBox__type--GR {\n color: #004b1e;\n}\n.vb-tagBox__type--BG {\n color: #146464;\n}\n.vb-tagBox__type--PU {\n color: #3c1e73;\n}\n.vb-tagBox__type--GY {\n color: #1e1e1e;\n}\n.vb-tagBox__body {\n font-size: 0.875rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.vb-tagBox__body--success {\n color: #285ac8;\n}\n.vb-tagBox__body--error {\n color: #dc1e32;\n}\n.vb-tagBox__body--RE {\n color: #6e0f19;\n}\n.vb-tagBox__body--OR {\n color: #7d320a;\n}\n.vb-tagBox__body--YE {\n color: #825a0f;\n}\n.vb-tagBox__body--YG {\n color: #3c5f14;\n}\n.vb-tagBox__body--GR {\n color: #004b1e;\n}\n.vb-tagBox__body--BG {\n color: #146464;\n}\n.vb-tagBox__body--PU {\n color: #3c1e73;\n}\n.vb-tagBox__body--GY {\n color: #1e1e1e;\n}\n.vb-tagBox__removeButton {\n font-size: 0;\n color: #8c8989;\n margin-left: 0.5rem;\n height: 1.5rem;\n width: 1.5rem;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.vb-tagBox__removeButton:hover {\n color: #6d6b6b;\n}\n.vb-tagBox__removeButton--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-tagBox__removeButton--disabled:hover {\n cursor: not-allowed;\n}\n.vb-tagBox__removeButton--RE {\n color: #6e0f19;\n}\n.vb-tagBox__removeButton--OR {\n color: #7d320a;\n}\n.vb-tagBox__removeButton--YE {\n color: #825a0f;\n}\n.vb-tagBox__removeButton--YG {\n color: #3c5f14;\n}\n.vb-tagBox__removeButton--GR {\n color: #004b1e;\n}\n.vb-tagBox__removeButton--BG {\n color: #146464;\n}\n.vb-tagBox__removeButton--PU {\n color: #3c1e73;\n}\n.vb-tagBox__removeButton--GY {\n color: #1e1e1e;\n}\n.vb-tagBox__removeIcon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.vb-miniTag {\n display: inline-block;\n height: 1.25rem;\n max-width: 100%;\n box-sizing: border-box;\n padding: 0 0.25rem;\n position: relative;\n border-radius: 0.25rem;\n font-size: 0.875rem;\n font-family: \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n}\n.vb-miniTag--RE {\n background-color: #fad2d7;\n color: #6e0f19;\n}\n.vb-miniTag--OR {\n background-color: #ffe1d2;\n color: #7d320a;\n}\n.vb-miniTag--YE {\n background-color: #fff0d2;\n color: #825a0f;\n}\n.vb-miniTag--YG {\n background-color: #e6f0d2;\n color: #3c5f14;\n}\n.vb-miniTag--GR {\n background-color: #cdebd7;\n color: #004b1e;\n}\n.vb-miniTag--BG {\n background-color: #cdf0f0;\n color: #146464;\n}\n.vb-miniTag--PU {\n background-color: #e6d7fa;\n color: #3c1e73;\n}\n.vb-miniTag--GY {\n background-color: #dcdcdc;\n color: #1e1e1e;\n}\n.vb-miniTag__inner {\n display: flex;\n align-items: center;\n height: 1.25rem;\n}\n.vb-miniTag__body {\n line-height: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.vb-miniTag__removeButton {\n width: 1rem;\n height: 1rem;\n position: relative;\n cursor: pointer;\n border: 0;\n background-color: transparent;\n padding: 0;\n flex-shrink: 0;\n margin-left: 0.25rem;\n}\n.vb-miniTag__removeButton::before {\n content: \"\";\n position: absolute;\n width: 1.5rem;\n height: 1.5rem;\n top: -0.25rem;\n right: -0.25rem;\n}\n.vb-miniTag__removeButton--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-miniTag__removeButton--disabled:hover {\n cursor: not-allowed;\n}\n.vb-miniTag__removeButton--RE {\n color: #6e0f19;\n}\n.vb-miniTag__removeButton--OR {\n color: #7d320a;\n}\n.vb-miniTag__removeButton--YE {\n color: #825a0f;\n}\n.vb-miniTag__removeButton--YG {\n color: #3c5f14;\n}\n.vb-miniTag__removeButton--GR {\n color: #004b1e;\n}\n.vb-miniTag__removeButton--BG {\n color: #146464;\n}\n.vb-miniTag__removeButton--PU {\n color: #3c1e73;\n}\n.vb-miniTag__removeButton--GY {\n color: #1e1e1e;\n}\n.vb-miniTag__removeIcon {\n width: 1rem;\n height: 1rem;\n}\n\n.vb-withAccordionContent {\n display: inline-block;\n}\n\n.vb-withBalloon {\n display: inline-block;\n}\n.vb-withBalloon__contentWrapper {\n pointer-events: auto;\n}\n.vb-withBalloon__balloonWrapper--hidden {\n width: 1px;\n height: 1px;\n overflow: hidden;\n position: absolute;\n clip: rect(1px 1px 1px 1px);\n}\n\n.vb-withPopup {\n display: inline-block;\n}\n.vb-withPopup__contentWrapper {\n display: block;\n}\n.vb-withPopup__popupWrapper {\n position: relative;\n transition-property: opacity;\n transition-duration: 0.3s;\n}\n.vb-withPopup__popup {\n position: absolute;\n top: 0;\n left: 0;\n}\n.vb-withPopup__popup--rightAligned {\n left: auto;\n right: 0;\n}\n.vb-withPopup__animation-enter {\n opacity: 0;\n}\n.vb-withPopup__animation-enter-active {\n opacity: 1;\n}\n.vb-withPopup__animation-exit {\n opacity: 0;\n}\n\n.vb-withTOC {\n display: flex;\n gap: 0 1rem;\n}\n.vb-withTOC__toc {\n flex-grow: 0;\n flex-shrink: 0;\n width: 11rem;\n}\n.vb-withTOC__toc__container {\n position: sticky;\n top: 0;\n overflow-y: auto;\n max-height: 100vh;\n margin: -1rem 0 0;\n padding: 0;\n list-style: none;\n}\n.vb-withTOC__toc__link {\n display: block;\n margin: 1rem 0;\n padding: 0.25rem 1rem;\n text-decoration: none;\n font: bold 1rem/1.5 \"-apple-system\", BlinkMacSystemFont, \"Helvetica Neue\", \"ヒラギノ角ゴ ProN\", Hiragino Kaku Gothic ProN, Arial, \"メイリオ\", Meiryo, sans-serif;\n color: #323232;\n border-radius: 0.25rem;\n cursor: pointer;\n}\n.vb-withTOC__toc__link:hover {\n background-color: #f7f5f5;\n}\n.vb-withTOC__toc__link--current {\n background-color: #ebf3ff;\n color: #2864f0;\n}\n.vb-withTOC__toc__link--current:hover {\n background-color: #ebf3ff;\n}\n.vb-withTOC__contents {\n flex-grow: 1;\n}\n.vb-withTOC__contents__section {\n overflow-y: hidden;\n outline: none;\n}\n\n.vb-withFilterableDropdown__popup {\n min-width: 11rem;\n padding: 1rem 1rem 0 1rem;\n}\n.vb-withFilterableDropdown__note {\n padding-bottom: 1rem;\n}\n.vb-withFilterableDropdown__footer {\n border-top: 1px solid #e9e7e7;\n margin: 0 -1rem;\n padding: 1rem;\n}\n\n.vb-personTag {\n display: inline-block;\n background-color: #fff;\n box-sizing: border-box;\n padding-left: 0.25rem;\n padding-right: 0.5rem;\n border: 1px solid #8c8989;\n border-radius: 99rem;\n height: 2rem;\n line-height: 2rem;\n font-size: 2rem;\n}\n.vb-personTag--removable {\n padding-right: 0.25rem;\n}\n.vb-personTag--success {\n border-color: #285ac8;\n}\n.vb-personTag--error {\n border-color: #dc1e32;\n}\n.vb-personTag__inner {\n display: flex;\n align-items: center;\n margin-top: -1px;\n height: 2rem;\n}\n.vb-personTag__type {\n display: inline-block;\n font-size: 0.75rem;\n color: #6e6b6b;\n margin-right: 0.5rem;\n white-space: nowrap;\n}\n.vb-personTag__body {\n font-size: 0.875rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.vb-personTag__body--success {\n color: #285ac8;\n}\n.vb-personTag__body--error {\n color: #dc1e32;\n}\n.vb-personTag__removeButton {\n font-size: 0;\n color: #8c8989;\n margin-left: 0.5rem;\n height: 1.5rem;\n width: 1.5rem;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.vb-personTag__removeButton:hover {\n color: #6d6b6b;\n}\n.vb-personTag__removeButton--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n.vb-personTag__removeButton--disabled:hover {\n cursor: not-allowed;\n}\n.vb-personTag__removeIcon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.vb-popupProgressBar {\n padding: 0.5rem 1rem;\n display: flex;\n align-items: center;\n min-width: 20rem;\n max-width: 40rem;\n}\n.vb-popupProgressBar__contents {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.vb-popupProgressBar__message {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.vb-popupProgressBar__message-block {\n display: flex;\n align-items: center;\n}\n.vb-popupProgressBar__icon {\n flex-shrink: 0;\n align-self: flex-start;\n}\n.vb-popupProgressBar__close {\n flex-shrink: 0;\n}\n\n.vb-popupProgressBarPortal {\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 4000;\n}\n.vb-popupProgressBarPortal__element {\n padding: 0.75rem 1rem 0.5rem 1rem;\n}\n\n.vb-skeltonPageTitle {\n padding: 0.375rem 0;\n max-height: 1.5rem;\n}\n\n.vb-skeltonSectionTitle {\n padding: 0.25rem 0;\n max-height: 1rem;\n}\n\n.vb-skeltonParagraph {\n padding: 0.21875rem 0;\n max-height: 0.875rem;\n}\n\n.vb-skeltonRectangle {\n max-height: 5rem;\n}\n\n.vb-skeltonBlock {\n max-height: 2.25rem;\n}\n.vb-skeltonBlock--small {\n max-height: 1.5rem;\n}\n.vb-skeltonBlock--large {\n max-height: 3rem;\n}\n\n.vb-skeltonIcon {\n max-height: 2rem;\n}\n.vb-skeltonIcon--small {\n max-height: 1.5rem;\n}\n.vb-skeltonIcon--large {\n max-height: 3rem;\n}\n\n.vb-skeltonCircle {\n max-height: 2rem;\n}\n.vb-skeltonCircle--small {\n max-height: 1.5rem;\n}\n.vb-skeltonCircle--large {\n max-height: 3rem;\n}\n.vb-skeltonCircle--xlarge {\n max-height: 6rem;\n}\n\n.vb-skeletonInput {\n align-items: center;\n background-color: #fff;\n border-radius: 0.5rem;\n border: 1px solid #dcdcdc;\n box-sizing: border-box;\n display: inline-flex;\n height: 2.25rem;\n overflow: hidden;\n padding: 0 0.5rem;\n vertical-align: inherit;\n}\n.vb-skeletonInput--small {\n height: 1.5rem;\n padding: 0 0.5rem;\n}\n.vb-skeletonInput--large {\n height: 3rem;\n padding: 0 1rem;\n}\n.vb-skeletonInput--widthXSmall {\n width: 4rem;\n}\n.vb-skeletonInput--widthSmall {\n width: 7rem;\n}\n.vb-skeletonInput--widthMedium {\n width: 11rem;\n}\n.vb-skeletonInput--widthLarge {\n width: 24rem;\n}\n.vb-skeletonInput--widthFull {\n width: 100%;\n}\n\n.vb-skeletonStackedBarChart {\n height: 1.5rem;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding: 0 0.5rem;\n background-color: #fff;\n border: 1px solid #bebaba;\n border-radius: 99rem;\n}\n\n.vb-hierarchicalTable__table {\n width: 100%;\n border: none;\n border-collapse: collapse;\n border-spacing: 0;\n background-color: #fff;\n}\n\n.vb-hierarchicalTableRowHeaderCell {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n.vb-hierarchicalTableRowHeaderCell--level1 {\n margin-left: 0rem;\n}\n.vb-hierarchicalTableRowHeaderCell--foldable--level1 {\n margin-left: 2rem;\n}\n.vb-hierarchicalTableRowHeaderCell--level2 {\n margin-left: 2rem;\n}\n.vb-hierarchicalTableRowHeaderCell--foldable--level2 {\n margin-left: 4rem;\n}\n.vb-hierarchicalTableRowHeaderCell--level3 {\n margin-left: 4rem;\n}\n.vb-hierarchicalTableRowHeaderCell--foldable--level3 {\n margin-left: 6rem;\n}\n.vb-hierarchicalTableRowHeaderCell--level4 {\n margin-left: 6rem;\n}\n.vb-hierarchicalTableRowHeaderCell--foldable--level4 {\n margin-left: 8rem;\n}\n.vb-hierarchicalTableRowHeaderCell--level5 {\n margin-left: 8rem;\n}\n.vb-hierarchicalTableRowHeaderCell--foldable--level5 {\n margin-left: 10rem;\n}\n.vb-hierarchicalTableRowHeaderCell__button {\n cursor: pointer;\n color: #285ac8;\n display: inline;\n border: 0;\n background: none;\n padding: 0;\n}\n.vb-hierarchicalTableRowHeaderCell__button:hover {\n color: #1e4395;\n}\n.vb-hierarchicalTableRowHeaderCell__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.vb-propListForm {\n display: block;\n}\n.vb-propListForm__list {\n display: flex;\n}\n.vb-propListForm__list--wrap {\n display: flex;\n flex-wrap: wrap;\n}\n.vb-propListForm__item {\n display: flex;\n border-bottom: solid 1px #e9e7e7;\n align-items: flex-start;\n}\n.vb-propListForm__term {\n display: inline-block;\n min-height: 2.25rem;\n font-size: 0.875rem;\n vertical-align: middle;\n margin-right: 1rem;\n}\n.vb-propListForm__description {\n margin-left: 0;\n}\n.vb-propListForm__termInner, .vb-propListForm__descriptionInner {\n display: flex;\n align-items: center;\n height: 100%;\n min-height: 2.25rem;\n white-space: pre-line;\n}\n.vb-propListForm__termLabel {\n display: flex;\n align-items: flex-start;\n}\n.vb-propListForm__termIcons {\n display: flex;\n white-space: nowrap;\n align-items: center;\n}\n.vb-propListForm__field {\n display: flex;\n align-items: center;\n}\n" } ]