@charset "UTF-8";

/*====================================================================================
[TABLE OF CONTENT]

1. FOUNDATION.
   1.1. DESIGN SYSTEM.
   1.2. BASE.
   1.3. RESET.
2. UTILITY.
3. LAYOUT.
   3.1. CONTAINER.
   3.2. HEADER.
   3.3. FOOTER.
4. COMPONENT.
   4.1. LOGO.
   4.2. BUTTON.
   4.3. HEADING.
   4.4. TEXT.
   4.5. LINK.
   4.6. ITEM.
   4.7. LIST.
   4.8. POST.
   4.9. MAP.
   4.10. CARD.
   4.11. NOTIFY.
   4.12. BOX.
5. PROJECT.
   5.1. SECTION GX.
   5.2. SECTION GX MAIN VISUAL.
   5.3. SECTION GX ROADMAP.
   5.4. SECTION GX TIMELINE.
   5.5. SECTION GX ACHIEVEMENTS.
   5.6. SECTION GX ISSUES.
   5.7. SECTION GX CONTACT.
====================================================================================*/

/*====================================================================================
1. FOUNDATION.
====================================================================================*/

/*------------------------------------------------------------------------------------
1.1. DESIGN SYSTEM.
------------------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");

/*---------- PRIMITIVE TOKENS ----------*/
:root {
  --color-green-50: #f4f6f0;
  --color-green-300: #78dea0;
  --color-green-300-rgb: 120, 222, 160;
  --color-green-500: #3dba6e;
  --color-green-500-rgb: 61, 186, 110;
  --color-green-600: #2e9556;
  --color-green-700: #247c46;
  --color-green-800: #13542c;

  --color-yellow-500: #e8b445;
  --color-yellow-700: #c8951a;
  --color-yellow-700-rgb: 200, 149, 26;

  --color-cyan-300: #80ddfe;

  --color-gray-300: #c1c1c1;
  --color-gray-800: #333333;

  --color-navy-700: #2e4a88;
  --color-navy-800: #1a2744;
  --color-navy-900: #0f1a30;

  --color-neutral-0: #ffffff;
  --color-neutral-0-rgb: 255, 255, 255;
  --color-neutral-1000: #000000;
  --color-neutral-1000-rgb: 0, 0, 0;

  /* Font size */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-35: 35px;
  --font-size-40: 40px;
  --font-size-45: 45px;
  --font-size-50: 50px;
  --font-size-55: 55px;
  --font-size-55: 55px;
  --font-size-100: 100px;

  /* Letter spacing */
  --letter-spacing-002: 0.02em;

  /* Font weight */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-700: 700;
  --font-weight-900: 900;

  /* Font family */
  --font-family-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-family-noto-serif-jp: "Noto Serif JP", serif;

  /* Width */
  --width-3: 3px;
  --width-4: 4px;
  --width-5: 5px;
  --width-7: 7px;
  --width-18: 18px;
  --width-20: 20px;
  --width-24: 24px;
  --width-28: 28px;
  --width-50: 50px;
  --width-55: 55px;
  --width-60: 60px;
  --width-70: 70px;
  --width-80: 80px;
  --width-135: 135px;
  --width-660: 660px;
  --width-900: 900px;
  --width-1110: 1110px;
  --width-1199: 1199px;

  /* Height */
  --height-1: 1px;
  --height-3: 3px;
  --height-22: 22px;
  --height-26: 26px;
  --height-40: 40px;
  --height-50: 50px;
  --height-55: 55px;
  --height-60: 60px;
  --height-70: 70px;
  --height-80: 80px;
  --height-90: 90px;
  --height-75vw: 75vw;
  --height-300: 300px;

  /* Space */
  --space-negative-1: -1px;
  --space-negative-2: -2px;
  --space-negative-3: -3px;
  --space-negative-4: -4px;
  --space-negative-5: -5px;
  --space-negative-7: -7px;
  --space-negative-8: -8px;
  --space-negative-15: -15px;
  --space-negative-22: -22px;
  --space-negative-35: -35px;
  --space-negative-40: -40px;
  --space-0: 0;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-17: 17px;
  --space-18: 18px;
  --space-19: 19px;
  --space-20: 20px;
  --space-25: 25px;
  --space-26: 26px;
  --space-27: 27px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-37: 37px;
  --space-40: 40px;
  --space-45: 45px;
  --space-46: 46px;
  --space-47: 47px;
  --space-48: 48px;
  --space-50: 50px;
  --space-55: 55px;
  --space-60: 60px;
  --space-64: 64px;
  --space-70: 70px;
  --space-75: 75px;
  --space-100: 100px;

  /* Duration */
  --duration-02: 0.2s;
  --duration-03: 0.3s;

  /* Radius */
  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-15: 15px;
  --radius-20: 20px;
}

/*---------- SEMANTIC TOKENS ----------*/
:root {
  /* UI font family */
  --ui-sans-serif: var(--font-family-noto-sans-jp);
  --ui-serif: var(--font-family-noto-serif-jp);

  /* UI link */
  --ui-link-text-primary: var(--color-green-500);

  /* UI button */
  --ui-btn-text-inverted: var(--color-neutral-0);
  --ui-btn-bg-secondary-accented: var(--color-yellow-700);
  --ui-btn-border-secondary-accented: var(--color-yellow-700);

  /* UI heading */
  --ui-heading-text-light: var(--color-neutral-0);
  --ui-heading-text-dark: var(--color-navy-800);
  --ui-heading-text-primary: var(--color-green-500);
  --ui-heading-bg-light: var(--color-neutral-0);
  --ui-heading-bg-primary-pale: var(--color-green-50);
  --ui-heading-bg-primary-soft: var(--color-green-300);
  --ui-heading-bg-primary-soft-rgb: var(--color-green-300-rgb);
  --ui-heading-bg-primary: var(--color-green-500);
  --ui-heading-bg-primary-rgb: var(--color-green-500-rgb);
  --ui-heading-border-primary: var(--color-green-500);

  /* UI post */
  --ui-post-text-light: var(--color-neutral-0);

  /* UI map */
  --ui-map-text-light: var(--color-neutral-0);
  --ui-map-text-light-rgb: var(--color-neutral-0-rgb);
  --ui-map-text-muted: var(--color-gray-300);
  --ui-map-text-primary: var(--color-green-500);
  --ui-map-text-secondary: var(--color-yellow-500);
  --ui-map-text-tertiary: var(--color-cyan-300);
  --ui-map-font-family: var(--ui-sans-serif);
  --ui-map-bg-primary: var(--color-green-500);
  --ui-map-bg-secondary: var(--color-yellow-500);
  --ui-map-bg-tertiary: var(--color-cyan-300);

  /* UI timeline */
  --ui-timeline-font-family: var(--ui-sans-serif);
  --ui-timeline-text-light: var(--color-neutral-0);
  --ui-timeline-text-dark: var(--color-navy-800);
  --ui-timeline-bg-light: var(--color-neutral-0);
  --ui-timeline-bg-darker-rgb: var(--color-neutral-1000-rgb);
  --ui-timeline-bg-pale: var(--color-green-50);
  --ui-timeline-bg-primary: var(--color-green-500);
  --ui-timeline-bg-primary-elevated: var(--color-green-600);
  --ui-timeline-bg-primary-dark: var(--color-green-700);
  --ui-timeline-bg-primary-darker: var(--color-green-800);
  --ui-timeline-border-primary-darker: var(--color-green-800);
  --ui-timeline-border-primary-dark: var(--color-green-700);
  --ui-timeline-border-primary-elevated: var(--color-green-600);
  --ui-timeline-border-primary: var(--color-green-500);

  /* UI card */
  --ui-card-text-primary: var(--color-green-500);
  --ui-card-border-primary: var(--color-green-500);
  --ui-card-bg-pale: var(--color-green-50);
  --ui-card-bg-primary: var(--color-green-500);

  /* UI notify */
  --ui-notify-text-secondary-dark: var(--color-yellow-700);
  --ui-notify-bg-secondary-dark-rgb: var(--color-yellow-700-rgb);

  /* UI box */
  --ui-box-bg-light: var(--color-neutral-0);
  --ui-box-bg-pale: var(--color-green-50);
  --ui-box-text-primary: var(--color-green-500);
  --ui-box-border-primary: var(--color-green-500);

  /* UI item */
  --ui-item-text-light: var(--color-neutral-0);
  --ui-item-text-dark: var(--color-neutral-800);
  --ui-item-bg-light: var(--color-neutral-0);
  --ui-item-bg-light-rgb: var(--color-neutral-0-rgb);
  --ui-item-bg-primary: var(--color-green-500);

  /* UI project */
  --ui-project-text-light: var(--color-neutral-0);

  /* UI body */
  --ui-body-text: var(--color-gray-800);
  --ui-body-background: var(--color-neutral-0);
  --ui-body-font-weight: var(--font-weight-400);
  --ui-body-font-family: var(--ui-serif);
  --ui-body-width: var(--width-1199);

  /* UI transition */
  --ui-transition-radius-default: border-radius var(--duration-03) ease;
  --ui-transition-color-default: color var(--duration-03) ease;
  --ui-transition-bg-default: background-color var(--duration-03) ease;
  --ui-transition-decoration-color-default: text-decoration-color
    var(--duration-03) ease;
}

