@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('../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: 25.6px;
  --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;

  --color-main: #e04212;        /* ちひろの帽子色（オレンジ） */
  --color-main-hover: #76C4DA;  /* ホバー色 */
  --color-main-alpha: #2575C112; /* アルファ版 */
  --color-accent: #C9A063;      /* アクセント色 */
  --color-white: #ffffff;
  --color-black: #333333;       /* メインテキスト */
  --color-text: #313131;        /* 文字色（本文、見出し） */
  --color-heading-gray: #7d7d7d; /* 見出しグレー（英語見出し、フッターメニュー） */
  --color-light-gray: #fbfbfb;   /* セクション背景 */
  --color-border: #d7d7d7;       /* 罫線カラー */
  --color-overlay: rgba(255,255,255,0.8); /* 半透明白（オーバーレイ） */
  --color-cta-bg: #35281166;     /* 半透明背景（CTAセクション） */

  /* Line-height */
  --line-height-heading: 1.5;    /* 見出し */
  --line-height-body: 1.8;       /* 本文 */

  /* Layout */
  --container-max-width: 1120px; /* コンテンツ最大幅 */
  --container-full-width: 1440px; /* フル幅 */

  /* 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;
  }

}