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

/* CORRECT CSS Variables - NO recursion */
:root {
  /* Level 1: System fonts */
  --font-system: "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  
  /* Level 2: Noto Sans with system fallback */
  --font-noto: "Noto Sans JP", sans-serif;
  
  /* Level 3: Design fonts with Noto fallback */
  --font-shingo-regular: "MFW-ShinGoPro-Regular";
  --font-shingo-bold: "MFW-ShinGoPro-DeBold";
  --font-ryumin-regular: "MFW-RyuminPro-Regular";
  --font-ryumin-heavy: "MFW-RyuminPro-ExHeavy";
  --font-optima: "optima-lt-pro";
}

/* Rest of your font.css code from the artifact... */

/* Body - ShinGo Regular */
body {
  font-family: var(--font-system);
}

/* H2 - Ryumin ExHeavy */
h2 {
  font-family: var(--font-system);
  font-weight: 700;
}

/* H3 - ShinGo Bold */
h3 {
  font-family: var(--font-system);
  font-weight: 700;
}

/* All your existing classes - System fonts first */
#new-main .title h2,
.service-title h3,
.date {
  font-family: var(--font-system);
}

#new-main .title p,
.works-content .ryumin-title,
.view-more-btn .sp-view-more,
.fifty-years,
.strength-title h2 {
  font-family: var(--font-system);
}

.about-content .ryumin-title,
.obi-text h2,
.ryumin-title,
.bottom-line-title > p,
.side-title > p,
.side-title-two h3,
.link-title {
  font-family: var(--font-system);
  font-weight: 700;
}

.path-link,
.tag,
.main-title,
.shin-go-title,
.jump-btn,
.content-list li > b,
.content-list li a > b,
.merit-demerit .table-main,
.merit-demerit .table-head,
.card-number p,
.number p,
.content-wrapper p b,
.contact-number-title p,
.contact-number,
.privacy-title,
.privacy-bold-text,
.title-bar p,
.interview-title,
.img-content > .interview-content > p,
.interview-link {
  font-family: var(--font-system);
  font-weight: 700;
}

.inquiry-form {
  font-family: var(--font-system);
}

/* Body - Noto Sans */
.noto-loaded body {
  font-family: var(--font-noto);
}

/* H2 - Noto Sans Bold */
.noto-loaded h2 {
  font-family: var(--font-noto);
  font-weight: 700;
}

/* H3 - Noto Sans Bold */
.noto-loaded h3 {
  font-family: var(--font-noto);
  font-weight: 700;
}

/* Optima elements - Noto Sans */
.noto-loaded #new-main .title h2,
.noto-loaded .service-title h3,
.noto-loaded .date {
  font-family: var(--font-noto);
}

/* Ryumin Regular elements - Noto Sans */
.noto-loaded #new-main .title p,
.noto-loaded .works-content .ryumin-title,
.noto-loaded .view-more-btn .sp-view-more,
.noto-loaded .fifty-years,
.noto-loaded .strength-title h2 {
  font-family: var(--font-noto);
}

/* Ryumin ExHeavy elements - Noto Sans Bold */
.noto-loaded .about-content .ryumin-title,
.noto-loaded .obi-text h2,
.noto-loaded .ryumin-title,
.noto-loaded .bottom-line-title > p,
.noto-loaded .side-title > p,
.noto-loaded .side-title-two h3,
.noto-loaded .link-title {
  font-family: var(--font-noto);
  font-weight: 700;
}

/* ShinGo Bold elements - Noto Sans Bold */
.noto-loaded .path-link,
.noto-loaded .tag,
.noto-loaded .main-title,
.noto-loaded .shin-go-title,
.noto-loaded .jump-btn,
.noto-loaded .content-list li > b,
.noto-loaded .content-list li a > b,
.noto-loaded .merit-demerit .table-main,
.noto-loaded .merit-demerit .table-head,
.noto-loaded .card-number p,
.noto-loaded .number p,
.noto-loaded .content-wrapper p b,
.noto-loaded .contact-number-title p,
.noto-loaded .contact-number,
.noto-loaded .privacy-title,
.noto-loaded .privacy-bold-text,
.noto-loaded .title-bar p,
.noto-loaded .interview-title,
.noto-loaded .img-content > .interview-content > p,
.noto-loaded .interview-link {
  font-family: var(--font-noto);
  font-weight: 700;
}