@media (max-width: 767.98px) {
  :root {
    /* UI body SP */
    --ui-body-font-size: var(--font-size-14);
    --ui-body-font-size-sm: var(--font-size-13);
    --ui-body-font-size-md: var(--font-size-16);

    --ui-height-header: var(--space-60);
  }
}

@media (min-width: 768px) {
  :root {
    /* UI body PC */
    --ui-body-font-size: var(--font-size-16);
    --ui-body-font-size-sm: var(--font-size-14);
    --ui-body-font-size-md: var(--font-size-18);

    --ui-height-header: var(--space-70);
  }
}

/*---------- LAYOUT TOKENS ----------*/
:root {
  /* Layout container */
  --l-container-padding-x-md: var(--space-15);

  /* Layout header */
  --l-header-gx-btn: var(--width-135);
  --l-header-gx-gap: var(--space-25);
  --l-header-gx-bg: var(--color-navy-700);
  --l-header-gx-border-y: 1px solid rgb(var(--color-green-500-rgb), 33%);

  /* Layout footer */
  --l-footer-gx-row-margin-y-end: var(--space-25);
  --l-footer-gx-copy-font-size: var(--ui-body-font-size-sm);
}

@media (max-width: 767.98px) {
  :root {
    /* Layout header SP */
    --l-header-gx-padding-y: var(--space-10);

    /* Layout footer SP */
    --l-footer-gx-padding-y: var(--space-35) var(--space-25);
    --l-footer-gx-logo-margin-y-end: var(--space-15);
  }
}

@media (min-width: 768px) {
  :root {
    /* Layout container PC */
    --l-container-max-width-md: var(--width-1110);

    /* Layout header PC */
    --l-header-gx-padding-y: var(--space-15);

    /* Layout footer PC */
    --l-footer-gx-padding-y: var(--space-37) var(--space-30);
  }
}

/*---------- PROJECT TOKENS ----------*/
:root {
  /* PROJECT GX MAIN VISUAL */
  --p-gx-mv-color: var(--ui-project-text-light);
  --p-gx-mv-font-weight: var(--font-weight-500);
  --p-gx-mv-letter-spacing: var(--letter-spacing-002);

  /* PROJECT GX CONTACT */
  --p-gx-contact-color: var(--ui-project-text-light);
}

@media (max-width: 767.98px) {
  :root {
    /* PROJECT GX SP */
    --p-gx-padding-y: var(--space-50);

    /* PROJECT GX MAIN VISUAL SP */
    --p-gx-mv-img-height: calc(var(--height-75vw) + var(--ui-height-header));
    --p-gx-mv-img-max-height: var(--height-350);
    --p-gx-mv-margin-y-start: var(--space-10);
    --p-gx-mv-font-size: clamp(var(--font-size-12), 3.5vw, var(--font-size-14));

    /* PROJECT GX ROADMAP SP */
    --p-gx-roadmap-margin-y-end: var(--space-30);

    /* PROJECT GX TIMELINE SP */
    --p-gx-timeline-heading-margin-y-end: var(--space-20);
    --p-gx-timeline-note-margin-y-start: var(--space-10);
    --p-gx-timeline-post-margin-y-end: var(--space-30);
    --p-gx-timeline-notify-margin-y-start: var(--space-30);

    /* PROJECT GX ISSUES SP */
    --p-gx-issues-heading-margin-y-end: var(--space-20);
    --p-gx-issues-list-margin-y-end: var(--space-15);

    /* PROJECT GX CONTACT SP */
    --p-gx-contact-heading-margin-y-end: var(--space-20);
    --p-gx-contact-desc-margin-y-end: var(--space-30);
    --p-gx-contact-note-margin-y-start: var(--space-15);
  }
}

@media (min-width: 768px) {
  :root {
    /* PROJECT GX PC */
    --p-gx-padding-y: var(--space-100);

    /* PROJECT GX MAIN VISUAL PC */
    --p-gx-mv-margin-y-start: var(--space-18);
    --p-gx-mv-font-size: var(--font-size-18);

    /* PROJECT GX ROADMAP PC */
    --p-gx-roadmap-margin-y-end: var(--space-60);

    /* PROJECT GX TIMELINE PC */
    --p-gx-timeline-heading-margin-y-end: var(--space-45);
    --p-gx-timeline-note-margin-y-start: var(--space-17);
    --p-gx-timeline-post-margin-y-end: var(--space-60);
    --p-gx-timeline-notify-margin-y-start: var(--space-50);

    /* PROJECT GX ISSUES PC */
    --p-gx-issues-heading-margin-y-end: var(--space-45);
    --p-gx-issues-list-margin-y-end: var(--space-18);

    /* PROJECT GX CONTACT PC */
    --p-gx-contact-heading-margin-y-end: var(--space-46);
    --p-gx-contact-desc-margin-y-end: var(--space-47);
    --p-gx-contact-note-margin-y-start: var(--space-18);
  }
}

