@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800');
@import url('../font/yakuhanjp/dist/css/yakuhanjp.css');

:root,
:host {
  --font-size-1: 128px;    /* メインビジュアルの大きな見出し */
  --font-size-2: 64px;     /* セクション見出し */
  --font-size-3: 42.667px; /* h1 */
  --font-size-4: 32px;     /* h2 - セクションタイトル */
  --font-size-5: 24px;
  --font-size-6: 21.333px;
  --font-size-7: 18.286px; /* h3 - ボタンテキスト */
  --font-size-8: 16px;     /* body - 本文、ナビゲーション */
  --font-size-9: 14.222px; /* ボタンテキスト */
  --font-size-10: 12.8px;  /* small - 日付、コピーライト */
  --font-size-11: 11.636px;
  --font-size-12: 10.667px; /* TOPボタンテキスト */

  --font-family-main: YakuhanJP, "Noto Sans JP", sans-serif;
  --font-family-main-p: "Noto Sans JP", sans-serif;
  --font-family-accent: YakuhanJP, "Roboto", sans-serif;
  --font-family-special: "Hiragino Kaku Gothic Pro W6", sans-serif;
  --font-family-open-sans: "Open Sans", sans-serif;

  /* Connect Force Brand Colors */
  --color-brand-primary: #c9a063;      /* Connect Force Gold */
  --color-brand-secondary: #333333;    /* Connect Force Dark */
  --color-brand-tertiary: rgba(201,160,99,0.1); /* Transparent Gold */
  
  /* System Colors */
  --color-white: #ffffff;
  --color-black: #333333;
  --color-text-primary: #333333;       /* メインテキスト */
  --color-text-secondary: #C9A063;     /* セカンダリテキスト */
  --color-text-light: #999999;         /* ライトテキスト */
  --color-background-light: #f5f5f5;   /* ライトグレー背景 */
  --color-background-medium: #666666;  /* ミディアムグレー背景 */
  --color-background-dark: #333333;    /* ダーク背景 */
  --color-border: #d7d7d7;             /* 罫線カラー */
  --color-overlay: rgba(255,255,255,0.8); /* 半透明白（オーバーレイ） */

  --color-dark-gradient: linear-gradient(141.81deg, #515151 11.17%, #797878 82.37%);
  --color-light-gradient: linear-gradient(92.57deg, #E2C395 -1.16%, #B49A72 97.98%);

  /* Typography */
  --letter-spacing-wide: 8.5334px;    /* 大見出し文字間隔 */
  --letter-spacing-normal: 1.4px;     /* 通常文字間隔 */
  --letter-spacing-tight: 0.5px;      /* タイト文字間隔 */
  
  /* Line-height */
  --line-height-heading: 1.5;         /* 見出し */
  --line-height-heading-large: 1.77;  /* 大見出し (77.3px/42.667px) */
  --line-height-body: 1.8;            /* 本文 */
  --line-height-compact: 1.2;         /* コンパクト */

  /* Layout */
  --container-max-width: 1168px;      /* コンテンツ最大幅 */
  --container-max-width-narrow: 928px;      /* コンテンツ最大幅 */
  --container-full-width: 1440px;     /* フル幅 */
  --section-padding: 80px;            /* セクション間パディング */
  --section-padding-large: 120px;     /* 大きなセクション間パディング */

  /* Spacing */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-1xl: 64px;
  --spacing-2xl: 80px;
  --spacing-3xl: 100px;
  --spacing-4xl: 120px;
  --spacing-5xl: 160px;

  /* Border radius */
  --border-radius-sm: 10px;           /* 標準的な角丸 */
  --border-radius-lg: 100px;          /* ボタンの角丸 */
  --border-radius-full: 9999px;       /* 完全な円形 */

  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 960px;
  --breakpoint-laptop: 1280px;
  --breakpoint-desktop: 1920px;

  @media (width <= 960px) {
    --is-mq-md: true;
  }
  @media (width <= 767px) {
    --is-mq-mobile: true;
  }
}