/* reference size */ :root { /* theme */ --color-primary5: #ECF8F7; --color-primary10: #D6F8F5; --color-primary20: #AEEEE8; --color-primary30: #76E4DB; --color-primary40: #5FDDCD; --color-primary50: #42BDAE; --color-primary60: #23A091; --color-primary70: #158073; --color-primary80: #084D45; --color-primary90: #002723; --color-secondary5: #E9FCFF; --color-secondary10: #C6F7FF; --color-secondary20: #91E7F5; --color-secondary30: #51D8ED; --color-secondary40: #26C1D9; --color-secondary50: #15A9C0; --color-secondary60: #0B8FA4; --color-secondary70: #007B8E; --color-secondary80: #005765; --color-secondary90: #00353D; --color-accent5: #FFF9E8; --color-accent10: #FFF3D3; --color-accent20: #FFEBB3; --color-accent30: #FFE18F; --color-accent40: #FFD972; --color-accent50: #FFC833; --color-accent60: #DDA40B; --color-accent70: #AC7D00; --color-accent80: #715200; --color-accent90: #3E2D00; /* color */ --color-background-site: #fff; --color-background-default-primary: #fff; --color-background-default-secondary: #F7F7F8; --color-background-default-tertiary: #E6E8EA; --color-background-default-quaternary: #CDD1D5; --color-background-default-primary-inverse: #33363D; --color-background-default-secondary-inverse: #464C53; --color-background-default-tertiary-inverse: #58616A; --color-background-default-quaternary-inverse: #6D7882; --color-background-alpha-primary: rgba(255, 255, 255, 0.9); --color-background-alpha-primary-inverse: rgba(17, 17, 17, 0.75); --color-background-success-primary: #F3FCF3; --color-background-success-primary-inverse: #009500; --color-background-warning-primary: #FFF8E9; --color-background-warning-primary-inverse: #98690A; --color-background-info-primary: #F0F9FF; --color-background-info-primary-inverse: #0074E5; --color-background-danger-primary: #FEF1F1; --color-background-danger-primary-inverse: #EE0000; --color-background-brand-primary: var(--color-primary5); --color-background-brand-secondary: var(--color-secondary5); --color-background-brand-accent: var(--color-accent5); --color-background-brand-primary-inverse: var(--color-primary50); --color-background-brand-secondary-inverse: var(--color-secondary50); --color-background-brand-accent-inverse: var(--color-accent50); --color-background-brand-primary-inverse-hover: var(--color-primary60); --color-background-brand-secondary-inverse-hover: var(--color-secondary60); --color-background-brand-accent-inverse-hover: var(--color-accent60); --color-background-disabled-primary: #F7F7F8; --color-background-disabled-secondary: #E6E8EA; --color-font-default-primary: #33363D; --color-font-default-secondary: #464C53; --color-font-default-tertiary: #58616A; --color-font-default-quaternary: #6D7882; --color-font-default-primary-inverse: #fff; --color-font-default-secondary-inverse: rgba(255, 255, 255, 0.9); --color-font-default-tertiary-inverse: rgba(255, 255, 255, 0.8); --color-font-default-quaternary-inverse: rgba(255, 255, 255, 0.75); --color-font-success-primary: #006600; --color-font-success-primary-inverse: #F3FCF3; --color-font-warning-primary: #66490E; --color-font-warning-primary-inverse: #FFF8E9; --color-font-info-primary: #0056AA; --color-font-info-primary-inverse: #F0F9FF; --color-font-danger-primary: #CD0404; --color-font-danger-primary-inverse: #FEF1F1; --color-font-brand-primary: var(--color-primary60); --color-font-brand-secondary: var(--color-secondary60); --color-font-brand-accent: var(--color-accent60); --color-font-brand-primary-base: var(--color-primary50); --color-font-brand-accent-base: var(--color-accent50); --color-font-brand-secondary-base: var(--color-secondary50); --color-font-brand-accent-base: var(--color-accent50); --color-font-brand-primary-inverse: var(--color-primary5); --color-font-brand-secondary-inverse: var(--color-secondary5); --color-font-brand-accent-inverse: var(--color-accent5); --color-font-disabled-primary: #58616A; --color-font-disabled-secondary: #464C53; --color-stroke-default-primary: #33363D; --color-stroke-default-secondary: #B1B8BE; --color-stroke-default-tertiary: #CDD1D5; --color-stroke-default-quaternary: #E6E8EA; --color-stroke-default-primary-inverse: #fff; --color-stroke-default-secondary-inverse: #58616A; --color-stroke-default-tertiary-inverse: #464C53; --color-stroke-default-quaternary-inverse: #33363D; --color-stroke-success-primary: #009500; --color-stroke-success-primary-inverse: #D6F5D6; --color-stroke-warning-primary: #98690A; --color-stroke-warning-primary-inverse: #FFB724; --color-stroke-info-primary: #0074E5; --color-stroke-info-primary-inverse: #C7E3FF; --color-stroke-danger-primary: #EE0000; --color-stroke-danger-primary-inverse: #FCCCCC; --color-stroke-brand-primary: var(--color-primary50); --color-stroke-brand-primary-inverse: var(--color-primary10); --color-stroke-brand-secondary: var(--color-secondary50); --color-stroke-brand-secondary-inverse: var(--color-secondary10); --color-stroke-brand-accent: var(--color-accent50); --color-stroke-brand-accent-inverse: var(--color-accent10); --color-stroke-disabled-primary: #CDD1D5; --color-stroke-disabled-secondary: #B1B8BE; --color-icon-default-primary: #33363D; --color-icon-default-secondary: #58616A; --color-icon-default-tertiary: #B1B8BE; --color-icon-default-primary-inverse: #fff; --color-icon-default-secondary-inverse: rgba(255, 255, 255, 0.75); --color-icon-default-tertiary-inverse: rgba(255, 255, 255, 0.25); --color-icon-success-primary: #009500; --color-icon-success-primary-inverse: #F3FCF3; --color-icon-warning-primary: #98690A; --color-icon-warning-primary-inverse: #FFF8E9; --color-icon-info-primary: #0074E5; --color-icon-info-primary-inverse: #F0F9FF; --color-icon-danger-primary: #EE0000; --color-icon-danger-primary-inverse: #FEF1F1; --color-icon-brand-primary: var(--color-primary50); --color-icon-brand-secondary: var(--color-secondary50); --color-icon-brand-accent: var(--color-accent50); --color-icon-brand-primary-inverse: var(--color-primary5); --color-icon-brand-secondary-inverse: var(--color-secondary5); --color-icon-brand-accent-inverse: var(--color-accent5); --color-icon-disabled-primary: #6D7882; --color-icon-disabled-secondary: #58616A; /* size */ --radius-none: 0; --radius-xsm: 0.8rem; --radius-sm: 1.2rem; --radius-md: 2.4rem; --radius-lg: 3.2rem; --radius-xlg: 4rem; --radius-2xlg: 8rem; --radius-full: 100%; --spacing-none: 0; --spacing-3xsm: 0.2rem; --spacing-2xsm: 0.4rem; --spacing-xsm: 0.8rem; --spacing-sm: 1.2rem; --spacing-md: 1.6rem; --spacing-lg: 2.4rem; --spacing-xlg: 3.2rem; --spacing-2xlg: 4rem; --spacing-3xlg: 8rem; --size-stroke-none: 0; --size-stroke-xsm: 0.1rem; --size-stroke-sm: 0.2rem; --size-stroke-md: 0.4rem; --size-stroke-lg: 0.8rem; --size-font-4xlg: 4.8rem; --size-font-3xlg: 4rem; --size-font-2xlg: 3.2rem; --size-font-xlg: 2.4rem; --size-font-lg: 2rem; --size-font-md: 1.8rem; --size-font-sm: 1.6rem; --size-font-xsm: 1.4rem; --size-font-2xsm: 1.2rem; --size-font-weight-xlg: 800; --size-font-weight-lg: 700; --size-font-weight-md: 400; --size-font-lineheight-xlg: 2; --size-font-lineheight-lg: 1.5; --size-font-lineheight-md: 1.4; --size-font-lineheight-sm: 1.3; --size-font-lineheight-xsm: 1.2; --size-icon-lg: 2.4rem; --size-icon-md: 2.0rem; --size-icon-sm: 1.6rem; --spacing-section-sm: var(--spacing-2xlg); --spacing-section-md: var(--spacing-3xlg); --spacing-section-lg: 16rem; --size-wrap: 144rem; --size-wrap-md: 102.4rem; --size-wrap-sm: 80rem; --size-wrap-xsm: 48rem; --size-wrap-2xsm: 40rem; --size-wrap-full: 144rem; --size-wrap-spacing: 4rem; --size-gutter-sm:2.4rem; --size-gutter-md:4rem; --size-gutter-lg:6.4rem; --size-gutter-xlg:8rem; --size-popup-xsm: 32rem; --size-popup-sm: 44rem; --size-popup-md: 64rem; --size-popup-lg: 80rem; --size-popup-xlg: var(--size-wrap); --size-popup-round: var(--radius-radius-md); --size-popup-padding: var(--spacing-spacing-2xlg); --form-width-lg: 40rem; --form-width-md: 24rem; --form-width-sm: 16rem; --form-width-xsm: 8rem; --form-height-lg: 6.4rem; --form-height-md: 4.8rem; --form-height-sm: 3.6rem; --form-height-xsm: 2.8rem; } /* theme */ /* color */ /* size */ /* etc */ :root { --font-heading-lg: 5.6rem; --font-heading-md: var(--size-font-4xlg); --font-heading-sm: var(--size-font-3xlg); --font-tit-xlg: var(--size-font-3xlg); --font-tit-lg: var(--size-font-2xlg); --font-tit-md: var(--size-font-xlg); --font-tit-sm: var(--size-font-md); --font-tit-xsm: var(--size-font-sm); --font-body-lg: var(--size-font-md); --font-body-md: var(--size-font-sm); --font-body-sm: var(--size-font-xsm); --font-body-xsm: var(--size-font-2xsm); --font-label-lg: var(--size-font-md); --font-label-md: var(--size-font-sm); --font-label-sm: var(--size-font-xsm); --font-label-xsm: var(--size-font-2xsm); --font-tit-label: var(--size-font-sm); } @media (max-width: 1279px) { :root { --font-heading-lg: 5.2rem; --font-heading-md: var(--size-font-4xlg); --font-heading-sm: var(--size-font-3xlg); --font-tit-xlg: 3.6rem; --font-tit-lg: 2.6rem; --font-tit-md: var(--size-font-md); --font-tit-sm: var(--size-font-sm); --font-tit-xsm: var(--size-font-xsm); --font-body-lg: var(--size-font-sm); --font-body-md: var(--size-font-xsm); --font-body-sm: var(--size-font-2xsm); --font-body-xsm: 1rem; --font-label-lg: var(--size-font-sm); --font-label-md: var(--size-font-xsm); --font-label-sm: var(--size-font-2xsm); --font-label-xsm: 1rem; --font-tit-label: var(--size-font-xsm); --spacing-section-sm: var(--spacing-2xlg); --spacing-section-md: var(--spacing-3xlg); --spacing-section-lg: 16rem; --size-wrap-spacing: 2.4rem; } } @media (max-width: 767px) { :root { --font-heading-lg: 4.8rem; --font-heading-md: var(--size-font-4xlg); --font-heading-sm: var(--size-font-3xlg); --font-tit-xlg: 3.6rem; --font-tit-lg: 2.4rem; --font-tit-md: var(--size-font-md); --font-tit-sm: var(--size-font-sm); --font-tit-xsm: var(--size-font-xsm); --font-body-lg: var(--size-font-sm); --font-body-md: var(--size-font-xsm); --font-body-sm: var(--size-font-2xsm); --font-body-xsm: 1rem; --font-label-lg: var(--size-font-sm); --font-label-md: var(--size-font-xsm); --font-label-sm: var(--size-font-2xsm); --font-label-xsm: 1rem; --font-tit-label: var(--size-font-xsm); --size-wrap-spacing: 1.6rem; --spacing-section-lg: 12rem; --form-height-lg: 5.6rem; --form-height-md: 4rem; --form-height-sm: 3.2rem; --form-height-xsm: 2.4rem; --pop-gap: 1.6rem; } } body { -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } section.g-section { padding-bottom: 8rem; } section.g-section > header { display: -webkit-box; display: -ms-flexbox; display: flex; height: 5rem; max-width: var(--size-wrap); padding: 0 var(--size-wrap-spacing); margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-color: #F7F7F8; } section.g-section > header h1 { font-size: var(--font-tit-sm); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > header h2 { font-size: var(--font-body-md); font-weight: var(--size-font-weight-md); } section.g-section > header h2::before { content: ""; display: inline-block; width: 0.1rem; height: 1rem; vertical-align: baseline; background-color: var(--color-font-default-tertiary); margin: 0 1rem; } section.g-section > header h1, section.g-section > header h2 { color: var(--color-font-default-tertiary); } section.g-section > header em { font-style: normal; margin-left: auto; } section.g-section > article { max-width: var(--size-wrap); padding: 0 var(--size-wrap-spacing); margin: 0 auto; margin-top: 4rem; } section.g-section > article > h3 { font-size: var(--font-tit-md); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article > h3 + p { margin-top: 0.8rem; color: #6D7882; } section.g-section > article > h4 { margin-top: 1.6rem; font-size: var(--font-tit-sm); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article > h5 { margin-top: 1.6rem; font-size: var(--font-tit-sm); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article > ul, section.g-section > article > table, section.g-section > article > div:not(.dim) { margin-top: 1.6rem; } section.g-section > article > ul:nth-of-type(1), section.g-section > article > table:nth-of-type(1), section.g-section > article > div:not(.dim):nth-of-type(1) { margin-top: 2.4rem; } section.g-section > article ul.color { display: grid; } section.g-section > article ul.color li { padding: 3.6rem 1rem 1.6rem; word-break: break-all; } section.g-section > article ul.color li::before, section.g-section > article ul.color li::after { display: block; } section.g-section > article ul.color li::after { opacity: 0.5; } section.g-section > article ul.color.gray-color { grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); } section.g-section > article ul.color.gray-color li { color: #33363D; } section.g-section > article ul.color.gray-color li:nth-of-type(5) ~ li { color: #fff; } section.g-section > article ul.color.gray-color li:nth-of-type(1) { background-color: #fff; } section.g-section > article ul.color.gray-color li:nth-of-type(1)::before { content: "$white"; } section.g-section > article ul.color.gray-color li:nth-of-type(1)::after { content: "#fff"; } section.g-section > article ul.color.gray-color li:nth-of-type(2) { background-color: #F7F7F8; } section.g-section > article ul.color.gray-color li:nth-of-type(2)::before { content: "$grayColor1"; } section.g-section > article ul.color.gray-color li:nth-of-type(2)::after { content: "#F7F7F8"; } section.g-section > article ul.color.gray-color li:nth-of-type(3) { background-color: #CDD1D5; } section.g-section > article ul.color.gray-color li:nth-of-type(3)::before { content: "$grayColor2"; } section.g-section > article ul.color.gray-color li:nth-of-type(3)::after { content: "#CDD1D5"; } section.g-section > article ul.color.gray-color li:nth-of-type(4) { background-color: #B1B8BE; } section.g-section > article ul.color.gray-color li:nth-of-type(4)::before { content: "$grayColor3"; } section.g-section > article ul.color.gray-color li:nth-of-type(4)::after { content: "#B1B8BE"; } section.g-section > article ul.color.gray-color li:nth-of-type(5) { background-color: #8A949E; } section.g-section > article ul.color.gray-color li:nth-of-type(5)::before { content: "$grayColor4"; } section.g-section > article ul.color.gray-color li:nth-of-type(5)::after { content: "#8A949E"; } section.g-section > article ul.color.gray-color li:nth-of-type(6) { background-color: #6D7882; } section.g-section > article ul.color.gray-color li:nth-of-type(6)::before { content: "$grayColor5"; } section.g-section > article ul.color.gray-color li:nth-of-type(6)::after { content: "#6D7882"; } section.g-section > article ul.color.gray-color li:nth-of-type(7) { background-color: #58616A; } section.g-section > article ul.color.gray-color li:nth-of-type(7)::before { content: "$grayColor6"; } section.g-section > article ul.color.gray-color li:nth-of-type(7)::after { content: "#58616A"; } section.g-section > article ul.color.gray-color li:nth-of-type(8) { background-color: #464C53; } section.g-section > article ul.color.gray-color li:nth-of-type(8)::before { content: "$grayColor7"; } section.g-section > article ul.color.gray-color li:nth-of-type(8)::after { content: "#464C53"; } section.g-section > article ul.color.gray-color li:nth-of-type(9) { background-color: #33363D; } section.g-section > article ul.color.gray-color li:nth-of-type(9)::before { content: "$grayColor8"; } section.g-section > article ul.color.gray-color li:nth-of-type(9)::after { content: "#33363D"; } section.g-section > article ul.color.gray-color li:nth-of-type(10) { background-color: #111; } section.g-section > article ul.color.gray-color li:nth-of-type(10)::before { content: "$black"; } section.g-section > article ul.color.gray-color li:nth-of-type(10)::after { content: "#111"; } section.g-section > article table.typography td { padding: 0.8rem 1.6rem; height: 8rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section.g-section > article table.typography td.title { padding: 0.8rem 1.6rem 0.8rem 4rem; text-align: left; } section.g-section > article table.typography td:first-child { padding: 0.8rem 1rem 0.8rem 4rem; text-align: left; } section.g-section > article table.typography thead { background-color: #33363D; color: #fff; } section.g-section > article table.typography thead td { height: 4rem; } section.g-section > article table.typography tbody tr:nth-of-type(odd) { background-color: #F7F7F8; } section.g-section > article table.typography:nth-of-type(1) tbody tr:nth-of-type(1) td:first-child { font-size: var(--font-tit-xlg); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article table.typography:nth-of-type(1) tbody tr:nth-of-type(2) td:first-child { font-size: var(--font-tit-lg); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article table.typography:nth-of-type(1) tbody tr:nth-of-type(3) td:first-child { font-size: var(--font-tit-md); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article table.typography:nth-of-type(1) tbody tr:nth-of-type(4) td:first-child { font-size: var(--font-tit-sm); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article table.typography:nth-of-type(1) tbody tr:nth-of-type(5) td:first-child { font-size: var(--font-tit-xsm); font-weight: var(--size-font-weight-xlg); line-height: var(--size-font-lineheight-sm); } section.g-section > article ul.button { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.button li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; } section.g-section > article ul.button.size { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } section.g-section > article ul.button.size li { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.g-section > article ul.button.size li h5 { width: 6rem; } section.g-section > article ul.button button:not(.btn-like)::after { content: "Normal"; } section.g-section > article ul.button button:not(.btn-like):hover::after { content: "Hover"; } section.g-section > article ul.button button:not(.btn-like):disabled::after { content: "Inactive"; } section.g-section > article ul.input { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.badge-ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.8rem; } section.g-section > article ul.icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.icon-wrap li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; } section.g-section > article ul.profile-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article .paint-target { position: relative; }/*# sourceMappingURL=styleGuide.css.map */