/*---------- COMPONENT TOKENS ----------*/
:root {
  /* COMPONENT LINK EXTERNAL */
  --c-link-external-font-size: var(--ui-body-font-size);
  --c-link-external-font-weight: var(--font-weight-400);
  --c-link-external-color-hover: var(--ui-link-text-primary);

  /* COMPONENT BUTTON GX */
  --c-btn-gx-min-block: var(--height-40);
  --c-btn-gx-padding-y: var(--space-5);
  --c-btn-gx-padding-x: var(--space-10);
  --c-btn-gx-font-size: var(--ui-body-font-size);
  --c-btn-gx-font-family: var(--ui-sans-serif);
  --c-btn-gx-font-weight: var(--font-weight-700);
  --c-btn-gx-text: var(--ui-btn-text-inverted);
  --c-btn-gx-background: var(--ui-btn-bg-secondary-accented);
  --c-btn-gx-radius-hover: var(--radius-0);

  /* COMPONENT HEADING MAIN VISUAL GX */
  --c-heading-mv-font-weight: var(--font-weight-500);
  --c-heading-mv-font-weight-title: var(--font-weight-700);
  --c-heading-mv-color: var(--ui-heading-text-primary);
  --c-heading-mv-color-title: var(--ui-heading-text-light);
  --c-heading-mv-box-bg: rgba(var(--ui-heading-bg-primary-soft-rgb), 10%);
  --c-heading-mv-border: 1px solid var(--ui-heading-border-primary);
  --c-heading-mv-border-rgb: 1px solid
    rgba(var(--ui-heading-bg-primary-rgb), 50%);

  /* COMPONENT HEADING GX */
  --c-heading-gx-line-height: var(--height-1);
  --c-heading-gx-border: 1px solid var(--ui-heading-border-primary);
  --c-heading-gx-color: var(--ui-heading-text-primary);
  --c-heading-gx-color-dark: var(--ui-heading-text-dark);
  --c-heading-gx-color-light: var(--ui-heading-text-light);
  --c-heading-gx-title-font-weight: var(--font-weight-700);
  --c-heading-gx-text-font-size: var(--ui-body-font-size);
  --c-heading-gx-text-font-weight: var(--font-weight-500);

  /* COMPONENT POST GX */
  --c-post-gx-color-light: var(--ui-post-text-light);

  /* COMPONENT MAP GX */
  --c-map-gx-item-before-width: var(--space-5);
  --c-map-gx-item-before-inset-y: var(--space-negative-1);
  --c-map-gx-item-before-inset-x-start: var(--space-negative-1);
  --c-map-gx-title-font-weight: var(--font-weight-700);
  --c-map-gx-title-font-family: var(--ui-map-font-family);
  --c-map-gx-text-font-color: var(--ui-map-text-muted);
  --c-map-gx-text-font-size: var(--ui-body-font-size);
  --c-map-gx-text-font-weight: var(--font-weight-500);
  --c-map-gx-color-primary: var(--ui-map-text-primary);
  --c-map-gx-color-secondary: var(--ui-map-text-secondary);
  --c-map-gx-color-tertiary: var(--ui-map-text-tertiary);
  --c-map-gx-desc-color: var(--ui-map-text-light);
  --c-map-gx-desc-strong-font-size: var(--ui-body-font-size-md);
  --c-map-gx-desc-strong-font-weight: var(--font-weight-700);

  /* COMPONENT LIST TIMELINE GX */
  --c-list-timeline-gx-before-radius: var(--radius-3);
  --c-list-timeline-gx-before-inset-x-start: var(--space-0);
  --c-list-timeline-gx-before-bg-0: var(--ui-timeline-bg-primary-darker);
  --c-list-timeline-gx-before-bg-100: var(--ui-timeline-bg-primary);

  /* COMPONENT TIMELINE GX */
  --c-timeline-gx-header-margin-y-end: var(--space-11);
  --c-timeline-gx-node-padding: var(--space-4);
  --c-timeline-gx-node-color: var(--ui-timeline-text-light);
  --c-timeline-gx-node-bg: var(--ui-timeline-bg-pale);
  --c-timeline-gx-node-font-size: var(--ui-body-font-size-md);
  --c-timeline-gx-node-font-weight: var(--font-weight-700);
  --c-timeline-gx-node-font-family: var(--ui-timeline-font-family);
  --c-timeline-gx-node-border-v1: 1px solid
    var(--ui-timeline-border-primary-darker);
  --c-timeline-gx-node-border-v2: 1px solid
    var(--ui-timeline-border-primary-dark);
  --c-timeline-gx-node-border-v3: 1px solid
    var(--ui-timeline-border-primary-elevated);
  --c-timeline-gx-node-border-v4: 1px solid var(--ui-timeline-border-primary);
  --c-timeline-gx-node-bg-v1: var(--ui-timeline-border-primary-darker);
  --c-timeline-gx-node-bg-v2: var(--ui-timeline-bg-primary-dark);
  --c-timeline-gx-node-bg-v3: var(--ui-timeline-bg-primary);
  --c-timeline-gx-title-color: var(--ui-timeline-text-dark);
  --c-timeline-gx-title-font-weight: var(--font-weight-900);
  --c-timeline-gx-body-padding: var(--space-20) var(--space-15) var(--space-20)
    var(--space-17);
  --c-timeline-gx-body-bg: var(--ui-timeline-bg-light);
  --c-timeline-gx-body-shadow: 0 0 5px
    rgba(var(--ui-timeline-bg-darker-rgb), 10%);
  --c-timeline-gx-body-border-y-end: 5px solid var(--ui-timeline-border-primary);

  /* COMPONENT HEADING CARD */
  --c-heading-card-padding-x-start: var(--space-60);
  --c-heading-card-circle-inset-x-start: var(--space-10);
  --c-heading-card-circle-width: var(--width-80);
  --c-heading-card-circle-height: var(--height-80);
  --c-heading-card-circle-margin-y-start: var(--space-negative-40);
  --c-heading-card-circle-bg: var(--ui-heading-bg-primary-pale);
  --c-heading-card-body-bg: var(--ui-heading-bg-primary);
  --c-heading-card-body-padding: var(--space-10) var(--space-15) var(--space-10)
    var(--space-40);
  --c-heading-card-text-color: var(--ui-heading-text-light);
  --c-heading-card-text-font-size: var(--font-size-14);
  --c-heading-card-text-font-weight: var(--font-weight-700);

  --c-heading-card-v1-padding-x-start: var(--space-50);
  --c-heading-card-v1-circle-width: var(--width-70);
  --c-heading-card-v1-circle-height: var(--height-70);
  --c-heading-card-v1-circle-margin-y-start: var(--space-negative-35);
  --c-heading-card-v1-icon-margin-y-start: var(--space-5);

  /* COMPONENT CARD GX */
  --c-card-gx-border-y: var(--space-30) var(--space-20);
  --c-card-gx-border: 1px solid var(--ui-card-border-primary);
  --c-card-gx-color: var(--ui-card-border-primary);
  --c-card-gx-title-font-weight: var(--font-weight-700);
  --c-card-gx-note-wrap-padding: var(--space-13) var(--space-18);
  --c-card-gx-note-wrap-font-size: var(--ui-body-font-size-sm);
  --c-card-gx-note-wrap-bg: var(--ui-card-bg-pale);
  --c-card-gx-note-wrap-border: 2px solid var(--ui-card-border-primary);

  /* COMPONENT NOTIFY GX */
  --c-notify-gx-text: var(--ui-notify-text-secondary-dark);
  --c-notify-gx-text-strong-font-weight: var(--font-weight-700);
  --c-notify-gx-bg-rgb: rgb(var(--ui-notify-bg-secondary-dark-rgb), 10%);
  --c-notify-gx-border: 1px solid
    rgba(var(--ui-notify-bg-secondary-dark-rgb), 30%);

  /* COMPONENT BOX GX */
  --c-box-gx-padding-y-start: var(--space-40);
  --c-box-gx-icon-width: var(--width-80);
  --c-box-gx-icon-height: var(--height-80);
  --c-box-gx-icon-margin-x-start: var(--space-negative-40);
  --c-box-gx-icon-padding: var(--space-5);
  --c-box-gx-icon-bg: var(--ui-box-bg-pale);
  --c-box-gx-icon-before-color: var(--ui-box-border-primary);
  --c-box-gx-body-bg: var(--ui-box-bg-light);
  --c-box-gx-body-border: 1px solid var(--ui-box-border-primary);
  --c-box-gx-body-title-font-weight: var(--font-weight-700);
  --c-box-gx-body-title-color: var(--ui-box-text-primary);

  /* COMPONENT ITEM GX */
  --c-item-gx-link-min-height: var(--height-90);
  --c-item-gx-link-radius: var(--radius-15);
  --c-item-gx-link-color: var(--ui-item-text-light);
  --c-item-gx-link-radius-hover: var(--radius-0);
  --c-item-gx-text-font-weight: var(--font-weight-700);
  --c-item-gx-inverted-rgb-link-bg: rgba(var(--ui-item-bg-light-rgb), 10%);
  --c-item-gx-inverted-rgb-link-border: 1px solid
    rgba(var(--ui-item-bg-light-rgb), 50%);
  --c-item-gx-inverted-rgb-color-hover: var(--ui-item-text-dark);
  --c-item-gx-inverted-rgb-bg-hover: var(--ui-item-bg-light);
  --c-item-gx-primary-bg: var(--ui-item-bg-primary);
  --c-item-gx-lock-link-radius: var(--radius-15);
}

