/* ===========================================
   Font Import (Figmaから読み取ったフォント)
   =========================================== */
   @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

   /* ===========================================
      Base Typography
      =========================================== */
   body {
       font-family: var(--font-family-body);    /* ゴシック体 */
       font-size: var(--font-size-body-4);     /* 16px */
       font-weight: var(--font-weight-normal);  /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
       color: var(--text-tertiary);            /* #717171 */
   }
   
   /* ===========================================
      Title Styles (見出し系 - 明朝体)
      =========================================== */
   .font-title-1,
   h1 {
       font-family: var(--font-family-heading);  /* 明朝体 */
       font-size: var(--font-size-title-1);     /* 28px */
       font-weight: var(--font-weight-bold);     /* 700 */
       line-height: var(--line-height-tight);   /* 1.3 */
       color: var(--text-primary);              /* #3C3C3C */
   }
   
   .font-title-2,
   h2 {
       font-family: var(--font-family-heading);  /* 明朝体 */
       font-size: var(--font-size-title-2);     /* 24px */
       font-weight: var(--font-weight-bold);     /* 700 */
       line-height: var(--line-height-tight);   /* 1.3 */
       color: var(--text-primary);              /* #3C3C3C */
   }
   
   .font-title-3,
   h3 {
       font-family: var(--font-family-heading);     /* 明朝体 */
       font-size: var(--font-size-title-3);     /* 18px */
       font-weight: var(--font-weight-bold);     /* 700 */
       line-height: var(--line-height-default); /* 1.5 */
       color: var(--text-secondary);            /* #363030 */
   }
   
   .font-title-4,
   h4 {
       font-family: var(--font-family-heading);     /* 明朝体 */
       font-size: var(--font-size-title-4);     /* 16px */
       font-weight: var(--font-weight-bold);     /* 700 */
       line-height: var(--line-height-default); /* 1.5 */
       color: var(--text-secondary);            /* #363030 */
   }
   
   /* ===========================================
      Body Styles (本文系 - ゴシック体)
      =========================================== */
   .font-body-1 {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-1);      /* 24px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
   }
   
   .font-body-2 {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-2);      /* 20px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
   }
   
   .font-body-3,
   p {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-3);      /* 18px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-loose);   /* 1.7 */
       color: var(--text-tertiary);             /* #717171 */
   }
   
   .font-body-4 {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-4);      /* 16px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
   }
   
   .font-body-5 {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-5);      /* 14px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
   }
   
   .font-body-6 {
       font-family: var(--font-family-body);     /* ゴシック体 */
       font-size: var(--font-size-body-6);      /* 12px */
       font-weight: var(--font-weight-normal);   /* 400 */
       line-height: var(--line-height-default); /* 1.5 */
   }
   
   /* ===========================================
      Responsive Typography
      =========================================== */
   /* モバイル（〜389px） */
   @media (max-width: 389px) {
       .font-title-1, h1 {
           font-size: 20px;
       }
       
       .font-title-2, h2 {
           font-size: 18px;
       }
       
       .font-body-1 {
           font-size: 18px;
       }
       
       .font-body-2 {
           font-size: 16px;
       }
       
       .font-body-3, p {
           font-size: 14px;
       }
   }
   
   /* タブレット（390px〜959px） */
   @media (min-width: 390px) and (max-width: 959px) {
       .font-title-1, h1 {
           font-size: 24px;
       }
       
       .font-title-2, h2 {
           font-size: 20px;
       }
       
       .font-body-1 {
           font-size: 20px;
       }
       
       .font-body-2 {
           font-size: 18px;
       }
   }