:root { --global-color-gray-gray000: #FFFFFF; --global-color-gray-gray010: #FAFAFA; --global-color-gray-gray020: #F6F6F6; --global-color-gray-gray030: #ECECEC; --global-color-gray-gray040: #E0E0E0; --global-color-gray-gray050: #D6D6D6; --global-color-gray-gray070: #BCBCBC; --global-color-gray-gray080: #989898; --global-color-gray-gray100: #6B6B6B; --global-color-gray-gray110: #474747; --global-color-gray-gray140: #212121; --global-color-gray-gray010-opacity095: #FAFAFAF2; --global-color-gray-gray020-opacity095: #F6F6F6F2; --global-color-blue-blue010: #ECF5FE; --global-color-blue-blue020: #C8E0FC; --global-color-blue-blue060: #348CF3; --global-color-blue-blue070: #0E72E6; --global-color-blue-blue080: #0D6CD9; --global-color-blue-blue090: #0B5DBC; --global-color-blue-blue100: #094F9F; --global-color-red-red010: #FCEEF0; --global-color-red-red020: #F7CCD2; --global-color-red-red060: #DB243C; --global-color-red-red070: #DB243C; --global-color-red-red080: #C11F35; --global-color-red-red090: #A61B2E; --global-color-red-red100: #8D1726; --global-color-green-green010: #DEF7EF; --global-color-green-green020: #B6EDDA; --global-color-green-green060: #208161; --global-color-green-green070: #208161; --global-color-green-green090: #196249; --global-color-green-green100: #14523D; --global-duration-300: 300ms; --global-timingFunction-easeIn: ease-in; --global-timingFunction-easeOut: ease-out; --global-fontFamily-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "BIZ UDPGothic", "Arial", "メイリオ", "Meiryo", sans-serif; --alias-color-primary: var(--global-color-blue-blue080); --alias-color-primary-hovered: var(--global-color-blue-blue090); --alias-color-primary-pressed: var(--global-color-blue-blue100); --alias-color-negative: var(--global-color-red-red080); --alias-color-negative-hovered: var(--global-color-red-red070); --alias-color-negative-pressed: var(--global-color-red-red090); --alias-color-required: var(--global-color-red-red080); --alias-color-success: var(--global-color-green-green070); --alias-color-success-hovered: var(--global-color-green-green060); --alias-color-success-pressed: var(--global-color-green-green090); --alias-color-focused: var(--global-color-blue-blue070); --alias-color-inactive: var(--global-color-blue-blue080); --alias-color-onPrimary: var(--global-color-gray-gray000); --alias-color-onNegative: var(--global-color-gray-gray000); --alias-color-onSuccess: var(--global-color-gray-gray000); --alias-color-onRequired: var(--global-color-gray-gray000); --alias-color-primaryTint: var(--global-color-blue-blue010); --alias-color-negativeTint: var(--global-color-red-red010); --alias-color-successTint: var(--global-color-green-green010); --alias-color-onPrimaryTint: var(--global-color-blue-blue100); --alias-color-onNegativeTint: var(--global-color-red-red090); --alias-color-onSuccessTint: var(--global-color-green-green090); --alias-color-link: var(--global-color-blue-blue080); --alias-color-text-main: var(--global-color-gray-gray140); --alias-color-text-label: var(--global-color-gray-gray110); --alias-color-text-detail: var(--global-color-gray-gray100); --alias-color-text-disabled: var(--global-color-gray-gray070); --alias-color-text-primary: var(--global-color-blue-blue080); --alias-color-icon-main: var(--global-color-gray-gray140); --alias-color-icon-label: var(--global-color-gray-gray110); --alias-color-icon-detail: var(--global-color-gray-gray100); --alias-color-icon-disabled: var(--global-color-gray-gray070); --alias-color-icon-primary: var(--global-color-blue-blue080); --alias-color-background-base-default: var(--global-color-gray-gray010); --alias-color-background-base-gray: var(--global-color-gray-gray020); --alias-color-background-base-translucent-default: var(--global-color-gray-gray010-opacity095); --alias-color-background-base-translucent-gray: var(--global-color-gray-gray020-opacity095); --alias-color-background-content-default: var(--global-color-gray-gray000); --alias-color-background-content-gray: var(--global-color-gray-gray030); --alias-color-background-content-hovered: var(--global-color-blue-blue010); --alias-color-background-content-pressed: var(--global-color-blue-blue020); --alias-color-background-disabled: var(--global-color-gray-gray040); --alias-color-background-header-default: var(--alias-color-background-base-default); --alias-color-background-header-light: var(--global-color-gray-gray000); --alias-color-background-mask-default: #00000033; --alias-color-background-white: #FFF; --alias-color-border-default: var(--global-color-gray-gray070); --alias-color-border-light: var(--global-color-gray-gray040); --alias-color-border-disabled: var(--global-color-gray-gray030); --alias-color-border-primary: var(--global-color-blue-blue080); --alias-color-transparent: transparent; --alias-shadow-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --alias-shadow-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --alias-shadow-level3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); --alias-shadow-level4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); --alias-shadow-level5: 0 1px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15); --alias-dimension-borderWidth-none: 0; --alias-dimension-borderWidth-sizeS: 1px; --alias-dimension-borderWidth-sizeM: 2px; --alias-dimension-borderWidth-sizeL: 4px; --alias-dimension-control-sizeXXS: 1.5rem; --alias-dimension-control-sizeXS: 1.75rem; --alias-dimension-control-sizeS: 2rem; --alias-dimension-control-sizeM: 2.25rem; --alias-dimension-control-sizeL: 2.5rem; --alias-dimension-control-sizeXL: 3rem; --alias-dimension-icon-sizeS: 1.125rem; --alias-dimension-icon-sizeM: 1.5rem; --alias-dimension-icon-label-sizeXXS: 1rem; --alias-dimension-icon-label-sizeXS: 1.0675rem; --alias-dimension-icon-label-sizeS: 1.125rem; --alias-dimension-icon-label-sizeM: 1.375rem; --alias-dimension-icon-label-sizeL: 1.5rem; --alias-dimension-icon-label-sizeXL: 1.75rem; --alias-dimension-lineHeight-sizeXXS: 1; --alias-dimension-lineHeight-sizeS: 1.25; --alias-dimension-lineHeight-sizeM: 1.65; --alias-dimension-borderRadius-sizeS: 0.125rem; --alias-dimension-borderRadius-sizeM: 0.25rem; --alias-dimension-borderRadius-sizeL: 0.5rem; --alias-dimension-borderRadius-sizeXL: 1.5rem; --alias-dimension-borderRadius-circle: 50%; --alias-dimension-space-sizeXXXS: 0.125rem; --alias-dimension-space-sizeXXS: 0.25rem; --alias-dimension-space-sizeXS: 0.5rem; --alias-dimension-space-sizeS: 0.75rem; --alias-dimension-space-sizeM: 1rem; --alias-typography-label-sizeXXS-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeXXS-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeXXS-font-weight: normal; --alias-typography-label-sizeXXS-font-size: 0.75rem; --alias-typography-label-sizeXS-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeXS-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeXS-font-weight: normal; --alias-typography-label-sizeXS-font-size: 0.8125rem; --alias-typography-label-sizeS-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeS-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeS-font-weight: normal; --alias-typography-label-sizeS-font-size: 0.875rem; --alias-typography-label-sizeM-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeM-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeM-font-weight: normal; --alias-typography-label-sizeM-font-size: 1rem; --alias-typography-label-sizeL-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeL-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeL-font-weight: normal; --alias-typography-label-sizeL-font-size: 1.125rem; --alias-typography-label-sizeXL-font-family: var(--global-fontFamily-base); --alias-typography-label-sizeXL-line-height: var(--alias-dimension-lineHeight-sizeS); --alias-typography-label-sizeXL-font-weight: normal; --alias-typography-label-sizeXL-font-size: 1.5rem; --alias-typography-body-sizeXXS-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeXXS-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeXXS-font-weight: normal; --alias-typography-body-sizeXXS-font-size: 0.75rem; --alias-typography-body-sizeXS-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeXS-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeXS-font-weight: normal; --alias-typography-body-sizeXS-font-size: 0.8125rem; --alias-typography-body-sizeS-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeS-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeS-font-weight: normal; --alias-typography-body-sizeS-font-size: 0.875rem; --alias-typography-body-sizeM-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeM-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeM-font-weight: normal; --alias-typography-body-sizeM-font-size: 1rem; --alias-typography-body-sizeL-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeL-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeL-font-weight: normal; --alias-typography-body-sizeL-font-size: 1.125rem; --alias-typography-body-sizeXL-font-family: var(--global-fontFamily-base); --alias-typography-body-sizeXL-line-height: var(--alias-dimension-lineHeight-sizeM); --alias-typography-body-sizeXL-font-weight: normal; --alias-typography-body-sizeXL-font-size: 1.5rem; --alias-transition-show-default-duration: var(--global-duration-300); --alias-transition-show-default-delay: 0; --alias-transition-show-default-timingFunction: var(--global-timingFunction-easeOut); --alias-transition-hide-default-duration: var(--global-duration-300); --alias-transition-show-default-delay: 0; --alias-transition-hide-default-timingFunction: var(--global-timingFunction-easeIn); --component-button-sizeXXS-size: var(--alias-dimension-control-sizeXXS); --component-button-sizeXS-size: var(--alias-dimension-control-sizeXS); --component-button-sizeS-size: var(--alias-dimension-control-sizeS); --component-button-sizeM-size: var(--alias-dimension-control-sizeM); --component-button-sizeL-size: var(--alias-dimension-control-sizeL); --component-button-sizeXL-size: var(--alias-dimension-control-sizeXL); --component-button-label-font-family: var(--global-fontFamily-base); --component-button-label-line-height: var(--alias-dimension-lineHeight-sizeXXS); --component-button-sizeXXS-label-font-size: var(--alias-typography-label-sizeXXS-font-size); --component-button-sizeXS-label-font-size: var(--alias-typography-label-sizeXS-font-size); --component-button-sizeS-label-font-size: var(--alias-typography-label-sizeS-font-size); --component-button-sizeM-label-font-size: var(--alias-typography-label-sizeM-font-size); --component-button-sizeL-label-font-size: var(--alias-typography-label-sizeL-font-size); --component-button-sizeXL-label-font-size: var(--alias-typography-label-sizeXL-font-size); --component-button-sizeXXS-icon-size: var(--alias-dimension-icon-label-sizeXXS); --component-button-sizeXS-icon-size: var(--alias-dimension-icon-label-sizeXS); --component-button-sizeS-icon-size: var(--alias-dimension-icon-label-sizeS); --component-button-sizeM-icon-size: var(--alias-dimension-icon-label-sizeM); --component-button-sizeL-icon-size: var(--alias-dimension-icon-label-sizeL); --component-button-sizeXL-icon-size: var(--alias-dimension-icon-label-sizeXL); --component-button-square-label-font-weight: normal; --component-button-square-container-border-radius: var(--alias-dimension-borderRadius-sizeM); --component-button-square-outline-container-border-width: var(--alias-dimension-borderWidth-sizeS); --component-button-round-label-font-weight: bold; --component-button-round-container-border-radius: var(--alias-dimension-borderRadius-circle); --component-button-round-outline-container-border-width: var(--alias-dimension-borderWidth-sizeM); --component-button-fill-container-border-style: none; --component-button-default-fill-label-color: var(--alias-color-text-label); --component-button-default-fill-label-color-disabled: var(--alias-color-text-disabled); --component-button-default-fill-icon-color: var(--alias-color-icon-label); --component-button-default-fill-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-default-fill-container-background-color-enabled: var(--alias-color-background-content-default); --component-button-default-fill-container-background-color-hovered: var(--alias-color-background-content-hovered); --component-button-default-fill-container-background-color-pressed: var(--alias-color-background-content-pressed); --component-button-default-fill-container-background-color-focused: var(--alias-color-background-content-default); --component-button-default-fill-container-background-color-disabled: var(--alias-color-background-content-default); --component-button-default-fill-container-border-color-default: var(--alias-color-border-default); --component-button-default-fill-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-default-fill-container-border-width: var(--alias-dimension-borderWidth-none); --component-button-primary-fill-label-color: var(--alias-color-onPrimary); --component-button-primary-fill-label-color-disabled: var(--alias-color-text-disabled); --component-button-primary-fill-icon-color: var(--alias-color-onPrimary); --component-button-primary-fill-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-primary-fill-container-background-color-enabled: var(--alias-color-primary); --component-button-primary-fill-container-background-color-hovered: var(--alias-color-primary-hovered); --component-button-primary-fill-container-background-color-pressed: var(--alias-color-primary-pressed); --component-button-primary-fill-container-background-color-focused: var(--alias-color-primary-hovered); --component-button-primary-fill-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-primary-fill-container-border-color-default: var(--alias-color-transparent); --component-button-primary-fill-container-border-color-disabled: var(--alias-color-transparent); --component-button-primary-fill-container-border-width: var(--alias-dimension-borderWidth-none); --component-button-outlineFill-container-border-style: solid; --component-button-default-outlineFill-label-color: var(--alias-color-text-label); --component-button-default-outlineFill-label-color-disabled: var(--alias-color-text-disabled); --component-button-default-outlineFill-icon-color: var(--alias-color-icon-label); --component-button-default-outlineFill-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-default-outlineFill-container-background-color-enabled: var(--alias-color-background-content-default); --component-button-default-outlineFill-container-background-color-hovered: var(--alias-color-background-content-hovered); --component-button-default-outlineFill-container-background-color-pressed: var(--alias-color-background-content-pressed); --component-button-default-outlineFill-container-background-color-focused: var(--alias-color-background-content-default); --component-button-default-outlineFill-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-default-outlineFill-container-border-color-default: var(--alias-color-border-default); --component-button-default-outlineFill-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-default-outlineFill-container-border-width: var(--alias-dimension-borderWidth-sizeS); --component-button-primary-outlineFill-label-color: var(--alias-color-primary); --component-button-primary-outlineFill-label-color-disabled: var(--alias-color-text-disabled); --component-button-primary-outlineFill-icon-color: var(--alias-color-primary); --component-button-primary-outlineFill-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-primary-outlineFill-container-background-color-enabled: var(--alias-color-background-content-default); --component-button-primary-outlineFill-container-background-color-hovered: var(--alias-color-background-content-hovered); --component-button-primary-outlineFill-container-background-color-pressed: var(--alias-color-background-content-pressed); --component-button-primary-outlineFill-container-background-color-focused: var(--alias-color-background-content-default); --component-button-primary-outlineFill-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-primary-outlineFill-container-border-color-default: var(--alias-color-primary); --component-button-primary-outlineFill-container-border-color-disabled: var(--alias-color-background-disabled); --component-button-primary-outlineFill-container-border-width: var(--alias-dimension-borderWidth-sizeS); --component-button-outline-container-border-style: solid; --component-button-default-outline-label-color: var(--alias-color-text-label); --component-button-default-outline-label-color-disabled: var(--alias-color-text-disabled); --component-button-default-outline-icon-color: var(--alias-color-icon-label); --component-button-default-outline-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-default-outline-container-background-color-enabled: transparent; --component-button-default-outline-container-background-color-hovered: var(--alias-color-background-content-hovered); --component-button-default-outline-container-background-color-pressed: var(--alias-color-background-content-pressed); --component-button-default-outline-container-background-color-focused: transparent; --component-button-default-outline-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-default-outline-container-border-color-default: var(--alias-color-border-default); --component-button-default-outline-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-default-outline-container-border-width: var(--alias-dimension-borderWidth-sizeS); --component-button-primary-outline-label-color: var(--alias-color-text-primary); --component-button-primary-outline-label-color-disabled: var(--alias-color-text-disabled); --component-button-primary-outline-icon-color: var(--alias-color-icon-primary); --component-button-primary-outline-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-primary-outline-container-background-color-enabled: transparent; --component-button-primary-outline-container-background-color-hovered: var(--alias-color-primary-hovered); --component-button-primary-outline-container-background-color-pressed: var(--alias-color-primary-pressed); --component-button-primary-outline-container-background-color-focused: var(--alias-color-primary-hovered); --component-button-primary-outline-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-primary-outline-container-border-color: var(--alias-color-border-primary); --component-button-primary-outline-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-primary-outline-container-border-width: var(--alias-dimension-borderWidth-sizeS); --component-button-text-container-border-style: none; --component-button-default-text-label-color: var(--alias-color-text-label); --component-button-default-text-label-color-disabled: var(--alias-color-text-disabled); --component-button-default-text-icon-color: var(--alias-color-icon-label); --component-button-default-text-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-default-text-container-background-color-enabled: transparent; --component-button-default-text-container-background-color-hovered: var(--alias-color-background-content-hovered); --component-button-default-text-container-background-color-pressed: var(--alias-color-background-content-pressed); --component-button-default-text-container-background-color-focused: transparent; --component-button-default-text-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-default-text-container-border-color-default: var(--alias-color-border-default); --component-button-default-text-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-default-text-container-border-width: var(--alias-dimension-borderWidth-none); --component-button-primary-text-label-color: var(--alias-color-text-primary); --component-button-primary-text-label-color-disabled: var(--alias-color-text-disabled); --component-button-primary-text-icon-color: var(--alias-color-icon-primary); --component-button-primary-text-icon-color-disabled: var(--alias-color-icon-disabled); --component-button-primary-text-container-background-color-enabled: transparent; --component-button-primary-text-container-background-color-hovered: var(--alias-color-primary-hovered); --component-button-primary-text-container-background-color-pressed: var(--alias-color-primary-pressed); --component-button-primary-text-container-background-color-focused: var(--alias-color-primary-hovered); --component-button-primary-text-container-background-color-disabled: var(--alias-color-background-disabled); --component-button-primary-text-container-border-color-default: var(--alias-color-border-primary); --component-button-primary-text-container-border-color-disabled: var(--alias-color-border-disabled); --component-button-primary-text-container-border-width: var(--alias-dimension-borderWidth-none); --component-button-circle-container-border-radius: 50%; --component-button-primary-outline-container-border-color-default: var(--alias-color-primary); --component-button-square-outlineFill-container-border-width: var(--alias-dimension-borderWidth-sizeS); } :root { --image-sprite-common-icon_avatar: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggOEM4IDUuNzkgOS43OSA0IDEyIDRDMTQuMjEgNCAxNiA1Ljc5IDE2IDhDMTYgMTAuMjEgMTQuMjEgMTIgMTIgMTJDOS43OSAxMiA4IDEwLjIxIDggOFoiIGZpbGw9IiM0NzQ3NDciLz4KPHBhdGggZD0iTTIwIDE3QzIwIDE4LjkzMyAxNi40MTgzIDIwIDEyIDIwQzcuNTgxNzIgMjAgNCAxOC45MzMgNCAxN0M0IDE1LjA2NyA3LjU4MTcyIDEzLjUgMTIgMTMuNUMxNi40MTgzIDEzLjUgMjAgMTUuMDY3IDIwIDE3WiIgZmlsbD0iIzQ3NDc0NyIvPgo8L3N2Zz4K); --image-sprite-common-insert_drive_file: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQgMkg2Yy0xLjEgMC0xLjk5LjktMS45OSAyTDQgMjBjMCAxLjEuODkgMiAxLjk5IDJIMThjMS4xIDAgMi0uOSAyLTJWOGwtNi02ek02IDIwVjRoN3Y1aDV2MTFINnoiLz48L3N2Zz4=); --image-sprite-common-arrow_up: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSAxNS40MSAxMiAxMC44M2w0LjU5IDQuNThMMTggMTRsLTYtNi02IDYgMS40MSAxLjQxeiIvPjwvc3ZnPg==); --image-sprite-common-arrow_down: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA4LjU5IDEyIDEzLjE3bDQuNTktNC41OEwxOCAxMGwtNiA2LTYtNiAxLjQxLTEuNDF6Ii8+PC9zdmc+); --image-sprite-common-arrow_right: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOC41OSAxNi41OSAxMy4xNyAxMiA4LjU5IDcuNDEgMTAgNmw2IDYtNiA2LTEuNDEtMS40MXoiLz48L3N2Zz4=); --image-sprite-common-arrow_left: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNDEgMTYuNTkgMTAuODMgMTJsNC41OC00LjU5TDE0IDZsLTYgNiA2IDYgMS40MS0xLjQxeiIvPjwvc3ZnPg==); --image-sprite-common-first_page: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTguNDEgMTYuNTkgMTMuODIgMTJsNC41OS00LjU5TDE3IDZsLTYgNiA2IDYgMS40MS0xLjQxek02IDZoMnYxMkg2VjZ6Ii8+PC9zdmc+); --image-sprite-common-last_page: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNS41OSA3LjQxIDEwLjE4IDEybC00LjU5IDQuNTlMNyAxOGw2LTYtNi02LTEuNDEgMS40MXpNMTYgNmgydjEyaC0yVjZ6Ii8+PC9zdmc+); --image-sprite-common-cancel: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTMuNTktMTNMMTIgMTAuNTkgOC40MSA3IDcgOC40MSAxMC41OSAxMiA3IDE1LjU5IDguNDEgMTcgMTIgMTMuNDEgMTUuNTkgMTcgMTcgMTUuNTkgMTMuNDEgMTIgMTcgOC40MXoiLz48L3N2Zz4=); --image-sprite-common-search: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QTYuNDcxIDYuNDcxIDAgMCAwIDE2IDkuNSA2LjUgNi41IDAgMSAwIDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6Ii8+PC9zdmc+); --image-sprite-common-clear: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgNi40MSAxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyIDE5IDYuNDF6Ii8+PC9zdmc+); --image-sprite-common-done: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOSAxNi4yIDQuOCAxMmwtMS40IDEuNEw5IDE5IDIxIDdsLTEuNC0xLjRMOSAxNi4yeiIvPjwvc3ZnPg==); --image-sprite-common-file_download: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMTV2M0g2di0zSDR2M2MwIDEuMS45IDIgMiAyaDEyYzEuMSAwIDItLjkgMi0ydi0zaC0yem0tMS00LTEuNDEtMS40MUwxMyAxMi4xN1Y0aC0ydjguMTdMOC40MSA5LjU5IDcgMTFsNSA1IDUtNXoiLz48L3N2Zz4=); } @font-face { font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url(e34c6ca65a7ad3b32c23.otf) format('opentype'); } @font-face { font-family: 'Material Icons Fill'; font-style: normal; font-weight: 400; src: url(e751952f99a391b623f3.ttf) format('truetype'); } @font-face { font-family: 'Material Icons Navigate Next'; font-style: normal; font-weight: 400; src: url(e34c6ca65a7ad3b32c23.otf) format('opentype'); } .icon-outlined, .icon-fill { font-weight: normal; font-style: normal; font-size: 1.5rem; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Support for Safari and Chrome. */ } .icon-outlined { font-family: 'Material Icons Outlined'; } .icon-fill { font-family: 'Material Icons Fill'; } .icon-navigate-next { font-family: 'Material Icons Navigate Next'; } button { padding: var(--alias-dimension-borderWidth-sizeS); margin: 0.0625rem; &:hover { cursor: pointer; } /* 共通 */ label { &:hover { cursor: pointer; } } &:focus, &:focus-visible { outline: var(--alias-color-focused) var(--component-button-outline-container-border-style) var(--alias-dimension-borderWidth-sizeM); outline-offset: var(--alias-dimension-borderWidth-sizeS); } &.default { &.fill { background-color: var(--alias-color-background-content-default); border: var(--component-button-outline-container-border-style); border-width: var(--alias-dimension-borderWidth-sizeS); border-color: var(--alias-color-border-default); &:hover { background-color: var(--alias-color-background-content-hovered); } &:active { background-color: var(--alias-color-background-content-pressed); } &:disabled { color: var(--alias-color-text-disabled); label { color: var(--alias-color-text-disabled); } } } &.text { background-color: transparent; border: var(--component-button-outline-container-border-style); border-width: var(--alias-dimension-borderWidth-sizeS); border-color: transparent; &:hover { background-color: var(--alias-color-background-content-hovered); } &:active { background-color: var(--alias-color-background-content-pressed); } &:disabled { background-color: transparent; } } } &.primary { &.fill { background-color: var(--alias-color-primary); border: transparent; label { color: var(--alias-color-onPrimary); } &:hover { background-color: var(--alias-color-primary-hovered); } &:active { background-color: var(--alias-color-primary-pressed); outline: var(--alias-color-focused) var(--component-button-outline-container-border-style) var(--alias-dimension-borderWidth-sizeM); outline-offset: var(--alias-dimension-borderWidth-sizeS); } &:disabled { background-color: var(--alias-color-background-disabled); color: var(--alias-color-text-disabled); label { color: var(--alias-color-text-disabled) } } } &.outline { background-color: transparent; border-color: var(--alias-color-primary); label { color: var(--alias-color-primary); } &:hover { background-color: var(--alias-color-background-content-hovered); } &:active { background-color: var(--alias-color-background-content-pressed); outline: var(--alias-color-focused) var(--component-button-outline-container-border-style) var(--alias-dimension-borderWidth-sizeM); outline-offset: var(--alias-dimension-borderWidth-sizeS); } &:disabled { border-color: var(--alias-color-border-disabled); label { color: var(--alias-color-text-disabled) } } } } &.square { border-radius: var(--alias-dimension-borderRadius-sizeM); border-width: var(--alias-dimension-borderWidth-sizeS) } } input[type=checkbox] { accent-color: var(--alias-color-icon-label); &:focus { outline: var(--alias-color-primary) auto var(--alias-dimension-borderWidth-sizeM); outline-offset: var(--alias-dimension-borderWidth-sizeM); } } .toast { &.hidden { visibility: hidden; opacity: 0; transition-duration: var(--alias-transition-hide-default-duration); transition-delay: var(--alias-transition-hide-default-delay); transition-timing-function: var(--alias-transition-hide-default-timingFunction); } &.show { visibility: visible; opacity: 1; transition-duration: var(--alias-transition-show-default-duration); transition-delay: var(--alias-transition-show-default-delay); transition-timing-function: var(--alias-transition-show-default-timingFunction); } .main-container { padding: 0.5rem; height: auto; width: auto; display: flex; align-items: center; z-index: 12001; padding: 8px; box-shadow: var(--alias-shadow-level3); border-radius: var(--alias-dimension-borderRadius-sizeM); .toast-icon { margin-left: 16px; width: var(--alias-dimension-icon-label-sizeXS); height: var(--alias-dimension-icon-label-sizeXS); } .message-container { margin: 0 var(--alias-dimension-space-sizeXS) 0 4px; padding: 0px; .message { font-size: var(--alias-typography-label-sizeS-font-size); font-weight: var(--alias-typography-label-sizeS-font-weight); line-height: var(--alias-typography-label-sizeS-line-height); margin: 0; } } .close-button { font-size: var(--alias-dimension-icon-label-sizeXS); width: fit-content; margin-right: 0.5rem; background-color: inherit; border: none; display: flex; align-items: center; .close-button-icon { width: var(--alias-dimension-icon-label-sizeXS); height: var(--alias-dimension-icon-label-sizeXS); } } .action-button { width: 100px; height: var(--component-button-sizeS-size); padding: 0 0.6rem 0 0.6rem; background-color: var(--component-button-negative-outlineFill-container-background-color-enabled); border: solid; border: var(--component-button-negative-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--alias-color-negative); border-radius: var(--component-button-square-container-border-radius); margin-inline-end: 0.5rem; .action-button-label { font-size: var(--component-button-sizeS-label-font-size); color: var(--alias-color-negative); line-height: var(--component-button-label-line-height); } } &.base.normal { background-color: var(--alias-color-background-base-alt1); .message { color: var(--alias-color-text-main); } .toast-icon { color: var(--alias-color-icon-main); } } &.base.emphasized { background-color: var(--alias-color-background-base-alt1-inverse); .message { color: var(--alias-color-text-main-inverse); } .toast-icon { color: var(--alias-color-icon-main-inverse); } } &.success.normal { background-color: var(--alias-color-successTint); .message { color: var(--alias-color-text-main); } .toast-icon { color: var(--alias-color-icon-main); } } &.success.emphasized { background-color: var(--alias-color-success); .message { color: var(--alias-color-onSuccess); } .toast-icon { color: var(--alias-color-onSuccess); } } &.warning.normal { background-color: var(--alias-color-warningTint); .message { color: var(--alias-color-text-main); } .toast-icon { color: var(--alias-color-icon-main); } } &.warning.emphasized { background-color: var(--alias-color-warning); .message { color: var(--alias-color-onWarning); } .toast-icon { color: var(--alias-color-onWarning); } } &.negative.normal { background-color: var(--alias-color-negativeTint); .message { color: var(--alias-color-text-main); } .toast-icon { color: var(--alias-color-icon-main); } } &.negative.emphasized { background-color: var(--alias-color-negative); .message { color: var(--alias-color-onNegative); } .toast-icon { color: var(--alias-color-onNegative); } } } } /* FIXME: (ttomii) SCSS -> CSS のなかで `@extend` を使っている関係でdialog 関係を混ぜているが、CSS的な書き方をすること。 （dialog関係は全部 dialog classを持つように） */ /* z-index: の設定は次の通り ダイアログ 12001 背景マスク 12002 */ .dialog.hidden, .hidden.menu-dialog, .hidden.confirm-dialog, .hidden.alert-dialog { visibility: hidden; opacity: 0; transition-duration: var(--alias-transition-hide-default-duration); transition-delay: var(--alias-transition-hide-default-delay); transition-timing-function: var(--alias-transition-hide-default-timingFunction); } .dialog.show, .show.menu-dialog, .show.confirm-dialog, .show.alert-dialog { visibility: visible; opacity: 1; transition-duration: var(--alias-transition-show-default-duration); transition-delay: var(--alias-transition-show-default-delay); transition-timing-function: var(--alias-transition-show-default-timingFunction); } .dialog .main-container, .menu-dialog .main-container, .confirm-dialog .main-container, .alert-dialog .main-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12002; height: auto; width: 288px; background-color: var(--alias-color-background-base-default); box-shadow: var(--alias-shadow-level5); border-radius: var(--alias-dimension-borderRadius-sizeL); } .dialog .main-container ul.message-container, .menu-dialog .main-container ul.message-container, .confirm-dialog .main-container ul.message-container, .alert-dialog .main-container ul.message-container { padding: 0px 16px 8px 16px; margin: 0; list-style-position: inside; overflow-wrap: normal; } .dialog .main-container .footer-container, .menu-dialog .main-container .footer-container, .confirm-dialog .main-container .footer-container, .alert-dialog .main-container .footer-container { display: flex; align-items: center; justify-content: center; padding: 8px 16px 16px 16px; margin: 0; } .dialog .alert-mask, .menu-dialog .alert-mask, .confirm-dialog .alert-mask, .alert-dialog .alert-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: var(--alias-color-background-mask-default); z-index: 12001; } .alert-dialog .title { font-size: var(--alias-typography-body-sizeS-font-size); font-weight: bold; color: var(--alias-color-text-label); line-height: var(--alias-typography-body-sizeS-line-height); padding: 8px 16px 16px 16px; margin: 0; } .alert-dialog .main-container .message-container .message { font-size: var(--alias-typography-body-sizeXS-font-size); font-weight: var(--alias-typography-body-sizeXS-font-weight); line-height: var(--alias-typography-body-sizeXS-line-height); color: var(--alias-color-text-label); } .alert-dialog .main-container .footer-container .close-button { width: 100px; height: var(--component-button-sizeS-size); padding: 0 0.6rem 0 0.6rem; background-color: var(--component-button-default-outlineFill-container-background-color-enabled); border: var(--component-button-default-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--component-button-default-outlineFill-container-border-color-default); border-radius: var(--component-button-square-container-border-radius); } .alert-dialog .main-container .footer-container .close-button .close-button-label { font-size: var(--component-button-sizeS-label-font-size); line-height: var(--component-button-label-line-height); } .alert-dialog .main-container .footer-container .close-button:hover { background-color: var(--component-button-default-outlineFill-container-background-color-hovered); } .alert-dialog .alert-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: var(--alias-color-background-mask-default); z-index: 12001; } .confirm-dialog .title { font-size: var(--alias-typography-label-sizeM-font-size); font-weight: bold; color: var(--alias-color-text-label); line-height: var(--alias-typography-label-sizeM-line-height); padding: 16px 16px 8px 16px; margin: 0; } .confirm-dialog .message-container .message { font-size: var(--alias-typography-body-sizeS-font-size); font-weight: var(--alias-typography-body-sizeS-font-weight); line-height: var(--alias-typography-body-sizeS-line-height); color: var(--alias-color-text-label); } .confirm-dialog .message-container .warning-message { font-size: var(--alias-typography-body-sizeS-font-size); font-weight: var(--alias-typography-body-sizeS-font-weight); line-height: var(--alias-typography-body-sizeS-line-height); color: var(--alias-color-negative); } .confirm-dialog .footer-container .cancel-button { width: 100%; height: var(--component-button-sizeS-size); padding: 0 0.6rem 0 0.6rem; background-color: var(--component-button-default-outlineFill-container-background-color-enabled); border: var(--component-button-default-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--component-button-default-outlineFill-container-border-color-default); border-radius: var(--component-button-square-container-border-radius); margin: 0 4px 0 0; } .confirm-dialog .footer-container .cancel-button .cancel-button-label { font-size: var(--component-button-sizeS-label-font-size); color: var(--component-button-default-outlineFill-label-color); line-height: var(--component-button-label-line-height); } .confirm-dialog .footer-container .cancel-button:hover { background-color: var(--component-button-default-outlineFill-container-background-color-hovered); } .confirm-dialog .footer-container .action-button { width: 100%; height: var(--component-button-sizeS-size); padding: 0 0.6rem 0 0.6rem; background-color: var(--component-button-negative-outlineFill-container-background-color-enabled); border: solid; border: var(--component-button-default-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--alias-color-negative); border-radius: var(--component-button-square-container-border-radius); margin: 0 0 0 4px; } .confirm-dialog .footer-container .action-button .action-button-label { font-size: var(--component-button-sizeS-label-font-size); color: var(--alias-color-negative); line-height: var(--component-button-label-line-height); } .confirm-dialog .footer-container .action-button:hover { background-color: var(--alias-color-negativeTint); } .confirm-dialog .footer-container .primary-button { background-color: var(--component-button-primary-fill-container-background-color-enabled); border: none; } .confirm-dialog .footer-container .primary-button .action-button-label { color: var(--alias-color-onPrimary); } .confirm-dialog .footer-container .primary-button:hover { background-color: var(--component-button-primary-fill-container-background-color-hovered); } .menu-dialog .title { display: flex; padding: 8px 0px; margin: 28px 0 0 0; justify-content: center; align-items: center; gap: 4px; align-self: stretch; } .menu-dialog .title .menu-dialog-title { color: var(--alias-color-primary, #0E72E6); text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 125%; } .menu-dialog .title .title-icon { display: flex; width: 18px; height: 18px; justify-content: center; align-items: center; flex-shrink: 0; fill: var(--component-button-primary-outlineFill-label-color, #0E72E6); } .menu-dialog ul.message-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; align-self: stretch; } .menu-dialog ul.message-container .action-button { display: flex; padding: 7px 10px; justify-content: center; align-items: center; gap: 8px; align-self: stretch; border-radius: 4px; background: #FFF; width: 100%; height: var(--component-button-sizeS-size); border: 1px solid var(--alias-color-border-default, #BCBCBC); margin: 16px 12px 0 0; } .menu-dialog ul.message-container .action-button .action-button-label { color: var(--alias-color-text-label, #474747); text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 125%; } .menu-dialog ul.message-container .action-button .action-button-icon { width: 18px; height: 18px; fill: var(--component-button-default-outlineFill-label-color); } .menu-dialog ul.message-container .action-button .arrow_right-icon { margin: 0; align-items: end; fill: var(--component-button-default-outlineFill-label-color); width: 18px; height: 18px; flex: 0 0 auto; } .menu-dialog ul.message-container .action-button:hover { background-color: var(--component-button-default-text-container-background-color-hovered); } .menu-dialog ul.message-container .action-button:focus { outline: none; outline-offset: none; } .menu-dialog ul.message-container .cancel-button { display: flex; padding: 7px 10px; justify-content: center; align-items: center; gap: 8px; align-self: stretch; border-radius: 4px; background: var(--alias-color-primary, #0E72E6); width: 100%; height: var(--component-button-sizeS-size); border: var(--component-button-default-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--component-button-default-outlineFill-container-border-color-default); margin: 12px 32px 0 0; } .menu-dialog ul.message-container .cancel-button .cancel-button-label { color: var(--alias-color-onPrimary, #FFF); font-size: 14px; font-style: normal; font-weight: 400; line-height: 125%; } .menu-dialog ul.message-container .cancel-button .cancel-button-icon { width: 18px; height: 18px; fill: var(--component-button-primary-fill-label-color, #0E72E6); } .menu-dialog ul.message-container .cancel-button:hover { background-color: var(--component-button-primary-fill-container-background-color-hovered); } .menu-dialog ul.message-container .cancel-button:focus { outline: none; outline-offset: none; } .icon-button { display: flex; flex-direction: column; .icon-button-button{ margin: auto; display: flex; align-items: center; justify-content:center; } .icon-button-label { margin-top: 4px; } &.square { .icon-button-button { border-radius: var(--alias-dimension-borderRadius-sizeM); } } &.circle { .icon-button-button { border-radius: var(--alias-dimension-borderRadius-circle); } } &.XXS { .icon-button-button { width: var(--component-button-sizeXXS-size); height: var(--component-button-sizeXXS-size); } .icon-button-icon { width: var(--component-button-sizeXXS-icon-size); height: var(--component-button-sizeXXS-icon-size); } .icon-button-label { font-size: var(--component-button-sizeXXS-label-font-size); } } &.XS { .icon-button-button { width: var(--component-button-sizeXS-size); height: var(--component-button-sizeXS-size); } .icon-button-icon { width: var(--component-button-sizeXS-icon-size); height: var(--component-button-sizeXS-icon-size); } .icon-button-label { font-size: var(--component-button-sizeXS-font-size); } } &.S { .icon-button-button { width: var(--component-button-sizeS-size); height: var(--component-button-sizeS-size); } .icon-button-icon { width: var(--component-button-sizeS-icon-size); height: var(--component-button-sizeS-icon-size); } .icon-button-label { font-size: var(--component-button-sizeS-font-size); } } &.M { .icon-button-button { width: var(--component-button-sizeM-size); height: var(--component-button-sizeM-size); } .icon-button-icon { width: var(--component-button-sizeM-icon-size); height: var(--component-button-sizeM-icon-size); } .icon-button-label { font-size: var(--component-button-sizeM-font-size); } } &.L { .icon-button-button { width: var(--component-button-sizeL-size); height: var(--component-button-sizeL-size); } .icon-button-icon { width: var(--component-button-sizeL-icon-size); height: var(--component-button-sizeL-icon-size); } .icon-button-label { font-size: var(--component-button-sizeL-font-size); } } &.XL { .icon-button-button { width: var(--component-button-sizeXL-size); height: var(--component-button-sizeXL-size); } .icon-button-icon { width: var(--component-button-sizeXL-icon-size); height: var(--component-button-sizeXL-icon-size); } .icon-button-label { font-size: var(--component-button-sizeXL-font-size); } } &.fill { .icon-button-button { border-style: var(--component-button-fill-container-border-style); } &.default { .icon-button-button { background-color: var(--component-button-default-fill-container-background-color-enabled); border-color: var(--component-button-default-fill-container-border-color-default); border-width: var(--component-button-default-fill-container-border-width); &:hover { background-color: var(--component-button-default-fill-container-background-color-hovered); } &:disabled { color: var(--component-button-default-fill-container-background-color-disabled); border-color: var(--component-button-default-fill-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-default-fill-icon-color); &:disabled { color: var(--component-button-default-fill-icon-color-disabled); } } .icon-button-label { color: var(--component-button-default-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } &.primary { .icon-button-button { background-color: var(--component-button-primary-fill-container-background-color-enabled); border-color: var(--component-button-primary-fill-container-border-color-default); border-width: var(--component-button-primary-fill-container-border-width); &:hover { background-color: var(--component-button-primary-fill-container-background-color-hovered); } &:disabled { color: var(--component-button-primary-fill-container-background-color-disabled); border-color: var(--component-button-primary-fill-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-primary-fill-icon-color); &:disabled { color: var(--component-button-primary-fill-icon-color-disabled); } } .icon-button-label { color: var(--component-button-primary-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } } &.outlineFill { .icon-button-button { border-style: var(--component-button-outlineFill-container-border-style); } &.default { .icon-button-button { background-color: var(--component-button-default-outlineFill-container-background-color-enabled); border-color: var(--component-button-default-outlineFill-container-border-color-default); border-width: var(--component-button-default-outlineFill-container-border-width); &:hover { background-color: var(--component-button-default-outlineFill-container-background-color-hovered); } &:disabled { background-color: var(--component-button-default-outlineFill-container-background-color-disabled); border-color: var(--component-button-default-outlineFill-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-default-outlineFill-icon-color); &:disabled { color: var(--component-button-default-outlineFill-icon-color-disabled); } } .icon-button-label { color: var(--component-button-default-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } &.primary { .icon-button-button { background-color: var(--component-button-primary-outlineFill-container-background-color-enabled); border-color: var(--component-button-primary-outlineFill-container-border-color-default); border-width: var(--component-button-primary-outlineFill-container-border-width); &:hover { background-color: var(--component-button-primary-outlineFill-container-background-color-hovered); } &:disabled { background-color: var(--component-button-primary-outlineFill-container-background-color-disabled); border-color: var(--component-button-primary-outlineFill-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-primary-outlineFill-icon-color); &:disabled { color: var(--component-button-primary-outlineFill-icon-color-disabled); } } .icon-button-label { color: var(--component-button-primary-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } } &.outline { .icon-button-button { border-style: var(--component-button-outline-container-border-style); } &.default { .icon-button-button { background-color: var(--component-button-default-outline-container-background-color-enabled); border-color: var(--component-button-default-outline-container-border-color-default); border-width: var(--component-button-default-outline-container-border-width); &:hover { background-color: var(--component-button-default-outline-container-background-color-hovered); } &:disabled { background-color: var(--component-button-default-outline-container-background-color-disabled); border-color: var(--component-button-default-outline-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-default-outline-icon-color); &:disabled { color: var(--component-button-default-outline-icon-color-disabled); } } .icon-button-label { color: var(--component-button-default-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } &.primary { .icon-button-button { background-color: var(--component-button-primary-outline-container-background-color-enabled); border-color: var(--component-button-primary-outline-container-border-color-default); border-width: var(--component-button-primary-outline-container-border-width); &:hover { background-color: var(--component-button-primary-outline-container-background-color-hovered); } &:disabled { background-color: var(--component-button-primary-outline-container-background-color-disabled); border-color: var(--component-button-primary-outline-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-primary-outline-icon-color); &:disabled { color: var(--component-button-primary-outline-icon-color-disabled); } } .icon-button-label { color: var(--component-button-primary-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } } &.text { .icon-button-button { border-style: var(--component-button-text-container-border-style); } &.default { .icon-button-button { background-color: var(--component-button-default-text-container-background-color-enabled); border-color: var(--component-button-default-text-container-border-color-default); border-width: var(--component-button-default-text-container-border-width); &:hover { background-color: var(--component-button-default-text-container-background-color-hovered); } &:disabled { background-color: var(--component-button-default-text-container-background-color-disabled); border-color: var(--component-button-default-text-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-default-text-icon-color); &:disabled { color: var(--component-button-default-text-icon-color-disabled); } } .icon-button-label { color: var(--component-button-default-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } &.primary { .icon-button-button { background-color: var(--component-button-primary-text-container-background-color-enabled); border-color: var(--component-button-primary-text-container-border-color-default); border-width: var(--component-button-primary-text-container-border-width); &:hover { background-color: var(--component-button-primary-text-container-background-color-hovered); } &:disabled { background-color: var(--component-button-primary-text-container-background-color-disabled); border-color: var(--component-button-primary-text-container-border-color-disabled); } } .icon-button-icon { color: var(--component-button-primary-text-icon-color); &:disabled { color: var(--component-button-primary-text-icon-color-disabled); } } .icon-button-label { color: var(--component-button-primary-text-label-color); &:disabled { color: var(--component-button-default-text-label-color-disabled) } } } } } *, ::before, ::after { box-sizing: border-box; background-repeat: no-repeat; font-family: var(--global-fontFamily-base); } :where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } :where(nav) :where(ol, ul) { list-style-type: none; padding: 0; } :where(svg:not(fill)) { fill: currentColor; } :where(button, input, select) { margin: 0; } :where(nav) :where(ol, ul) { list-style-type: none; padding: 0; } :where(ol, ul) { list-style-type: none; padding: 0; } .feature-draw-panel { /* XS,M,L,XL : 画面中央下部 */ position: absolute; z-index: 10; top: 99%; left: 50%; transform: translateY(-99%) translateX(-50%); height: auto; width: 320px; padding: 4px 8px 8px; background-color: var(--alias-color-background-base-translucent-alt0); &.hidden { visibility: hidden; opacity: 0; transition-duration: var(--alias-transition-hide-default-duration); transition-delay: var(--alias-transition-hide-default-delay); transition-timing-function: var(--alias-transition-hide-default-timingFunction); } &.show { visibility: visible; opacity: 1; transition-duration: var(--alias-transition-show-default-duration); transition-delay: var(--alias-transition-show-default-delay); transition-timing-function: var(--alias-transition-show-default-timingFunction); } .feature-draw-panel-context-toolbar { padding-bottom: 0.2rem; background-color: var(--alias-color-background-base-translucent-alt0); .convert-button { padding: 0.1rem 0.6rem 0.1rem 0.6rem; background-color: var(--component-button-default-outlineFill-container-background-color-enabled); color: var(--component-button-default-text-icon-color); border: var(--alias-dimension-borderWidth-sizeS) solid var(--alias-color-border-default); border-radius: var(--component-button-square-container-border-radius); .convert-icon { fill: var(--alias-color-icon-label); width: var(--alias-dimension-icon-label-sizeXS); height: var(--alias-dimension-icon-label-sizeXS); vertical-align: middle; } .convert-label { color: var(--alias-color-text-detail); font-weight: var(--alias-typography-label-sizeXXS-font-weight); font-size: var(--alias-typography-label-sizeXXS-font-size); } } &.hidden { display: none; } } .feature-draw-content { padding: 4px 8px 8px; background-color: var(--alias-color-background-base-translucent-default); box-shadow: var(--alias-shadow-level1); border-radius: var(--alias-dimension-borderRadius-sizeM); .menu-container { display: flex; align-items: center; justify-content: end; width: auto; height: 32px; margin: 4px 0; border-bottom: 1px solid var(--alias-color-border-light); .select-container { .target-select-button { display: flex; align-items: center; height: var(--component-button-sizeXS-size); padding-left: var(--alias-dimension-space-sizeXXXS); padding-inline-start: var(--alias-dimension-space-sizeXS); padding-inline-end: var(--alias-dimension-space-sizeXS); margin: 0 var(--alias-dimension-space-sizeXXS) var(--alias-dimension-space-sizeXS) var(--alias-dimension-space-sizeXXS); background-color: var(--component-button-default-outlineFill-container-background-color-enabled); border: var(--component-button-default-outlineFill-container-border-width) var(--component-button-outlineFill-container-border-style) var(--component-button-default-outlineFill-container-border-color-default); border-radius: var(--alias-dimension-borderRadius-sizeM); flex: 1; &.show { background-color: var(--alias-color-primaryTint); } .target-select-button-label { font-size: var(--component-button-sizeXS-label-font-size); color: var(--alias-color-text-label); line-height: var(--component-button-label-line-height); padding: 0 var(--alias-dimension-space-sizeXXS); flex: 1; text-align: left; } .target-select-button-icon { align-items: right; width: var(--component-button-sizeXS-icon-size); height: var(--component-button-sizeXS-icon-size); fill: var(--component-button-default-text-icon-color); } } .target-select-button:hover { background-color: var(--component-button-default-outlineFill-container-background-color-hovered); } } .button-container { height: auto; display: flex; align-items: center; justify-content: end; margin-bottom: 4px; .flatbutton { width: var(--component-button-sizeXS-size); height: var(--component-button-sizeXS-size); background-color: var(--component-button-default-text-container-background-color-enabled); border: none; .panel-icon { width: var(--component-button-sizeXS-icon-size); height: var(--component-button-sizeXS-icon-size); fill: var(--component-button-default-text-icon-color); } } .flatbutton:hover { background-color: var(--component-button-default-text-container-background-color-hovered); } } } .feature-draw-panel-footer-container { .button-group { display: flex; flex-direction: row; padding: 0px 4px; &.hidden { display: none; } .icon-button { margin: auto; border: none; &[disabled] { pointer-events: none; } } } .explanation-container { margin: 4px 0; padding: 4px; vertical-align: middle; width: auto; &.hidden { display: none; } .explanation { display: block; text-align: center; color: var(--alias-color-text-detail); line-height: var(--alias-typography-label-sizeXXS-line-height); font-weight: var(--alias-typography-label-sizeXXS-font-weight); font-size: var(--alias-typography-label-sizeXXS-font-size); } } } } } .type-selector { display: block; padding: 4px 8px; margin-right: 6px; margin-bottom: 6px; width: 100%; line-height: var(--alias-typography-label-sizeXXS-line-height); font-weight: var(--alias-typography-label-sizeXXS-font-weight); font-size: var(--alias-typography-label-sizeXXS-font-size); color: var(--alias-color-text-main); background-color: var(--alias-color-background-content-default); border-color: var(--alias-color-border-default); border-radius: var(--alias-dimension-borderRadius-sizeM); border-width: var(--alias-dimension-borderWidth-sizeS); border-style: solid; &.hidden { display: none; } } /* S : 画面左下寄せ */ @media only screen and (orientation: landscape) and (max-width: 991px) { .feature-draw-panel { position: absolute; top: 99%; left: 99%; transform: translateY(-99%) translateX(-99%); } } .main-header { position: fixed; display: flex; align-items: center; width: 100vw; top: 0rem; left: 0rem; height: 2.5rem; padding-right: 1rem; background: var(--alias-color-background-base-translucent-default); border-bottom: var(--alias-dimension-borderWidth-sizeS) solid var(--alias-color-border-light); z-index: 1; .button-group { display: flex; margin: 0 0 0 auto; .button { background-color: var(--component-button-default-outlineFill-container-background-color-enabled); border-color: var(--component-button-default-outlineFill-container-border-color-default); border-radius: var(--component-button-round-container-border-radius); border-style: var(--component-button-outlineFill-container-border-style); border-width: var(--component-button-default-outlineFill-container-border-width); color: var(--component-button-default-outlineFill-label-color); height: var(--component-button-sizeS-size); width: var(--component-button-sizeS-size); display: flex; align-items: center; justify-content: center; margin-left: 1rem; .button-svg { display: flex; .button-image { fill: var(--component-button-default-outlineFill-icon-color); width: var(--component-button-sizeS-icon-size); height: var(--component-button-sizeS-icon-size); } } } } .login-frame { .login-button { padding: 0rem 0.5rem; height: var(--component-button-sizeXS-size); border-radius: var(--component-button-square-container-border-radius); color: var(--component-button-primary-outlineFill-label-color); background-color: var(--component-button-primary-outlineFill-container-background-color-enabled); border-width: var(--component-button-primary-outlineFill-container-border-width); border-color: var(--component-button-primary-outlineFill-container-border-color-default); border-style: var(--component-button-outlineFill-container-border-style); white-space: nowrap; } } .logo { height: 2.5rem; padding-left: var(--alias-dimension-space-sizeXS); } .header-logo-image { height: 2.5rem; width: 220px; object-fit: scale-down; cursor: pointer; } } body { margin: 0; padding: 2.5rem 0 0; font-size: var(--alias-typography-label-sizeM-font-size); display: flex; flex-direction: column; height: 100%; } .main { height: 100%; width: 100%; position: fixed; } .map { display: flex; flex-direction: column; } .mainMap { width: 100%; flex-grow: 1; } .olSubMap.hidden, .gmSubMap.hidden { visibility: hidden; } /* 横向き */ @media only screen and (orientation: landscape) { /* ヘッダー分の高さを調整 */ .map { position: fixed; height: calc(100% - 2.5rem); width: 100%; } /* サイドバーを表示中のメインマップ */ .sideber { width: calc(100% - 23rem); left: 23rem; } /* サブマップを表示中のメインマップ */ .half { width: 50%; } /* サブマップとサイドバーを表示中のメインマップ */ .half-sideber { width: calc(50% - 11.5rem); } .olSubMap, .gmSubMap { left: 50%; width: 50%; position: fixed; .map { width: 50%; height: calc(100% - 2.5rem); position: fixed !important; } /* メインマップでサイドバーを表示中のサブマップ */ .sideber { width: calc(50% - 11.5rem); left: calc(50% + 11.5rem); } } /* メインマップでサイドバーを表示中のサブマップ(外枠) */ .subsideber { width: calc(50% - 11.5rem); left: calc(50% + 11.5rem); } } /* 横向き(Sサイズ、サイドバー表示時にツールバーが消える事を考慮) */ @media only screen and (orientation: landscape) and (max-width: 991px) and (max-height: 480px) { /* サイドバーを表示中のメインマップ */ .sideber { width: calc(100% - 20rem); left: 20rem; } /* サブマップとサイドバーを表示中のメインマップ */ .half-sideber { width: calc(50% - 10rem); } .olSubMap { /* メインマップでサイドバーを表示中のサブマップ */ .map.sideber { width: calc(50% - 10rem); left: calc(50% + 10rem); } } /* メインマップでサイドバーを表示中のサブマップ(外枠) */ .subsideber { width: calc(50% - 10rem); left: calc(50% + 10rem); } } /* 縦向き */ @media only screen and (orientation: portrait) { /* ヘッダー分の高さを調整 */ .map { position: fixed; height: calc(100% - 2.5rem); width: 100%; } .half { height: calc(50% - 1.25rem); } .olSubMap, .gmSubMap { top: calc(50% + 1.25rem); width: 100%; position: fixed; .map { height: calc(50% - 1.25rem); position: fixed !important; } } } .other-menu { left: auto; right: 0.5rem; } /* XS */ @media only screen and (orientation: portrait) and (max-width: 768px) { .sidebar { width: 100% !important; .toolbar { visibility: hidden; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; bottom: 54px; left: 50%; } } } /* S */ @media only screen and (orientation: landscape) and (max-width: 991px) { .sidebar { .toolbar { visibility: hidden; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; bottom: 8px; left: 50%; } } } /* M */ @media only screen and (orientation: portrait) and (min-width: 768px) and (max-width: 991px) { .sidebar { .sidebar-panel { position: absolute; left: 3rem; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; top: 48px; left: 50%; } } } @media only screen and (max-width: 714px) {} /* L */ @media only screen and (min-width: 992px) { .sidebar { .sidebar-panel { position: absolute; left: 3rem; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; top: 48px; left: 50%; } } } /* XL */ @media only screen and (min-width: 1200px) { .sidebar { .sidebar-panel { position: absolute; left: 3rem; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; top: 48px; left: 50%; } } } /* XXL */ @media only screen and (min-width: 1400px) { .sidebar { .sidebar-panel { position: absolute; left: 3rem; } } /* 通知トーストの表示位置 */ .toast { .main-container { position: absolute; top: 48px; left: 50%; } } } @media print { body { display: none; } }