@media (max-width: 767.98px) {
  :root {
    /* COMPONENT LINK EXTERNAL SP */
    --c-link-external-padding-x-end: var(--space-25);
    --c-link-external-icon-inset-y-start: var(--space-3);

    /* COMPONENT BUTTON SP */
    --c-btn-gx-radius: var(--radius-8);

    /* COMPONENT HEADING MAIN VISUAL SP */
    --c-heading-mv-inset-y-end: var(--space-negative-4);
    --c-heading-mv-arrow-margin-x-start: var(--space-negative-3);
    --c-heading-mv-arrow-width: var(--width-7);
    --c-heading-mv-arrow-height: var(--width-7);
    --c-heading-mv-width-before: var(--width-4);
    --c-heading-mv-width-after: var(--width-5);
    --c-heading-mv-box-padding-y: var(--space-3);
    --c-heading-mv-box-padding-x: var(--space-5);
    --c-heading-mv-font-size: var(--font-size-12);
    --c-heading-mv-title-font-size: var(--font-size-27);

    /* COMPONENT HEADING GX SP */
    --c-heading-gx-text-padding-x-start: var(--space-28);
    --c-heading-gx-middle-text-margin-y-start: var(--space-6);
    --c-heading-gx-middle-text-padding-x: var(--space-28);
    --c-heading-gx-line-width: var(--width-18);
    --c-heading-gx-title-font-size: var(--font-size-21);
    --c-heading-gx-v1-title-font-size: var(--font-size-21);

    /* COMPONENT POST GX SP */
    --c-post-gx-heading-margin-y-end: var(--space-20);
    --c-post-gx-body-margin-y-end: var(--space-25);

    /* COMPONENT MAP GX SP */
    --c-map-gx-item-padding-x: var(--space-25);
    --c-map-gx-item-padding-y-start: var(--space-20);
    --c-map-gx-item-padding-y-end: var(--space-35);
    --c-map-gx-heading-margin-y-end: var(--space-18);
    --c-map-gx-title-font-size: var(--font-size-45);

    /* COMPONENT LIST TIMELINE GX SP */
    --c-list-timeline-gx-padding-x-start: var(--space-18);
    --c-list-timeline-gx-gap: var(--space-30) var(--space-0);
    --c-list-timeline-gx-before-inset-y-start: var(--space-0);
    --c-list-timeline-gx-before-width: var(--width-3);

    /* COMPONENT TIMELINE GX SP */
    --c-timeline-gx-node-width: var(--width-55);
    --c-timeline-gx-node-height: var(--height-55);
    --c-timeline-gx-header-gap: var(--space-15);
    --c-timeline-gx-header-margin-x-start: var(--space-negative-22);
    --c-timeline-gx-title-font-size: var(--font-size-21);
    --c-timeline-gx-list-margin-y-start: var(--space-10);

    /* COMPONENT LIST CARD GX SP */
    --c-list-card-gx-gap: var(--space-15);

    /* COMPONENT CARD GX SP */
    --c-card-gx-padding-y: var(--space-30) var(--space-15);
    --c-card-gx-heading-margin-y-end: var(--space-30);
    --c-card-gx-title-margin-y-end: var(--space-12);
    --c-card-gx-title-padding-x: var(--space-15);
    --c-card-gx-title-font-size: var(--font-size-18);
    --c-card-gx-desc-padding-x: var(--space-15);
    --c-card-gx-note-margin-y-start: var(--space-17);
    --c-card-gx-note-padding-x: var(--space-15);
    --c-card-gx-v1-title-padding-x: var(--space-15);

    /* COMPONENT NOTIFY GX SP */
    --c-notify-gx-padding: var(--space-20) var(--space-15) var(--space-20)
      var(--space-15);
    --c-notify-gx-radius: var(--radius-14);
    --c-notify-gx-before-inset-x-start: var(--space-10);
    --c-notify-gx-before-width: var(--width-24);
    --c-notify-gx-before-height: var(--height-22);

    /* COMPONENT LIST BOX GX SP */
    --c-list-box-gx-gap: var(--space-15);
    --c-box-gx-body-padding: var(--space-50) var(--space-15) var(--space-25)
      var(--space-15);
    --c-box-gx-body-title-margin-y-end: var(--space-10);
    --c-box-gx-body-title-font-size: var(--font-size-16);

    /* COMPONENT LIST ITEM GX SP */
    --c-list-item-gx-gap: var(--space-20);
    --c-item-gx-text-font-size: var(--font-size-18);
  }
}

@media (min-width: 768px) {
  :root {
    /* COMPONENT LINK EXTERNAL PC */
    --c-link-external-padding-x-end: var(--space-30);
    --c-link-external-icon-inset-y-start: var(--space-5);

    /* COMPONENT BUTTON GX PC */
    --c-btn-gx-radius: var(--radius-12);

    /* COMPONENT HEADING MAIN VISUAL GX PC */
    --c-heading-mv-inset-y-end: var(--space-negative-8);
    --c-heading-mv-arrow-margin-x-start: var(--space-negative-7);
    --c-heading-mv-arrow-width: var(--space-15);
    --c-heading-mv-width-before: var(--space-10);
    --c-heading-mv-width-after: var(--space-11);
    --c-heading-mv-arrow-height: var(--space-15);
    --c-heading-mv-box-padding-y: var(--space-6);
    --c-heading-mv-box-padding-x: var(--space-14);
    --c-heading-mv-font-size: var(--font-size-18);
    --c-heading-mv-title-font-size: var(--font-size-55);

    /* COMPONENT HEADING GX PC */
    --c-heading-gx-text-padding-x-start: var(--space-32);
    --c-heading-gx-middle-text-margin-y-start: var(--space-7);
    --c-heading-gx-middle-text-padding-x: var(--space-32);
    --c-heading-gx-line-width: var(--width-20);
    --c-heading-gx-title-font-size: var(--font-size-28);
    --c-heading-gx-v1-title-font-size: var(--font-size-26);

    /* COMPONENT POST GX PC */
    --c-post-gx-heading-margin-y-end: var(--space-45);
    --c-post-gx-desc-max-width: var(--width-660);
    --c-post-gx-v1-img-margin-y-start: var(--space-negative-5);

    /* COMPONENT MAP GX PC */
    --c-map-gx-item-padding-x: var(--space-30);
    --c-map-gx-item-padding-y-start: var(--space-25);
    --c-map-gx-item-padding-y-end: var(--space-50);
    --c-map-gx-heading-margin-y-end: var(--space-27);
    --c-map-gx-title-margin-y-end: var(--space-10);
    --c-map-gx-title-font-size: var(--font-size-55);

    /* COMPONENT LIST TIMELINE GX PC */
    --c-list-timeline-gx-gap: var(--space-0) var(--space-27);
    --c-list-timeline-gx-before-inset-y-start: var(--space-64);
    --c-list-timeline-gx-before-height: var(--height-3);

    /* COMPONENT TIMELINE GX PC */
    --c-timeline-gx-node-width: var(--width-60);
    --c-timeline-gx-node-height: var(--height-60);
    --c-timeline-gx-node-margin-y-end: var(--space-11);
    --c-timeline-gx-title-font-size: var(--font-size-26);
    --c-timeline-gx-list-margin-y-start: var(--space-15);

    /* COMPONENT LIST CARD GX PC */
    --c-list-card-gx-gap: var(--space-0) var(--space-15);

    /* COMPONENT CARD GX PC */
    --c-card-gx-padding-y: var(--space-30) var(--space-20);
    --c-card-gx-heading-margin-y-end: var(--space-37);
    --c-card-gx-title-margin-y-end: var(--space-15);
    --c-card-gx-title-padding-x: var(--space-20);
    --c-card-gx-title-font-size: var(--font-size-20);
    --c-card-gx-desc-padding-x: var(--space-20) var(--space-17);
    --c-card-gx-note-margin-y-start: var(--space-20);
    --c-card-gx-note-padding-x: var(--space-20);
    --c-card-gx-v1-title-padding-x: var(--space-20) var(--space-5);

    /* COMPONENT NOTIFY GX PC */
    --c-notify-gx-padding: var(--space-20) var(--space-30) var(--space-20)
      var(--space-30);
    --c-notify-gx-radius: var(--radius-20);
    --c-notify-gx-before-inset-x-start: var(--space-30);
    --c-notify-gx-before-width: var(--width-28);
    --c-notify-gx-before-height: var(--height-26);

    /* COMPONENT LIST BOX GX PC */
    --c-list-box-gx-gap: var(--space-0) var(--space-15);
    --c-list-box-gx-box-margin-y-start: var(--space-25);
    --c-box-gx-body-padding: var(--space-55) var(--space-20) var(--space-27)
      var(--space-20);
    --c-box-gx-body-title-margin-y-end: var(--space-17);
    --c-box-gx-body-title-font-size: var(--font-size-18);
    --c-box-gx-v1-title-margin-x: var(--space-negative-15);
    --c-box-gx-v2-desc-margin-x: var(--space-negative-15);

    /* COMPONENT LIST ITEM GX PC */
    --c-list-item-gx-gap: var(--space-30);
    --c-list-item-gx-max-width: var(--width-900);
    --c-item-gx-text-font-size: var(--font-size-20);
  }
}

