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