@charset "UTF-8";
/* ===========================================================
   tokens.css — CSS変数だけを置く。色・書体・余白・幅・影・モーション
   値のハードコードはここ以外では行わない
   =========================================================== */
@layer reset, tokens, typography, layout, components, a11y, gutenberg, pages;

@layer tokens {
  :root {
    /* --- ロゴ専用カラー（ロゴ表示でのみ使用） --- */
    --c-brand-logo: #C1362F;
    --c-accent-logo: #819F49;

    /* --- UIパレット（ロゴより彩度を落とす） --- */
    --c-brand-900: #8E2723;
    --c-brand-800: #B03A34;   /* メイン */
    --c-brand-700: #C25A54;
    --c-brand-600: #CF7A75;
    --c-brand-200: #E9C4C1;
    --c-brand-100: #F5E2E0;
    --c-brand-50:  #FBF1F0;

    --c-accent-800: #4A6024;  /* 面に使う濃い緑（ナビのマウスオンの上線） */
    --c-accent-700: #5F7A2E;  /* 文字に使える濃さ（白地 4.8:1） */
    --c-accent-600: #819F49;  /* 装飾のみ（白地 3.0:1） */

    /* --- テキスト・背景・罫線 --- */
    --c-text:        #1A1A1A;
    --c-text-muted:  #585858;
    --c-text-subtle: #8A8A8A;
    --c-text-invert: #FFFFFF;

    --c-bg:       #FFFFFF;
    --c-bg-alt:   #F5F5F3;
    --c-bg-dark:  #2B2B2B;
    --c-line:     #DCDCDC;
    --c-line-invert: rgba(255, 255, 255, .32);
    --c-watermark:   rgba(0, 0, 0, .045);  /* 背景に敷く英字 */
    --c-bg-ink:      #1B1E21;              /* TOPヒーローの濃い面 */

    /* --- 役割名エイリアス（実装ではこちらを参照する） --- */
    --c-action-primary:       var(--c-brand-800);
    --c-action-primary-hover: var(--c-brand-900);
    --c-action-mark:          var(--c-accent-600);
    --c-action-mark-text:     var(--c-accent-700);
    --c-text-on-action:       var(--c-text-invert);
    --c-surface-emphasis:     var(--c-bg-alt);
    --c-surface-tint:         var(--c-brand-50);   /* ごく薄い赤の面 */
    --c-surface-strong:       var(--c-brand-800);  /* 赤ベタの面 */
    --c-surface-invert:       var(--c-bg-dark);    /* 濃いグレーの面（フッター） */
    --c-surface-invert-red:   #922622;             /* 深い赤の面（TOPの強み） */

    /* --- 書体 --- */
    --ff-base: "Zen Kaku Gothic Antique", "Hiragino Sans", "Noto Sans JP", sans-serif;
    --ff-num:  "Poppins", "Zen Kaku Gothic Antique", sans-serif;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;
    --fw-black:   900;

    /* --- フォントサイズ（基準16px。--fs-body を17pxにすれば全体が上がる） --- */
    --fs-display: clamp(2.5rem, 4.6vw, 4.5rem);  /* MVコピー 40-72px */
    --fs-h1:      clamp(2rem, 2.4vw + 1.4rem, 2.4rem);
    --fs-h2:      clamp(1.6rem, 1.8vw + 1.1rem, 2.4rem); /* 26-38px */
    --fs-h3:      1.45rem;    /* 23px */
    --fs-h4:      1.15rem;    /* 18px */
    --fs-lead:    1.05rem;    /* 17px */
    --fs-body:    1rem;       /* 16px */
    --fs-small:   0.9375rem;  /* 15px */
    --fs-caption: 0.8125rem;  /* 13px */
    --fs-eyebrow: 0.9375rem;  /* 15px 英字ラベル */
    --fs-nav:     1.05rem;    /* 17px グローバルナビ */
    --fs-num:     clamp(2.4rem, 3.2vw + .6rem, 3.4rem); /* 38-54px 数値アピール */
    --fs-section: clamp(1.75rem, 1.6vw + 1.2rem, 2.6rem); /* 28-42px セクション見出し */
    --fs-watermark: clamp(4rem, 9vw, 8.5rem);         /* 背景に敷く英字 64-136px */
    --fs-gnav:    1.15rem;    /* 18px TOPのMV下ナビ */
    --fs-pagehead:   clamp(2rem, 2.2vw + 1.3rem, 2.6rem);   /* 下層ページ見出し 32-42px */
    --fs-catch:      clamp(1.3rem, 1.4vw + .9rem, 1.9rem);  /* 下層の中央キャッチ 21-30px */
    --fs-philosophy: clamp(2rem, 4vw + .6rem, 3.6rem);      /* 企業理念 32-58px */

    /* --- 行間・字間（日本語向け。見出しに負の字間は使わない） --- */
    --lh-tight:   1.2;
    --lh-heading: 1.4;
    --lh-body:    1.9;
    --lh-loose:   1.95;

    --tr-display: .02em;
    --tr-heading: .04em;
    --tr-body:    .01em;
    --tr-wide:    .08em;
    --tr-eyebrow: .1em;

    /* --- 余白（8px基準） --- */
    --sp-1: .25rem;   /*  4px */
    --sp-2: .5rem;    /*  8px */
    --sp-3: .75rem;   /* 12px */
    --sp-4: 1rem;     /* 16px */
    --sp-5: 1.5rem;   /* 24px */
    --sp-6: 2rem;     /* 32px */
    --sp-7: 3rem;     /* 48px */
    --sp-8: 4rem;     /* 64px */
    --sp-9: 6rem;     /* 96px */
    --sp-10: 8rem;    /* 128px */

    --section-py:       clamp(3.25rem, 7vw, 5.5rem);  /* 52-88px 標準 */
    --section-py-tight: clamp(1.75rem, 4vw, 2.75rem); /* 28-44px 帯 */
    --section-py-loose: clamp(4rem, 9vw, 7rem);

    /* --- 幅 --- */
    --container-max:    1320px;
    --container-narrow: 960px;
    --container-read:   720px;
    --container-pad:    clamp(1.25rem, 3vw, 2rem);

    /* --- ヘッダー・ナビの高さ（JSの判定と共有する） --- */
    --header-h:         92px;
    --header-h-compact: 64px;
    --gnav-band-h:      118px;
    --pagehead-h:       clamp(260px, 31vw, 450px); /* 下層ページの写真見出し */

    /* --- 角丸・影 --- */
    --r-sm: 2px;
    --r-md: 4px;
    --r-pill: 999px;

    --sh-sm: 0 1px 0 rgba(0, 0, 0, .14);
    --sh-md: 0 0 18px rgba(0, 0, 0, .10);
    --sh-lg: 0 8px 30px rgba(0, 0, 0, .16);
    --sh-text: 0 2px 10px rgba(0, 0, 0, .55), 0 6px 30px rgba(0, 0, 0, .45),
               0 0 60px rgba(0, 0, 0, .35);

    /* --- モーション --- */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --dur: 300ms;
    --dur-slow: 1400ms;
    --dur-kenburns: 5s;      /* スライド切替の間隔と揃える */

    /* --- アイコン --- */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.625rem;
    --icon-xl: 2.5rem;
    --icon-stroke: 2;

    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --icon-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --icon-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17'/%3E%3Cpath d='m12.5 1.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
    --icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");

    /* --- アミ（ドットパターン） --- */
    --pattern-dot: radial-gradient(rgba(0, 0, 0, .085) 1px, transparent 1px);
    --pattern-dot-size: 9px 9px;
    /* Aマークの斜めのライン（赤・暗い面の上で使う） */
    --pattern-diagonal:
      linear-gradient(110deg, transparent calc(62% - 1px), rgba(255, 255, 255, .14) 62%, transparent calc(62% + 1px)),
      linear-gradient(110deg, transparent calc(74% - 1px), rgba(255, 255, 255, .14) 74%, transparent calc(74% + 1px));
  }

  @media (max-width: 767px) {
    :root {
      --header-h: 64px;
      --header-h-compact: 56px;
    }
  }
}