/*------------------------------------------------------------------------------------
1.2. BASE.
------------------------------------------------------------------------------------*/

html {
  inline-size: 100%;
  block-size: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  inline-size: 100%;
  min-block-size: 100dvh;
  font-family: var(--ui-body-font-family);
  font-size: var(--ui-body-font-size);
  font-weight: var(--ui-body-font-weight);
  line-height: 1.75;
  color: var(--ui-body-text);
  background-color: var(--ui-body-background);
}

@media (min-width: 1025px) and (max-width: 1199.98px) {
  body {
    min-inline-size: var(--ui-body-width);

    & .l-wrapper {
      max-inline-size: var(--ui-body-width);
    }

    & .l-header {
      inline-size: var(--ui-body-width);
    }
  }
}

/*------------------------------------------------------------------------------------
1.3. RESET.
------------------------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6;
}

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
  color: currentColor;
}

@media (min-width: 768px) {
  a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}

@media (any-hover: hover) {
  a {
    transition:
      var(--ui-transition-color-default),
      var(--ui-transition-decoration-color-default);

    &:hover {
      text-decoration-color: transparent;
    }
  }
}

svg {
  max-inline-size: 100%;
  block-size: auto;
}

picture {
  display: block;
  line-height: 1;
}

figure {
  margin: 0;
  padding: 0;
}

/*====================================================================================
2. UTILITY.
====================================================================================*/

/*---------- BACKGROUND ----------*/
.u-bg-patterns-square {
  background: url("../images/gx/bg-patterns-square.png") !important;
}

@media (max-width: 767.98px) {
  .u-bg-patterns-square {
    background-size: 50px auto !important;
  }
}

.u-primary-light {
  background-color: #f4f6f0 !important;
}

/*---------- TEXT ALGIN ----------*/
.u-text-right {
  text-align: end !important;
}

/*---------- PARAGRAPH ----------*/
@media (max-width: 767.98px) {
  .u-paragraph p:not(:first-child) {
    margin-block-start: 15px !important;
  }
}

@media (min-width: 768px) {
  .u-paragraph p:not(:first-child) {
    margin-block-start: 20px !important;
  }
}

/*---------- HIDE ----------*/
.u-hide {
  display: none !important;
}

/* ---------- HIDE MAX WIDTH ---------- */
@media (max-width: 575.98px) {
  .u-hide-max-sm {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .u-hide-max-md {
    display: none !important;
  }
}

/* ---------- HIDE MIN WIDTH ---------- */
@media (min-width: 576px) {
  .u-hide-min-sm {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .u-hide-min-md {
    display: none !important;
  }
}

/*====================================================================================
3. LAYOUT.
====================================================================================*/

/*------------------------------------------------------------------------------------
3.1. CONTAINER.
------------------------------------------------------------------------------------*/

.l-container,
.l-container-xxl,
.l-container-xl,
.l-container-l,
.l-container-m,
.l-container-s,
.l-container-xs {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--l-container-padding-x-md);
}

.l-container {
  max-inline-size: var(--l-container-max-width-md);
}

/*------------------------------------------------------------------------------------
3.2. HEADER.
------------------------------------------------------------------------------------*/

.l-header-gx {
  position: fixed;
  z-index: 999;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  padding-block: var(--l-header-gx-padding-y);
  background-color: var(--l-header-gx-bg);
  border-block-end: var(--l-header-gx-border-y);
}

.l-header-gx__row {
  display: flex;
  gap: var(--l-header-gx-gap);
  align-items: center;
  justify-content: space-between;
}

.l-header-gx__btn {
  width: var(--l-header-gx-btn);
}

/*------------------------------------------------------------------------------------
3.3. FOOTER.
------------------------------------------------------------------------------------*/

.l-footer-gx {
  padding-block: var(--l-footer-gx-padding-y);
}

.l-footer-gx__row {
  margin-block-end: var(--l-footer-gx-row-margin-y-end);
}

.l-footer-gx__copy small {
  font-size: var(--l-footer-gx-copy-font-size);
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .l-footer-gx__row,
  .l-footer-gx__copy {
    text-align: center;
  }

  .l-footer-gx {
    & .c-logo-gx {
      margin-block-end: var(--l-footer-gx-logo-margin-y-end);
    }
  }
}

@media (min-width: 768px) {
  .l-footer-gx__row {
    display: flex;
    gap: 80px;
    align-items: center;
  }
}

/*====================================================================================
4. COMPONENT.
====================================================================================*/

/*---------- ACCESSIBILITY ----------*/
.c-visually-hidden:not(:focus):not(:active) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

/*------------------------------------------------------------------------------------
4.1. LOGO.
------------------------------------------------------------------------------------*/

/*---------- LOGO GX LIGHT ----------*/
.c-logo-gx--light {
  --c-logo-gx-icon-color: var(--ui-color-light);
  --c-logo-gx-text-color: var(--ui-color-light);
  --c-logo-gx-color: var(--ui-color-primary);
}

/*---------- LOGO GX DARK ----------*/
.c-logo-gx--dark {
  --c-logo-gx-icon-color: #005bab;
  --c-logo-gx-text-color: #333333;
  --c-logo-gx-color: #3dba6e;
}

/*------------------------------------------------------------------------------------
4.2. BUTTON.
------------------------------------------------------------------------------------*/

/*---------- BUTTON GX ----------*/
.c-btn-gx {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--c-btn-gx-min-block);
  padding: var(--c-btn-gx-padding-y) var(--c-btn-gx-padding-x);
  overflow: hidden;
  font-family: var(--c-btn-gx-font-family);
  font-size: var(--c-btn-gx-font-size);
  font-weight: var(--c-btn-gx-font-weight);
  line-height: 1.5;
  text-decoration: none !important;
  vertical-align: middle;
  color: var(--c-btn-gx-text);
  background-color: var(--c-btn-gx-background);
  border-radius: var(--c-btn-gx-radius);
  cursor: pointer;
}

@media (any-hover: hover) {
  .c-btn-gx {
    transition: var(--ui-transition-radius-default);

    &:hover {
      border-radius: var(--c-btn-gx-radius-hover);
    }
  }
}

/*------------------------------------------------------------------------------------
4.3. HEADING.
------------------------------------------------------------------------------------*/

/*---------- HEADING MAIN VISUAL ----------*/
.c-heading-mv__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--c-heading-mv-box-padding-y) var(--c-heading-mv-box-padding-x);
  font-family: var(--font-family-noto-sans-jp);
  font-size: var(--c-heading-mv-font-size);
  font-weight: var(--c-heading-mv-font-weight);
  line-height: 1.5;
  color: var(--c-heading-mv-color);
  background-color: var(--c-heading-mv-box-bg);
  border-block-start: var(--c-heading-mv-border-rgb);
  border-inline: var(--c-heading-mv-border-rgb);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    border-block-end: var(--c-heading-mv-border-rgb);
  }

  &::before {
    inset-inline-start: 0;
    inline-size: calc(50% - var(--c-heading-mv-width-before));
  }

  &::after {
    inset-inline-end: 0;
    inline-size: calc(50% - var(--c-heading-mv-width-after));
  }
}

