/*
  Breakpoints
  @media (max-width: 768px)  SP
  @media (min-width: 769px)  PC
*/

/* Swiper を vendor レイヤーに封じ込め pages レイヤーで上書き可能にする */
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') layer(vendor);

/* Typekit 廃止: tokens のフォントは Google Fonts のみ（Playfair は Google 上の正式名は Playfair Display） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Playfair+Display&family=Noto+Serif+JP&family=Noto+Serif+KR&display=swap');

@layer reset, vendor, tokens, base, components, pages;

@layer tokens {
  :root {
    /* ----------------------------------------
       Color
    ---------------------------------------- */
    --color:              #222222;
    --color-text:         #222222;
    --color-bg:           #F7F7F5;
    --color-muted:        #7B7B7B;
    --color-border:       #DEDEDE;
    --color-primary:      #58207C;
    --color-white:        #ffffff;

    /* コピーライト・客室 info・long-arrow ホバー等（案件のメインカラー） */
    --color-main:         #58207C;

    /* ヘッダー帯の背景（ロゴとのコントラストで案件ごとに調整） */
    --color-header:       #58207C;
    --color-header-text:  #ffffff;
    --color-main-hover:   color-mix(in srgb, var(--color-main) 85%, black);
    --color-overlay:      color-mix(in srgb, #000 24%, transparent);

    /* ----------------------------------------
       Font Family
    ---------------------------------------- */
    --font-en: 'Playfair Display', serif;
    --font-ja: 'Noto Serif JP', serif;
    --font-kr: 'Noto Serif KR', serif;
    --font-serif: var(--font-ja);
    --font-sans-ja: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

    /* ----------------------------------------
       Font Size
    ---------------------------------------- */
    --text-title:  clamp(3rem, 5.5vw, 5rem);
    --text-large:  1.5rem;
    --text-medium: 1.25rem;
    --text-base:   1rem;
    --text-small:  0.875rem;

    /* ----------------------------------------
       Line Height
    ---------------------------------------- */
    --leading-100: 1;
    --leading-140: 1.4;
    --leading-160: 1.6;
    --leading-200: 2;

    /* ----------------------------------------
       Letter Spacing
    ---------------------------------------- */
    --tracking-base: 0.06em;
    --tracking-none: 0;

    /* ----------------------------------------
       Layout
    ---------------------------------------- */
    --container-max:   1080px;
    --content-padding: clamp(1.25rem, 7.5vw, 5rem);

    /* ----------------------------------------
       Component
    ---------------------------------------- */
    --radius-btn:       40px;
    --radius-btn-inner: 32px;
    --ease-btn:         cubic-bezier(0.39, 0.575, 0.565, 1);
    --duration-base:    0.3s;
    --duration-slow:    0.6s;
  }
}