:root {
    /* テキスト */
    --text-black: #000000;
    --text-primary: #1a1a1a;
    --text-secondary: #808080;
    --text-link: #036EB8;
    /* 背景色 */
    --bg-white: #FFFFFF;
    --bg-gray: #EFF0F1;
    --bg-yellow: #FDF0AD;
    /* アクセント */
    --orange: #FF9900;
    --purple: #89438F;
    --green: #007F5A;
    --blue: #036EB8;
    --gray: #B3B3B3;
    --gray-dark: #4d4d4d;
    --teal: #26B7BC;
    --student: #F6B634;
    --corporate: #25B7BC;

    /* px, spacing */
    --xs2: clamp(0.688rem, 0.637rem + 0.2vw, 0.813rem);/* 11~13 */
    --xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);/* {10px} */
    --sm: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);/* {16px} */
    --md: clamp(0.75rem, 0.625rem + 0.63vw, 0.938rem);/* 16px ~ 24px */
    --lg: clamp(1.6rem, 1.44rem + 0.64vw, 2rem);/* {32px} */
    --xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);/* 28px ~ 44px */
    --xl2: clamp(2rem, 1.5rem + 2vw, 3.25rem);/* 32px ~ 52px*/
    --space-60: clamp(3.75rem, 3.25rem + 2vw, 5rem);/* 60px ~ 80px */
    --section-spacing-width-lg: clamp(1.25rem, -0.417rem + 8.33vw, 6.875rem);/* 20px ~ 110px */
    --section-space-top: clamp(3.25rem, 2.05rem + 4.8vw, 6.25rem);/* 52px ~ 100px */
    --section-space-bottom: clamp(7.5rem, 5.5rem + 8vw, 12.5rem);/* 120px ~ 200px */


    /* フォントサイズ */
    --fz-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);/* {14px} */
    --fz-sm: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);/* {16px} */
    --fz-sm-lead: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);/* {18px} */
    --fz-md: clamp(1.438rem, 1.363rem + 0.3vw, 1.625rem);/* {26px} */
    --fz-lg: clamp(1.875rem, 1.725rem + 0.6vw, 2.25rem);/* {36px} */
    --fz-xl: clamp(2rem, 1.45rem + 2.2vw, 3.375rem);
    --fz-btn: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
    --fz-top-page-h2: clamp(1.875rem, 1.375rem + 2vw, 3.125rem);
    

    /* 線 */
    --border-light: #ccc;

    /* サービスタイトル */
    --service-title-height: clamp(1.603rem, 0.838rem + 3.06vw, 3.516rem);
    /* ロゴ */
    --logo-height: clamp(2.408rem, 2.196rem + 1.06vw, 3.125rem); /* 38.53px ~ 50px */
    /* 角丸 */
    --section-radius: clamp(1.875rem, 1.125rem + 3vw, 3.75rem);
    /* サイドスティッキー */
    --side-sticky-right: calc(var(--header-menu-fixed-right) + var(--header-menu-fixed-width) + var(--sm));
    --page-right: calc(var(--side-sticky-right) + 180px);
    --page-space-right: calc(var(--page-right) - var(--section-spacing-width-lg));

    /* パンくず */
    --bread-home-height: clamp(1.625rem, 1.525rem + 0.4vw, 1.875rem);
    --bread-home-icon-height: clamp(0.867rem, 0.814rem + 0.21vw, 1rem);
    --bread-font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    --bread-span-height: clamp(1.625rem, 1.525rem + 0.4vw, 1.875rem);
    --bread-height: calc(var(--md) + var(--bread-home-height));

    /* header */
    --header-spacing-top: clamp(1.563rem, 1.47rem + 0.46vw, 1.875rem);
    --header-spacing-bottom: clamp(1.017rem, 0.945rem + 0.36vw, 1.259rem);
    --logo-height: clamp(2.408rem, 2.196rem + 1.06vw, 3.125rem); /* 38.53px ~ 50px */
    --header-height: calc(var(--header-spacing-top) + var(--logo-height) + var(--header-spacing-bottom));
    --header-and-bread-height: calc(var(--header-height) + var(--bread-height) );

    --header-menu-fixed-top: clamp(1.75rem, 1.648rem + 0.51vw, 2.094rem);
    --header-menu-fixed-right: clamp(0.688rem, -0.22rem + 4.54vw, 3.75rem);
    --header-menu-fixed-width: clamp(2.5rem, 2.13rem + 1.85vw, 3.75rem);
    --header-menu-fixed-height: clamp(1.75rem, 1.565rem + 0.93vw, 2.375rem);
    /* トップページ */
    --top-mv-illust-width: clamp(15.625rem, 10.625rem + 20vw, 28.125rem);
    --top-service-illust-circle-width: clamp(20.625rem, 19.375rem + 5vw, 23.75rem);
    /* センターの取り組み */
    --initiatives-service-illust-circle-width: ;

    /* セクション上部のタブ装飾 */
    --tab-pl: clamp(0.75rem, -0.27rem + 4.08vw, 3.3rem);
    --tab-left: calc(var(--section-spacing-width-lg) - var(--tab-pl));
    --tab-fz: clamp(1.125rem, 0.975rem + 0.6vw, 1.5rem);
}
main.lab,
.service-item.lab {
    --service-brand-color: var(--orange);
}
main.sb,
.service-item.sb {
    --service-brand-color: var(--purple);
}
main.otoyo,
.service-item.otoyo {
    --service-brand-color: var(--green);
}
main.sip,
.service-item.sip {
    --service-brand-color: var(--blue);
}
main:not(.lab, .sb, .otoyo, .sip),
.service-item:not(.lab, .sb, .otoyo, .sip) {
    --service-brand-color: var(--teal);
}

/* about, initiatives セクション英語見出し */
.about-page .section.message::before {content: 'message'}
.about-page .section.staff::before {content: 'staff profiles'}
.about-page .section.organization::before {content: 'organization'}
.about-page .section.symbol::before {content: 'symbol mark'}
.initiatives .section.service::before {content: 'working on'}