.c-heading-mv__box-arrow {
  position: absolute;
  inset-block-end: var(--c-heading-mv-inset-y-end);
  inset-inline-start: 50%;
  inline-size: var(--c-heading-mv-arrow-width);
  block-size: var(--c-heading-mv-arrow-height);
  margin-inline-start: var(--c-heading-mv-arrow-margin-x-start);
  background: linear-gradient(
    135deg,
    transparent 50%,
    var(--c-heading-mv-box-bg) 50%
  );
  transform: rotate(45deg);
  border-block-end: var(--c-heading-mv-border);
  border-inline-end: var(--c-heading-mv-border);
}

.c-heading-mv__title {
  font-size: var(--c-heading-mv-title-font-size);
  font-weight: var(--c-heading-mv-font-weight-title);
  line-height: 1.5;
  color: var(--c-heading-mv-color-title);

  & strong {
    color: var(--c-heading-mv-color);
  }
}

/*---------- HEADING GX ----------*/
.c-heading-gx__text {
  position: relative;
  display: inline-block;
  font-size: var(--c-heading-gx-text-font-size);
  font-weight: var(--c-heading-gx-text-font-weight);
  line-height: 1.5;
}

.c-heading-gx__text--primary {
  color: var(--c-heading-gx-color);
}

.c-heading-gx__text--strong {
  color: var(--c-heading-gx-color-dark);
}

.c-heading-gx__title--light {
  color: var(--c-heading-gx-color-light);
}

.c-heading-gx__title {
  font-size: var(--c-heading-gx-title-font-size);
  font-weight: var(--c-heading-gx-title-font-weight);
}

@media (max-width: 767.98px) {
  .c-heading-gx__title {
    line-height: 1.65;
  }
}

@media (min-width: 768px) {
  .c-heading-gx__title {
    line-height: 1.7;
  }
}

/*---------- HEADING GX VERSION 1 ----------*/
.c-heading-gx--v1 {
  & .c-heading-gx__title {
    font-size: var(--c-heading-gx-v1-title-font-size);
  }
}

/*---------- HEADING GX START ----------*/
.c-heading-gx--start {
  & .c-heading-gx__text {
    padding-inline-start: var(--c-heading-gx-text-padding-x-start);

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      inset-inline-start: 0;
      inline-size: var(--c-heading-gx-line-width);
      block-size: var(--c-heading-gx-line-height);
      border-block-end: var(--c-heading-gx-border);
    }
  }
}

/*---------- HEADING GX MIDDLE ----------*/
.c-heading-gx--middle {
  text-align: center;

  & .c-heading-gx__text {
    margin-block-start: var(--c-heading-gx-middle-text-margin-y-start);
    padding-inline: var(--c-heading-gx-middle-text-padding-x);

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      inline-size: var(--c-heading-gx-line-width);
      block-size: var(--c-heading-gx-line-height);
      border-block-end: var(--c-heading-gx-border);
    }

    &::before {
      inset-inline-start: 0;
    }

    &::after {
      inset-inline-end: 0;
    }
  }
}

/*---------- HEADING MAP ----------*/
.c-heading-map__title {
  margin-block-end: var(--c-map-gx-title-margin-y-end);
  font-family: var(--c-map-gx-title-font-family);
  font-size: var(--c-map-gx-title-font-size);
  font-weight: var(--c-map-gx-title-font-weight);
  line-height: 1.5;
}

.c-heading-map__text {
  font-size: var(--c-map-gx-text-font-size);
  font-weight: var(--c-map-gx-text-font-weight);
  color: var(--c-map-gx-text-font-color);
}

/*---------- HEADING CARD ----------*/
.c-heading-card {
  position: relative;
  padding-inline-start: var(--c-heading-card-padding-x-start);
}

.c-heading-card__circle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--c-heading-card-circle-inset-x-start);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-block-start: var(--c-heading-card-circle-margin-y-start);
  background-color: var(--c-heading-card-circle-bg);
  border-radius: 50%;
}

.c-heading-card__body {
  padding: var(--c-heading-card-body-padding);
  background-color: var(--c-heading-card-body-bg);
}

.c-heading-card__text {
  font-size: var(--c-heading-card-text-font-size);
  font-weight: var(--c-heading-card-text-font-weight);
  line-height: 1.5;
  color: var(--c-heading-card-text-color);
}

.c-heading-card--v1 {
  padding-inline-start: var(--c-heading-card-v1-padding-x-start);

  & .c-heading-card__circle {
    inline-size: var(--c-heading-card-v1-circle-width);
    block-size: var(--c-heading-card-v1-circle-height);
    margin-block-start: var(--c-heading-card-v1-circle-margin-y-start);
  }

  & .c-heading-card__circle-icon {
    margin-block-end: var(--c-heading-card-v1-icon-margin-y-start);
  }
}

/*------------------------------------------------------------------------------------
4.4. TEXT.
------------------------------------------------------------------------------------*/

/*---------- PARAGRAPH ----------*/
@media (max-width: 767.98px) {
  .c-paragraph {
    p {
      &:not(:first-child) {
        margin-block-start: 20px;
      }
    }
  }
}

@media (min-width: 768px) {
  .c-paragraph {
    p {
      &:not(:first-child) {
        margin-block-start: 32px;
      }
    }
  }
}

/*---------- TEXT NOTE ----------*/
.c-text-note {
  font-size: var(--ui-body-font-size-sm);
}

/*------------------------------------------------------------------------------------
4.5. LINK.
------------------------------------------------------------------------------------*/

/*---------- LINK EXTERNAL ----------*/
.c-link-external {
  position: relative;
  padding-inline-end: var(--c-link-external-padding-x-end);
  font-size: var(--c-link-external-font-size);
  font-weight: var(--c-link-external-font-weight);
}

.c-link-external__icon {
  position: absolute;
  inset-block-start: var(--c-link-external-icon-inset-y-start);
  inset-inline-end: 0;
}

@media (any-hover: hover) {
  .c-link-external:hover {
    color: var(--c-link-external-color-hover);
  }
}

/*------------------------------------------------------------------------------------
4.6. ITEM.
------------------------------------------------------------------------------------*/

/*---------- LIST ITEM GX ----------*/
.c-list-item-gx {
  display: grid;
  gap: var(--c-list-item-gx-gap);
  max-inline-size: var(--c-list-item-gx-max-width);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .c-list-item-gx {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*---------- ITEM GX ----------*/
.c-item-gx__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-block-size: var(--c-item-gx-link-min-height);
  text-align: center;
  text-decoration: none;
  color: var(--c-item-gx-link-color);
  border-radius: var(--c-item-gx-link-radius);
}

.c-item-gx__text {
  font-size: var(--c-item-gx-text-font-size);
  font-weight: var(--c-item-gx-text-font-weight);
  line-height: 1.5;
}

.c-item-gx--inverted-rgb {
  & .c-item-gx__link {
    background-color: var(--c-item-gx-inverted-rgb-link-bg);
    border: var(--c-item-gx-inverted-rgb-link-border);
  }
}

.c-item-gx--primary {
  & .c-item-gx__link {
    background-color: var(--c-item-gx-primary-bg);
  }
}

@media (any-hover: hover) {
  .c-item-gx__link {
    transition:
      var(--ui-transition-color-default), var(--ui-transition-bg-default),
      var(--ui-transition-radius-default);
  }

  .c-item-gx__link:hover {
    border-radius: var(--c-item-gx-link-radius-hover);
  }

  .c-item-gx--inverted-rgb:not(.c-item-gx--lock) {
    & .c-item-gx__link:hover {
      color: var(--c-item-gx-inverted-rgb-color-hover);
      background-color: var(--c-item-gx-inverted-rgb-bg-hover);
    }
  }

  .c-item-gx--lock {
    & .c-item-gx__link {
      border-radius: var(--c-item-gx-lock-link-radius);
    }
  }
}

/*---------- ITEM GX LOCK ----------*/
.c-item-gx--lock {
  pointer-events: none;
}

/*---------- LIST TIMELINE GX ----------*/
.c-list-timeline-gx {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--c-list-timeline-gx-gap);

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: var(--c-list-timeline-gx-before-inset-y-start);
    inset-inline-start: var(--c-list-timeline-gx-before-inset-x-start);
    border-radius: var(--c-list-timeline-gx-before-radius);
  }
}

