/* reference size */ :root { /* theme */ --color-primary5: #F0F9FF; --color-primary10: #C7E3FF; --color-primary20: #8FC8FF; --color-primary30: #56ACFF; --color-primary40: #1E90FF; --color-primary50: #0074E5; --color-primary60: #0056AA; --color-primary70: #00407F; --color-primary80: #002B55; --color-primary90: #00152A; --color-secondary5: #F0F5FB; --color-secondary10: #D1E2F5; --color-secondary20: #88B7EC; --color-secondary30: #4686CF; --color-secondary40: #1359A9; --color-secondary50: #004593; --color-secondary60: #003878; --color-secondary70: #002E62; --color-secondary80: #002248; --color-secondary90: #001D3F; --color-accent5: #FFF2F6; --color-accent10: #FFE3EB; --color-accent20: #FFC5D7; --color-accent30: #FFA4B4; --color-accent40: #FF8291; --color-accent50: #F65C70; --color-accent60: #CD365E; --color-accent70: #AA2142; --color-accent80: #752836; --color-accent90: #3D1530; /* color */ --color-background-site: #fff; --color-background-default-primary: #fff; --color-background-default-secondary: #F8F8FB; --color-background-default-tertiary: #EFEEF3; --color-background-default-quaternary: #DDDAE3; --color-background-default-primary-inverse: #333333; --color-background-default-secondary-inverse: #5A585E; --color-background-default-tertiary-inverse: #727077; --color-background-default-quaternary-inverse: #918F97; --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: #EFEEF3; --color-background-disabled-secondary: #DDDAE3; --color-font-default-primary: #333333; --color-font-default-secondary: #5A585E; --color-font-default-tertiary: #727077; --color-font-default-quaternary: #918F97; --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: #727077; --color-font-disabled-secondary: #5A585E; --color-stroke-default-primary: #333333; --color-stroke-default-secondary: #C1BFC8; --color-stroke-default-tertiary: #DDDAE3; --color-stroke-default-quaternary: #F0F0F5; --color-stroke-default-primary-inverse: #fff; --color-stroke-default-secondary-inverse: #727077; --color-stroke-default-tertiary-inverse: #5A585E; --color-stroke-default-quaternary-inverse: #333333; --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: #DDDAE3; --color-stroke-disabled-primary: #C1BFC8; --color-icon-default-primary: #333333; --color-icon-default-secondary: #727077; --color-icon-default-primary-inverse: #fff; --color-icon-default-secondary-inverse: rgba(255, 255, 255, 0.75); --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: #918F97; --color-icon-disabled-secondary: #727077; /* size */ --radius-none: 0; --radius-xsm: 0.4rem; --radius-sm: 0.8rem; --radius-md: 1.6rem; --radius-lg: 2.4rem; --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: 2.8rem; --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: 700; --size-font-weight-lg: 500; --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: 125.4rem; --size-wrap-md: 102.4rem; --size-wrap-sm: 80rem; --size-wrap-xsm: 48rem; --size-wrap-2xsm: 40rem; --size-wrap-full: 133.4rem; --size-wrap-spacing: 4rem; --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-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-lg); --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) { [data-responsive=true]: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; } } :root { --bg-site: var(--color-primary5); --color-primary5: #FFF8E9; --color-primary10: #FFEAC1; --color-primary20: #FFE2A7; --color-primary30: #FFD47C; --color-primary40: #FFC550; --color-primary50: #FFB724; --color-primary60: #98690A; --color-primary70: #66490E; --color-primary80: #4C370B; --color-primary90: #332507; --color-secondary5: #F8F2ED; --color-secondary10: #ECDCCD; --color-secondary20: #D9B99C; --color-secondary30: #C6976A; --color-secondary40: #B37439; --color-secondary50: #A05107; --color-secondary60: #804106; --color-secondary70: #603104; --color-secondary80: #402003; --color-secondary90: #201001; --color-accent5: #FFF4F0; --color-accent10: #FFDACC; --color-accent20: #FFB599; --color-accent30: #FF8F66; --color-accent40: #FF6A33; --color-accent50: #FF4500; --color-accent60: #D53209; --color-accent70: #992900; --color-accent80: #661C00; --color-accent90: #330E00; } body { -webkit-user-select: initial; -moz-user-select: initial; user-select: initial; } section.g-section { padding-bottom: 8rem; } section.g-section > header { display: flex; height: 5rem; max-width: var(--size-wrap); padding: 0 var(--size-wrap-spacing); margin: 0 auto; align-items: center; justify-content: flex-start; background-color: #F8F8FB; } 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: #918F97; } 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: #333333; } 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: #F8F8FB; } 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: "#F8F8FB"; } section.g-section > article ul.color.gray-color li:nth-of-type(3) { background-color: #EFEEF3; } 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: "#EFEEF3"; } section.g-section > article ul.color.gray-color li:nth-of-type(4) { background-color: #DDDAE3; } 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: "#DDDAE3"; } section.g-section > article ul.color.gray-color li:nth-of-type(5) { background-color: #C1BFC8; } 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: "#C1BFC8"; } section.g-section > article ul.color.gray-color li:nth-of-type(6) { background-color: #918F97; } 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: "#918F97"; } section.g-section > article ul.color.gray-color li:nth-of-type(7) { background-color: #727077; } 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: "#727077"; } section.g-section > article ul.color.gray-color li:nth-of-type(8) { background-color: #5A585E; } 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: "#5A585E"; } section.g-section > article ul.color.gray-color li:nth-of-type(9) { background-color: #333333; } 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: "#333333"; } 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: #333333; 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: #F8F8FB; } 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: flex; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.button li { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } section.g-section > article ul.button.size { flex-direction: column; } section.g-section > article ul.button.size li { flex-direction: row; 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: flex; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.badge-ul { display: flex; flex-wrap: wrap; gap: 0.8rem; } section.g-section > article ul.icon-wrap { display: flex; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article ul.icon-wrap li { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } section.g-section > article ul.profile-wrap { display: flex; flex-wrap: wrap; gap: 1.6rem; } section.g-section > article .paint-target { position: relative; }/*# sourceMappingURL=styleGuide.css.map */