/* 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: 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: 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;
          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: #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: 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 */