@layer foundations {
    :root {
        /* Font Size Tokens (px → rem)
           デザイナー表の Desktop / Mobile で定義されている全サイズ */
        --font-size-10: calc(10 / 10 * 1rem);
        --font-size-12: calc(12 / 10 * 1rem);
        --font-size-14: calc(14 / 10 * 1rem);
        --font-size-16: calc(16 / 10 * 1rem);
        --font-size-18: calc(18 / 10 * 1rem);
        --font-size-20: calc(20 / 10 * 1rem);
        --font-size-24: calc(24 / 10 * 1rem);
        --font-size-26: calc(26 / 10 * 1rem);
        --font-size-32: calc(32 / 10 * 1rem);
        --font-size-36: calc(36 / 10 * 1rem);
        --font-size-40: calc(40 / 10 * 1rem);
        --font-size-48: calc(48 / 10 * 1rem);
        --font-size-52: calc(52 / 10 * 1rem);
        --font-size-56: calc(56 / 10 * 1rem);
        --font-size-60: calc(60 / 10 * 1rem);
        --font-size-64: calc(64 / 10 * 1rem);

        /* Line-height Tokens (unitless) */
        --line-height-100: 1.0;
        --line-height-130: 1.3;
        --line-height-150: 1.5;
        --line-height-180: 1.8;

        /* Letter-spacing Tokens */
        --letter-spacing-1: 1px;
        --letter-spacing-0: 0px;

        /* Font-weight Tokens */
        --font-weight-light: 100;
        --font-weight-regular: 400;
        --font-weight-bold: 700;
        --font-weight-black: 900;

       /* Responsive-rule Tokens */
       --resp-calc-rule-0: 0rem;
       --resp-calc-rule-2: calc(2 / 10 * 1rem); /* 0.2rem */
       --resp-calc-rule-4: calc(4 / 10 * 1rem); /* 0.4rem */
       --resp-calc-rule-6: calc(6 / 10 * 1rem); /* 0.6rem */
       --resp-calc-rule-8: calc(8 / 10 * 1rem); /* 0.8rem */
       --resp-calc-rule-12: calc(12 / 10 * 1rem); /* 1.2rem */
       --resp-calc-rule-16: calc(16 / 10 * 1rem); /* 1.6rem */

    }
}