@media (max-width: 767.98px) {
  .c-list-timeline-gx {
    padding-inline-start: var(--c-list-timeline-gx-padding-x-start);

    &::before {
      inline-size: var(--c-list-timeline-gx-before-width);
      block-size: 100%;
      background: linear-gradient(
        to bottom,
        var(--c-list-timeline-gx-before-bg-0) 0%,
        var(--c-list-timeline-gx-before-bg-100) 100%
      );
    }
  }
}

@media (min-width: 768px) {
  .c-list-timeline-gx {
    grid-template-columns: repeat(4, 1fr);

    &::before {
      inline-size: 100%;
      block-size: var(--c-list-timeline-gx-before-height);
      background: linear-gradient(
        to right,
        var(--c-list-timeline-gx-before-bg-0) 0%,
        var(--c-list-timeline-gx-before-bg-100) 100%
      );
    }
  }
}

/*---------- TIMELINE GX ----------*/
.c-timeline-gx__header {
  margin-block-end: var(--c-timeline-gx-header-margin-y-end);
}

.c-timeline-gx__node {
  display: inline-block;
  padding: var(--c-timeline-gx-node-padding);
  font-family: var(--c-timeline-gx-node-font-family);
  font-size: var(--c-timeline-gx-node-font-size);
  font-weight: var(--c-timeline-gx-node-font-weight);
  line-height: 1;

  color: var(--c-timeline-gx-node-color);
  background-color: var(--c-timeline-gx-node-bg);
  border-radius: 50%;

  & span {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--c-timeline-gx-node-width);
    block-size: var(--c-timeline-gx-node-height);
    border-radius: 50%;
  }
}

.c-timeline-gx__node--v1 {
  border: var(--c-timeline-gx-node-border-v1);
  & span {
    background-color: var(--c-timeline-gx-node-bg-v1);
  }
}

.c-timeline-gx__node--v2 {
  border: var(--c-timeline-gx-node-border-v2);
  & span {
    background: linear-gradient(
      to right,
      var(--c-timeline-gx-node-bg-v1) 0%,
      var(--c-timeline-gx-node-bg-v2) 100%
    );
  }
}

.c-timeline-gx__node--v3 {
  border: var(--c-timeline-gx-node-border-v3);

  & span {
    background: linear-gradient(
      to right,
      var(--c-timeline-gx-node-bg-v2) 0%,
      var(--c-timeline-gx-node-bg-v3) 100%
    );
  }
}

.c-timeline-gx__node--v4 {
  border: var(--c-timeline-gx-node-border-v4);

  & span {
    background-color: var(--c-timeline-gx-node-bg-v3);
  }
}

.c-timeline-gx__title {
  font-size: var(--c-timeline-gx-title-font-size);
  font-weight: var(--c-timeline-gx-title-font-weight);
  line-height: 1.5;
  color: var(--c-timeline-gx-title-color);
}

.c-timeline-gx__body {
  padding: var(--c-timeline-gx-body-padding);
  background-color: var(--c-timeline-gx-body-bg);
  box-shadow: var(--c-timeline-gx-body-shadow);
  border-block-end: var(--c-timeline-gx-body-border-y-end);
}

.c-timeline-gx__list {
  & > li:not(:first-child) {
    margin-block-start: var(--c-timeline-gx-list-margin-y-start);
  }
}

@media (max-width: 767.98px) {
  .c-timeline-gx__header {
    display: flex;
    gap: var(--c-timeline-gx-header-gap);
    align-items: center;
    margin-inline-start: var(--c-timeline-gx-header-margin-x-start);
  }
}