/* ShinGo Regular elements - Noto Sans */
.noto-loaded .inquiry-form {
  font-family: var(--font-noto);
}

/* 1) Body - ShinGo Regular */
.fonts-loaded body {
  font-family: var(--font-shingo-regular);
}

/* 12) H2 - Ryumin ExHeavy */
.fonts-loaded h2 {
  font-family: var(--font-ryumin-heavy);
}

/* 13) H3 - ShinGo Bold */
.fonts-loaded h3 {
  font-family: var(--font-shingo-bold);
}

/* 2) #new-main .title h2 - Optima */
.fonts-loaded #new-main .title h2 {
  font-family: var(--font-optima);
}

/* 3) #new-main .title p - Ryumin Regular */
.fonts-loaded #new-main .title p {
  font-family: var(--font-ryumin-regular);
}

/* 4) .works-content .ryumin-title - Ryumin Regular */
.fonts-loaded .works-content .ryumin-title {
  font-family: var(--font-ryumin-regular);
}

/* 5) .view-more-btn .sp-view-more - Ryumin Regular */
.fonts-loaded .view-more-btn .sp-view-more {
  font-family: var(--font-ryumin-regular);
}

/* 6) .service-title h3 - Optima */
.fonts-loaded .service-title h3 {
  font-family: var(--font-optima);
}

/* 7) .about-content .ryumin-title - Ryumin ExHeavy */
.fonts-loaded .about-content .ryumin-title {
  font-family: var(--font-ryumin-heavy);
}

/* 8) .fifty-years - Ryumin Regular */
.fonts-loaded .fifty-years {
  font-family: var(--font-ryumin-regular);
}

/* 9) .strength-title h2 - Ryumin Regular */
.fonts-loaded .strength-title h2 {
  font-family: var(--font-ryumin-regular);
}

/* 10) .date - Optima */
.fonts-loaded .date {
  font-family: var(--font-optima);
}

/* 11) .path-link - ShinGo Bold */
.fonts-loaded .path-link {
  font-family: var(--font-shingo-bold);
}

/* 14) .tag - ShinGo Bold */
.fonts-loaded .tag {
  font-family: var(--font-shingo-bold);
}

/* 15) .main-title - ShinGo Bold */
.fonts-loaded .main-title {
  font-family: var(--font-shingo-bold);
}

/* 16) .obi-text h2 - Ryumin ExHeavy */
.fonts-loaded .obi-text h2 {
  font-family: var(--font-ryumin-heavy);
}

/* 17) .shin-go-title - ShinGo Bold */
.fonts-loaded .shin-go-title {
  font-family: var(--font-shingo-bold);
}

/* 18) .ryumin-title - Ryumin ExHeavy */
.fonts-loaded .ryumin-title {
  font-family: var(--font-ryumin-heavy);
}

/* 19) .bottom-line-title > p - Ryumin ExHeavy */
.fonts-loaded .bottom-line-title > p {
  font-family: var(--font-ryumin-heavy);
}

/* 20) .side-title > p - Ryumin ExHeavy */
.fonts-loaded .side-title > p {
  font-family: var(--font-ryumin-heavy);
}

/* 21) .side-title-two h3 - Ryumin ExHeavy */
.fonts-loaded .side-title-two h3 {
  font-family: var(--font-ryumin-heavy);
}

/* 22) .jump-btn - ShinGo Bold */
.fonts-loaded .jump-btn {
  font-family: var(--font-shingo-bold);
}

/* 23) .content-list li > b - ShinGo Bold */
.fonts-loaded .content-list li > b {
  font-family: var(--font-shingo-bold);
}

/* 24) .content-list li a > b - ShinGo Bold */
.fonts-loaded .content-list li a > b {
  font-family: var(--font-shingo-bold);
}

/* 25) .merit-demerit .table-main - ShinGo Bold */
.fonts-loaded .merit-demerit .table-main {
  font-family: var(--font-shingo-bold);
}

/* 26) .merit-demerit .table-head - ShinGo Bold */
.fonts-loaded .merit-demerit .table-head {
  font-family: var(--font-shingo-bold);
}

/* 27) .card-number p - ShinGo Bold */
.fonts-loaded .card-number p {
  font-family: var(--font-shingo-bold);
}

/* 28) .number p - ShinGo Bold */
.fonts-loaded .number p {
  font-family: var(--font-shingo-bold);
}