@layer utilities {
    /* ---------------------------------------------------------
     Display (T-1〜T-4)
  --------------------------------------------------------- */

    /* T-1: Desktop 64px / Mobile 56px, Light / Bold, line-height 150 */

    .KVT-64L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-64);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-64L-150 {
            font-size: calc(var(--font-size-64) - var(--resp-calc-rule-8));
        }
    }

    .KVT-64B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-64);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-64B-150 {
            font-size: calc(var(--font-size-64) - var(--resp-calc-rule-8));
        }
    }

    /* T-2: Desktop 60px / Mobile 52px, Light / Regular, line-height 150 */

    .KVT-60L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-60);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-60L-150 {
            font-size: calc(var(--font-size-60) - var(--resp-calc-rule-8));
        }
    }

    .KVT-60R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-60);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-60R-150 {
            font-size: calc(var(--font-size-60) - var(--resp-calc-rule-8));
        }
    }

    /* T-3: Desktop 56px / Mobile 48px, Light / Bold, line-height 150 */

    .KVT-56L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-56);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-56L-150 {
            font-size: calc(var(--font-size-56) - var(--resp-calc-rule-8));
        }
    }

    .KVT-56B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-56);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-56B-150 {
            font-size: calc(var(--font-size-56) - var(--resp-calc-rule-8));
        }
    }

    /* T-4: Desktop 48px / Mobile 40px, Light / Bold, line-height 150 */

    .KVT-48L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-48);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-48L-150 {
            font-size: calc(var(--font-size-48) - var(--resp-calc-rule-8));
        }
    }

    .KVT-48B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-48);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-48B-150 {
            font-size: calc(var(--font-size-48) - var(--resp-calc-rule-8));
        }
    }

    /* ---------------------------------------------------------
     Subtitle (subT-1 , KV-H2 , subT-2 , subT-3)
  --------------------------------------------------------- */

    /* subT-1: Desktop 40px / Mobile 24px, Regular / Bold, line-height 150 */

    .KVT-40R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-40);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-40R-150 {
            font-size: calc(var(--font-size-40) - var(--resp-calc-rule-16));
        }
    }

    .KVT-40B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-40);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-40B-150 {
            font-size: calc(var(--font-size-40) - var(--resp-calc-rule-16));
        }
    }


    /* KV-H2: Desktop 36px / Mobile 32px, Light / Bold, line-height 150 */

    .KVT-36L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-36);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-36L-150 {
            font-size: calc(var(--font-size-36) - var(--resp-calc-rule-4));
        }
    }

    .KVT-36B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-36);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-36B-150 {
            font-size: calc(var(--font-size-36) - var(--resp-calc-rule-4));
        }
    }

    /* subT-2: Desktop 32px / Mobile 20px, Regular / Bold, line-height 150 */

    .KVT-32R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-32);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-32R-150 {
            font-size: calc(var(--font-size-32) - var(--resp-calc-rule-12));
        }
    }

    .KVT-32B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-32);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-32B-150 {
            font-size: calc(var(--font-size-32) - var(--resp-calc-rule-12));
        }
    }

    /* subT-3: Desktop 24px / Mobile 16px, Regular / Bold, line-height 150 */

    .KVT-24R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-24);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-24R-150 {
            font-size: calc(var(--font-size-24) - var(--resp-calc-rule-8));
        }
    }

    .KVT-24B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-24);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .KVT-24B-150 {
            font-size: calc(var(--font-size-24) - var(--resp-calc-rule-8));
        }
    }

    /* ---------------------------------------------------------
     Heading (H1〜H4)
  --------------------------------------------------------- */

    /* H1: Desktop 40px / Mobile 36px, Light / Bold, line-height 150 */

    .CTS-40L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-40);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-40L-150 {
            font-size: calc(var(--font-size-40) - var(--resp-calc-rule-4));
        }
    }

    .CTS-40B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-40);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-40B-150 {
            font-size: calc(var(--font-size-40) - var(--resp-calc-rule-4));
        }
    }

    /* H2: Desktop 36px / Mobile 32px, Light / Bold, line-height 150 */

    .CTS-36L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-36);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-36L-150 {
            font-size: calc(var(--font-size-36) - var(--resp-calc-rule-4));
        }
    }

    .CTS-36B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-36);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-36B-150 {
            font-size: calc(var(--font-size-36) - var(--resp-calc-rule-4));
        }
    }

    /* H3: Desktop 32px / Mobile 24px, Light / Bold, line-height 150 */

    .CTS-32L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-32);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-32L-150 {
            font-size: calc(var(--font-size-32) - var(--resp-calc-rule-8));
        }
    }

    .CTS-32B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-32);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-32B-150 {
            font-size: calc(var(--font-size-32) - var(--resp-calc-rule-8));
        }
    }

    /* H4: Desktop 26px / Mobile 20px, Light / Bold, line-height 150 */

    .CTS-26L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-26);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-26L-150 {
            font-size: calc(var(--font-size-26) - var(--resp-calc-rule-6));
        }
    }

    .CTS-26B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-26);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-26B-150 {
            font-size: calc(var(--font-size-26) - var(--resp-calc-rule-6));
        }
    }

    /* ---------------------------------------------------------
     Body Text (xl / l / base / md)
  --------------------------------------------------------- */

    /* xl: Desktop 24 / Mobile 18px, Light / Regular / Bold, line-height 150 */

    .CTS-24L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-24);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-24L-150 {
            font-size: calc(var(--font-size-24) - var(--resp-calc-rule-6));
        }
    }

    .CTS-24R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-24);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-24R-150 {
            font-size: calc(var(--font-size-24) - var(--resp-calc-rule-6));
        }
    }

    .CTS-24B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-24);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-24B-150 {
            font-size: calc(var(--font-size-24) - var(--resp-calc-rule-6));
        }
    }

    /* l-180: Desktop 20px / Mobile 16px, Light, line-height 180 */
    .CTS-20L-180 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-20);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-20L-180 {
            font-size: calc(var(--font-size-20) - var(--resp-calc-rule-4));
        }
    }

    /* l: Desktop 20px / Mobile 16px, Light / Regular / Bold, line-height 150 */

    .CTS-20L-150 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-20);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-20L-150 {
            font-size: calc(var(--font-size-20) - var(--resp-calc-rule-4));
        }
    }

    .CTS-20R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-20);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-20R-150 {
            font-size: calc(var(--font-size-20) - var(--resp-calc-rule-4));
        }
    }

    .CTS-20B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-20);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-20B-150 {
            font-size: calc(var(--font-size-20) - var(--resp-calc-rule-4));
        }
    }

    /* base: Desktop 16px / Mobile 14px, Light / Regular / Bold, line-height 180 */

    .CTS-16L-180 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-16);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-16L-180 {
            font-size: calc(var(--font-size-16) - var(--resp-calc-rule-2));
        }
    }

    .CTS-16R-180 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-16);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-16R-180 {
            font-size: calc(var(--font-size-16) - var(--resp-calc-rule-2));
        }
    }

    .CTS-16B-180 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-16);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-16B-180 {
            font-size: calc(var(--font-size-16) - var(--resp-calc-rule-2));
        }
    }

    /* md: Desktop 14px / Mobile 12px, Light / Regular / Bold, line-height 180 */

    .CTS-14L-180 {
        font-weight: var(--font-weight-light);
        font-size: var(--font-size-14);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-14L-180 {
            font-size: calc(var(--font-size-14) - var(--resp-calc-rule-2));
        }
    }

    .CTS-14R-180 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-14);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-14R-180 {
            font-size: calc(var(--font-size-14) - var(--resp-calc-rule-2));
        }
    }

    .CTS-14B-180 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-14);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-14B-180 {
            font-size: calc(var(--font-size-14) - var(--resp-calc-rule-2));
        }
    }

    /* ---------------------------------------------------------
     Caption (s-12px_caption / sm-10px)
  --------------------------------------------------------- */

    /* s-12px_caption: Desktop 12px / Mobile 12px, Regular / Bold, line-height 150, letter-spacing 1px */

    .CTS-12R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-12);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-12R-150 {
            font-size: calc(var(--font-size-12) - var(--resp-calc-rule-0));
        }
    }

    .CTS-12B-150 {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-12);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-1);
    }

    @media screen and (max-width: 767px) {
        .CTS-12B-150 {
            font-size: calc(var(--font-size-12) - var(--resp-calc-rule-0));
        }
    }

    /* sm-10px: Desktop 10px / Mobile 10px, Regular, line-height 150, letter-spacing 0px */

    .CTS-10R-150 {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-size-10);
        line-height: var(--line-height-150);
        letter-spacing: var(--letter-spacing-0);
    }

    @media screen and (max-width: 767px) {
        .CTS-10R-150 {
            font-size: calc(var(--font-size-10) - var(--resp-calc-rule-0));
        }
    }
}