@media (min-width: 768px) {
  .c-timeline-gx {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .c-timeline-gx__header {
    text-align: center;
  }

  .c-timeline-gx__node {
    margin-block-end: var(--c-timeline-gx-node-margin-y-end);
  }
}

/*------------------------------------------------------------------------------------
4.7. LIST.
------------------------------------------------------------------------------------*/

/*---------- LIST CIRCLE ----------*/
.c-list-circle {
  & > li {
    position: relative;
    padding-inline-start: 1.5em;

    &::before {
      content: "●";
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      scale: 0.7;
    }
  }
}

.c-list-circle--primary {
  & > li {
    &::before {
      color: #3dba6e;
    }
  }
}

/*------------------------------------------------------------------------------------
4.8. POST.
------------------------------------------------------------------------------------*/

.c-post-gx {
  & .c-heading-gx {
    margin-block-end: var(--c-post-gx-heading-margin-y-end);
  }
}

.c-post-gx__body {
  margin-block-end: var(--c-post-gx-body-margin-y-end);
}

@media (max-width: 767.98px) {
  .c-post-gx__img {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .c-post-gx {
    display: flex;
  }

  .c-post-gx__body {
    flex: 1;
  }

  .c-post-gx__img {
    flex: 0 0 auto;
  }
}

/*---------- POST GX VERSION 1 ----------*/
@media (min-width: 768px) {
  .c-post-gx--v1 {
    align-items: center;

    & .c-post-gx__img {
      margin-block-start: var(--c-post-gx-v1-img-margin-y-start);
    }
  }
}

/*---------- POST GX LIGHT ----------*/
.c-post-gx--light {
  & .c-post-gx__desc {
    color: var(--c-post-gx-color-light);
  }
}

/*------------------------------------------------------------------------------------
4.9. MAP.
------------------------------------------------------------------------------------*/

/*---------- MAP GX ----------*/
.c-map-gx {
  & .c-heading-map {
    margin-block-end: var(--c-map-gx-heading-margin-y-end);
  }
}

.c-map-gx__list {
  display: grid;
}

.c-map-gx__item {
  position: relative;
  padding: var(--c-map-gx-item-padding-y-start) var(--c-map-gx-item-padding-x)
    var(--c-map-gx-item-padding-y-end) var(--c-map-gx-item-padding-x);
  background-color: rgba(var(--color-neutral-0-rgb), 10%);
  border: 1px solid rgba(var(--color-neutral-0-rgb), 20%);

  &::before {
    content: "";
    position: absolute;
    inset-block: var(--c-map-gx-item-before-inset-y);
    inset-inline-start: var(--c-map-gx-item-before-inset-x-start);
    inline-size: var(--c-map-gx-item-before-width);
  }
}

.c-map-gx__item-desc {
  color: var(--c-map-gx-desc-color);

  & strong {
    font-size: var(--c-map-gx-desc-strong-font-size);
    font-weight: var(--c-map-gx-desc-strong-font-weight);
    line-height: 1.5;
  }
}

/*---------- MAP GX SECONDARY ----------*/
.c-map-gx__item--secondary {
  &::before {
    background-color: var(--c-map-gx-color-secondary);
  }

  & .c-heading-map__title {
    color: var(--c-map-gx-color-secondary);
  }
  & .c-map-gx__item-desc {
    & strong {
      color: var(--c-map-gx-color-secondary);
    }
  }
}

/*---------- MAP GX PRIMARY ----------*/
.c-map-gx__item--primary {
  &::before {
    background-color: var(--c-map-gx-color-primary);
  }

  & .c-heading-map__title {
    color: var(--c-map-gx-color-primary);
  }

  & .c-map-gx__item-desc {
    & strong {
      color: var(--c-map-gx-color-primary);
    }
  }
}

/*---------- MAP GX TERTIARY ----------*/
.c-map-gx__item--tertiary {
  &::before {
    background-color: var(--c-map-gx-color-tertiary);
  }

  & .c-heading-map__title {
    color: var(--c-map-gx-color-tertiary);
  }

  & .c-map-gx__item-desc {
    & strong {
      color: var(--c-map-gx-color-tertiary);
    }
  }
}

@media (min-width: 768px) {
  .c-map-gx__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*------------------------------------------------------------------------------------
4.10. CARD.
------------------------------------------------------------------------------------*/

/*---------- LIST CARD GX ----------*/
.c-list-card-gx {
  display: grid;
  gap: var(--c-list-card-gx-gap);
}

@media (min-width: 768px) {
  .c-list-card-gx {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*---------- CARD GX ----------*/
.c-card-gx {
  padding-block: var(--c-card-gx-padding-y);
  border: var(--c-card-gx-border);
}

.c-card-gx__heading {
  margin-block-end: var(--c-card-gx-heading-margin-y-end);
}

.c-card-gx__title {
  margin-block-end: var(--c-card-gx-title-margin-y-end);
  padding-inline: var(--c-card-gx-title-padding-x);
  font-size: var(--c-card-gx-title-font-size);
  font-weight: var(--c-card-gx-title-font-weight);
  line-height: 1.7;
  color: var(--c-card-gx-color);
}

.c-card-gx__desc {
  padding-inline: var(--c-card-gx-desc-padding-x);
}

.c-card-gx__note {
  margin-block-start: var(--c-card-gx-note-margin-y-start);
  padding-inline: var(--c-card-gx-note-padding-x);
}

.c-card-gx__note-wrap {
  padding: var(--c-card-gx-note-wrap-padding);
  font-size: var(--c-card-gx-note-wrap-font-size);
  background-color: var(--c-card-gx-note-wrap-bg);
  border-inline-start: var(--c-card-gx-note-wrap-border);
}

.c-card-gx--v1 {
  .c-card-gx__title {
    padding-inline: var(--c-card-gx-v1-title-padding-x);
  }
}

@media (min-width: 768px) {
  .c-card-gx {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/*------------------------------------------------------------------------------------
4.11. NOTIFY.
------------------------------------------------------------------------------------*/

.c-notify-gx {
  position: relative;
  padding: var(--c-notify-gx-padding);
  border-radius: var(--c-notify-gx-radius);
}

.c-notify-gx__desc {
  & strong {
    font-weight: var(--c-notify-gx-text-strong-font-weight);
    color: var(--c-notify-gx-text);
  }
}

.c-notify-gx--secondary {
  background-color: var(--c-notify-gx-bg-rgb);
  border: var(--c-notify-gx-border);
}

/*------------------------------------------------------------------------------------
4.12. BOX.
------------------------------------------------------------------------------------*/

/*---------- LIST BOX GX ----------*/
.c-list-box-gx {
  display: grid;
  gap: var(--c-list-box-gx-gap);
}

.c-list-box-gx {
  & .c-box-gx {
    margin-block-start: var(--c-list-box-gx-box-margin-y-start);
  }
}

@media (min-width: 768px) {
  .c-list-box-gx {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*---------- BOX GX ----------*/
.c-box-gx {
  position: relative;
  padding-block-start: var(--c-box-gx-padding-y-start);
}

.c-box-gx__icon {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 50%;
  display: inline-block;
  inline-size: var(--c-box-gx-icon-width);
  block-size: var(--c-box-gx-icon-height);
  margin-inline-start: var(--c-box-gx-icon-margin-x-start);
  padding: var(--c-box-gx-icon-padding);
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 50%;
    background-color: var(--c-box-gx-icon-bg);
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: var(--c-box-gx-icon-before-color);
    border-radius: 0 0 var(--c-box-gx-icon-width) var(--c-box-gx-icon-height);
  }
}

.c-box-gx__body {
  padding: var(--c-box-gx-body-padding);
  background-color: var(--c-box-gx-body-bg);
  border: var(--c-box-gx-body-border);
}

.c-box-gx__title {
  margin-block-end: var(--c-box-gx-body-title-margin-y-end);
  font-size: var(--c-box-gx-body-title-font-size);
  font-weight: var(--c-box-gx-body-title-font-weight);
  text-align: center;
  color: var(--c-box-gx-body-title-color);
}

@media (max-width: 767.98px) {
  .c-box-gx__title {
    line-height: 1.7;
  }
}

@media (min-width: 768px) {
  .c-box-gx {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .c-box-gx__title {
    line-height: 1.9;
  }
}

/*---------- BOX GX VERSION 1 ----------*/
@media (min-width: 768px) {
  .c-box-gx--v1 {
    & .c-box-gx__title {
      margin-inline: var(--c-box-gx-v1-title-margin-x);
    }
  }
}

/*---------- BOX GX VERSION 2 ----------*/
@media (min-width: 768px) {
  .c-box-gx--v2 {
    & .c-box-gx__desc {
      margin-inline-end: var(--c-box-gx-v2-desc-margin-x);
    }
  }
}

/*====================================================================================
5. PROJECT.
====================================================================================*/

/*------------------------------------------------------------------------------------
5.1. SECTION GX.
------------------------------------------------------------------------------------*/
.p-gx:not(.p-gx-mv) {
  padding-block: var(--p-gx-padding-y);
}

/*------------------------------------------------------------------------------------
5.2. SECTION GX MAIN VISUAL.
------------------------------------------------------------------------------------*/
.p-gx-mv {
  position: relative;

  & .p-gx-mv__img {
    width: 100%;
  }

  & .p-gx__wrap {
    position: absolute;
    inset: 0;
  }

  & .l-container {
    inline-size: 100%;
    block-size: 100%;
  }

  & .p-gx__row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    padding-block-start: var(--ui-height-header);
  }

  & .p-gx__desc {
    margin-block-start: var(--p-gx-mv-margin-y-start);
    font-size: var(--p-gx-mv-font-size);
    font-weight: var(--p-gx-mv-font-weight);
    letter-spacing: var(--p-gx-mv-letter-spacing);
    color: var(--p-gx-mv-color);
  }
}

@media (max-width: 767.98px) {
  .p-gx-mv {
    & .p-gx-mv__img {
      height: var(--p-gx-mv-img-height);
      max-block-size: var(--p-gx-mv-img-max-height);
      object-fit: cover;
    }
  }
}

/*------------------------------------------------------------------------------------
5.3. SECTION GX ROADMAP.
------------------------------------------------------------------------------------*/
.p-gx-roadmap {
  & .c-post-gx {
    margin-block-end: var(--p-gx-roadmap-margin-y-end);
  }
}

/*------------------------------------------------------------------------------------
5.4. SECTION GX TIMELINE.
------------------------------------------------------------------------------------*/
.p-gx-timeline {
  & .c-heading-gx {
    margin-block-end: var(--p-gx-timeline-heading-margin-y-end);
  }
  & .c-text-note {
    margin-block-start: var(--p-gx-timeline-note-margin-y-start);
  }
}

/*------------------------------------------------------------------------------------
5.5. SECTION GX ACHIEVEMENTS.
------------------------------------------------------------------------------------*/

.p-gx-achievements {
  & .c-post-gx {
    margin-block-end: var(--p-gx-timeline-post-margin-y-end);
  }

  & .c-notify-gx {
    margin-block-start: var(--p-gx-timeline-notify-margin-y-start);
  }
}

/*------------------------------------------------------------------------------------
5.6. SECTION GX ISSUES.
------------------------------------------------------------------------------------*/
.p-gx-issues {
  & .c-heading-gx {
    margin-block-end: var(--p-gx-issues-heading-margin-y-end);
  }

  & .p-gx__desc {
    text-align: center;
  }

  & .c-list-box-gx {
    margin-block-start: var(--p-gx-issues-list-margin-y-end);
  }
}

/*------------------------------------------------------------------------------------
5.7. SECTION GX CONTACT.
------------------------------------------------------------------------------------*/
.p-gx-contact {
  & .c-heading-gx {
    margin-block-end: var(--p-gx-contact-heading-margin-y-end);
  }

  & .p-gx__desc,
  & .p-gx__note {
    text-align: center;
    color: var(--p-gx-contact-color);
  }

  & .p-gx__desc {
    margin-block-end: var(--p-gx-contact-desc-margin-y-end);
  }

  & .p-gx__note {
    margin-block-start: var(--p-gx-contact-note-margin-y-start);
  }
}