/* 29) .content-wrapper p b - ShinGo Bold */
.fonts-loaded .content-wrapper p b {
  font-family: var(--font-shingo-bold);
}

/* 30) .contact-number-title p - ShinGo Bold */
.fonts-loaded .contact-number-title p {
  font-family: var(--font-shingo-bold);
}

/* 31) .contact-number - ShinGo Bold */
.fonts-loaded .contact-number {
  font-family: var(--font-shingo-bold);
}

/* 32) .inquiry-form - ShinGo Regular */
.fonts-loaded .inquiry-form {
  font-family: var(--font-shingo-regular);
}

/* 33) .privacy-title - ShinGo Bold */
.fonts-loaded .privacy-title {
  font-family: var(--font-shingo-bold);
}

/* 34) .privacy-bold-text - ShinGo Bold */
.fonts-loaded .privacy-bold-text {
  font-family: var(--font-shingo-bold);
}

/* 35) .link-title - Ryumin ExHeavy */
.fonts-loaded .link-title {
  font-family: var(--font-ryumin-heavy);
}

/* 36) .title-bar p - ShinGo Bold */
.fonts-loaded .title-bar p {
  font-family: var(--font-shingo-bold);
}

/* 37) .interview-title - ShinGo Bold */
.fonts-loaded .interview-title {
  font-family: var(--font-shingo-bold);
}

/* 38) .img-content > .interview-content > p - ShinGo Bold */
.fonts-loaded .img-content > .interview-content > p {
  font-family: var(--font-shingo-bold);
}

/* 39) .interview-link - ShinGo Bold */
.fonts-loaded .interview-link {
  font-family: var(--font-shingo-bold);
}

body,
h2,
h3,
#new-main .title h2,
#new-main .title p,
.works-content .ryumin-title,
.view-more-btn .sp-view-more,
.service-title h3,
.about-content .ryumin-title,
.fifty-years,
.strength-title h2,
.date,
.path-link,
.tag,
.main-title,
.obi-text h2,
.shin-go-title,
.ryumin-title,
.bottom-line-title > p,
.side-title > p,
.side-title-two h3,
.jump-btn,
.content-list li > b,
.content-list li a > b,
.merit-demerit .table-main,
.merit-demerit .table-head,
.card-number p,
.number p,
.content-wrapper p b,
.contact-number-title p,
.contact-number,
.inquiry-form,
.privacy-title,
.privacy-bold-text,
.link-title,
.title-bar p,
.interview-title,
.img-content > .interview-content > p,
.interview-link {
  transition: font-family 0.1s ease-in-out;
}

/* ============================================
   LOADING STATE
   ============================================ */
.wf-loading body {
  visibility: visible;
  opacity: 1;
}

/* ============================================
   TIMEOUT FALLBACK
   ============================================ */
.fonts-timeout body,
.fonts-timeout h2,
.fonts-timeout h3,
.fonts-timeout #new-main .title h2,
.fonts-timeout #new-main .title p,
.fonts-timeout .works-content .ryumin-title,
.fonts-timeout .view-more-btn .sp-view-more,
.fonts-timeout .service-title h3,
.fonts-timeout .about-content .ryumin-title,
.fonts-timeout .fifty-years,
.fonts-timeout .strength-title h2,
.fonts-timeout .date,
.fonts-timeout .path-link,
.fonts-timeout .tag,
.fonts-timeout .main-title,
.fonts-timeout .obi-text h2,
.fonts-timeout .shin-go-title,
.fonts-timeout .ryumin-title,
.fonts-timeout .bottom-line-title > p,
.fonts-timeout .side-title > p,
.fonts-timeout .side-title-two h3,
.fonts-timeout .jump-btn,
.fonts-timeout .content-list li > b,
.fonts-timeout .content-list li a > b,
.fonts-timeout .merit-demerit .table-main,
.fonts-timeout .merit-demerit .table-head,
.fonts-timeout .card-number p,
.fonts-timeout .number p,
.fonts-timeout .content-wrapper p b,
.fonts-timeout .contact-number-title p,
.fonts-timeout .contact-number,
.fonts-timeout .inquiry-form,
.fonts-timeout .privacy-title,
.fonts-timeout .privacy-bold-text,
.fonts-timeout .link-title,
.fonts-timeout .title-bar p,
.fonts-timeout .interview-title,
.fonts-timeout .img-content > .interview-content > p,
.fonts-timeout .interview-link {
  font-family: var(--font-noto);
}