@charset "UTF-8";

/* =====================================================
  TOKENS
  THE COMRADE SCRUM
===================================================== */

:root{

  /* =====================================================
    COLOR
  ===================================================== */
  --cs-bg:#ffffff;
  --cs-ink:#222222;
  --cs-soft:#333333;

  /* =====================================================
    TYPOGRAPHY SCALE（φベース）
  ===================================================== */
  --phi:1.618;

  --fs-base:14px;

  /* rounded scale */
  --fs-xs:11px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-lg:22px;
  --fs-xl:34px;

  /* line-height */
  --lh-tight:1.25;
  --lh-base:1.62;
  --lh-loose:1.9;

  /* =====================================================
    SPACING（φリズム）
  ===================================================== */
  --sp-s:8px;
  --sp-m:13px;
  --sp-l:21px;
  --sp-xl:34px;
  --sp-xxl:55px;

  /* =====================================================
    FLOW（余白トーン統一）
  ===================================================== */
  --cs-flow-xs:12px;
  --cs-flow-sm:16px;
  --cs-flow-md:28px;
  --cs-flow-lg:44px;

  /* =====================================================
    LAYOUT
  ===================================================== */
  --cs-base-left:clamp(20px, 6vw, 58px);
  --cs-wrap:540px;

  /* front */
  --cs-front-top:192px;
  --cs-front-side:20px;
  --cs-front-bottom:34px;

  /* =====================================================
    LOGO
  ===================================================== */
  --cs-logo-w:118px;
  --cs-logo-gap:56px;

  /* =====================================================
    TEXT BLOCK
  ===================================================== */
  --cs-title:15px;
  --cs-text:14px;

  --cs-text-gap:4px;
  --cs-block-gap:46px;
  --cs-enter-gap:50px;

  /* =====================================================
    LOADING
  ===================================================== */
  --cs-loading-w:360px;

  /* =====================================================
    HEADER
  ===================================================== */
  --cs-header-h:74px;
  --cs-header-h-scrolled:68px;
  --cs-header-logo-w:78px;

  --cs-header-pad-x:var(--cs-base-left);

  --cs-header-bg:#ffffff;
  --cs-header-bg-scrolled:#ffffff;
  --cs-header-border:rgba(17,17,17,.08);
  --cs-header-shadow:0 8px 24px rgba(0,0,0,.03);

  --cs-header-line:rgba(17,17,17,.88);
  --cs-header-line-scrolled:rgba(17,17,17,.88);

  --cs-header-ease:cubic-bezier(.22,.61,.36,1);
}

/* =====================================================
  MOBILE OVERRIDE
===================================================== */

@media (max-width:767px){

  :root{

    --cs-wrap:360px;

    --cs-front-top:120px;
    --cs-front-side:24px;
    --cs-front-bottom:32px;

    --cs-logo-w:108px;
    --cs-logo-gap:44px;

    --cs-title:14px;
    --cs-text:13px;

    --cs-block-gap:38px;
    --cs-enter-gap:46px;

    --cs-loading-w:300px;

    --cs-base-left:24px;

    --cs-header-h:64px;
    --cs-header-h-scrolled:60px;
    --cs-header-logo-w:72px;

    --cs-flow-xs:10px;
    --cs-flow-sm:14px;
    --cs-flow-md:24px;
    --cs-flow-lg:38px;
  }

}