/* ------------------------------
　　CSS変数
------------------------------ */
:root {

  /* ------------------------------
  カラー（正木幼児園用）
  ------------------------------- */

  /* メインテーマ：コーラルピンク × パステルベース */
  --color-primary: #ff7b89;               /* メイン：コーラルピンク */
  --color-primary-hover: #ff9ea9;         /* ホバー時の淡いピンク */
  --color-primary-light: #fff0f2;         /* 背景やボタン用のやわらかピンク */
  --color-primary-light-hover: #ffe6ea;   /* 淡いピンクのホバー用 */
  --color-primary-bg: var(--color-primary-light);
  --color-primary-bg-hover: var(--color-primary-light-hover);

  /* サブカラー：やわらかグレー＆ミント系ニュートラル */
  --color-secondary: #7a7a7a;             /* サブテキストなどに */
  --color-accent-sub: #a8e1d8;            /* 補助的な明るいミントグリーン */

  /* ポジティブカラー（ハイライトなど） */
  --color-highlight: #ffe5a5;             /* 優しいレモンイエローで温かみを */

  /* アラート系 */
  --color-danger: #e95b5b;                /* 赤系も明るく柔らかく */
  --color-danger-light: #fff5f5;

  /* ベースカラー */
  --color-white: #ffffff;
  --color-black: #333333;
  --color-white90: rgba(255, 255, 255, .9);
  --color-black30: rgba(0, 0, 0, .3);
  --color-black80: rgba(0, 0, 0, .8);

  /* グレー系階調（全体的に明るく調整） */
  --color-gray10: #fafafa;
  --color-gray20: #f0f0f0;
  --color-gray30: #e3e3e3;
  --color-gray40: #d7d7d7;
  --color-gray50: #bfbfbf;
  --color-gray60: #a6a6a6;
  --color-gray70: #8c8c8c;
  --color-gray80: #737373;
  --color-gray90: #595959;
  --color-gray100: #3f3f3f;

  /* フォーム・リンク等 */
  --color-form-bg: var(--color-gray10);
  --color-form-border: var(--color-gray40);
  --color-link: var(--color-primary);
  --color-focus: var(--color-primary-hover);
  --color-page-title-bg: var(--color-primary-light);
  --color-hover-bg: var(--color-primary-light-hover);
  --color-hover-bg-2nd: rgba(255, 123, 137, 0.1);

  /* 必須・エラー */
  --color-required: var(--color-danger);
  --color-error: var(--color-danger);

  /* テキスト */
  --color-text: var(--color-gray100);
  --color-text-2nd: var(--color-gray70);
  --color-text-inverse: var(--color-white);

  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-secondary);

  /* グローバルナビ・オーバーレイ */
  --color-globalnav-bg: rgba(255, 255, 255, 0.95);  /* 白ベース・軽い影を想定 */
  --color-image-overlay-bg: rgba(0, 0, 0, 0.25);    /* 写真上テキスト補助用 */

  /* ボタン・シャドウ */
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --box-shadow-hover: 0 3px 10px rgba(0, 0, 0, 0.12);
  --box-shadow-focus: 0 0 0 .25rem rgba(255, 123, 137, 0.25);
  --box-shadow-error: 0 0 0 .25rem rgba(233, 91, 91, 0.25);

  /* アイコン背景 */
  --color-icon-bg: var(--color-primary);
  --color-icon-bg-hover: var(--color-primary-hover);


  /* ------------------------------
  フォント
  ------------------------------- */
  --font-hiragino: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  --font-yu-gothic: "Helvetica Neue", arial, yugothic, "yu gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  --font-meiryo: "Helvetica Neue", arial, meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-base: var(--font-meiryo);

  /* ------------------------------
  レイアウト
  ------------------------------- */

  /* 1120px */
  --container: calc(70rem + var(--container-space-x) * 2);
  /* 960px */
  --container-md: calc(56rem + var(--container-space-x) * 2);
  /* 768px */
  --container-sm: calc(44rem + var(--container-space-x) * 2);

  /* 2カラム */
  --width-main-container: calc(100% - var(--width-side-container) - var(--gutter-md) * 1.5);
  --width-side-container: var(--width-side-container);

  /* サブカラムの幅 */
  --width-side-container: 19rem;

  /* ページタイトル */
  --page-title-filter: rgba(0, 0, 0, 0.55);
  --page-title-space-bottom: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --page-title-space-bottom: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --page-title-space-bottom: 6.5rem;
  }

  /* セクション上下余白 */
  --section-space-y: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --section-space-y: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --section-space-y: 6.5rem;
  }

  /* ヘッダー */
  --header-height: 3.7rem;
  --header-height-fixed: 3.7rem;

  /* フッター */
  --footer-margin-top: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --footer-margin-top: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --footer-margin-top: 6.5rem;
  }

  /* z-index */
  --zindex-fixed-contents: 50;
  --zindex-header: 60;
  --zindex-mobile-nav: 61;
  --zindex-mobile-nav-btn: 62;

  /* ------------------------------
  余白
  ------------------------------- */

  /* ガター */
  --gutter-sm: 1rem;
  --gutter-md: 2rem;
  --gutter-lg: 3rem;

  /* コンテナー左右余白 */
  --container-space-x: 1rem;
  @media (min-width: 30rem) { /* _acms-common.scss : $breakpoint-sm-min */
    --container-space-x: 2rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --container-space-x: 3rem;
  }

  /* グリッドの間隔 */
  --col-gutter: var(--gutter-md);
  --unit-gutter-var: var(--gutter-md);

  /* カードレイアウト用のはみ出し背景余白 */
  --card-bg-space: 1rem;

  /* 余白ユニット */
  --unit-space-sm: 2rem;
  --unit-space-md: 3rem;
  --unit-space-lg: 4rem;

  /* 罫線ユニット余白 */
  --separator-sm: 2rem;
  --separator-md: 3rem;
  --separator-lg: 4rem;

  /* ユニットの見出し要素上追加マージン */
  --unit-heading-margin-top-add: 0.6em;

  /* systemでも参照しているプロパティを定義 */
  --unit-gap-x: var(--gutter-md);
  --unit-margin-top: 0;
  --unit-margin-bottom: 2rem;

  /* ------------------------------
  パーツ
  ------------------------------- */

  /* ボタン */
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 2rem;

  /* ボーダー太さ */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* 角丸 */
  --border-radius-sm: 3px;
  --border-radius-md: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 32px;
  --border-radius-round: 10em;

  /* 行高さ */
  --line-height-base: 1.5;
  --line-height-ss: 1;
  --line-height-sm: 1.4;
  --line-height-lg: 1.7;

  /* エントリー マージン */
  --entry-el-margin-xxs: 0.5rem;  /*  8px */
  --entry-el-margin-xs: 1rem;  /*  16px */
  --entry-el-margin-sm: 1.5rem;  /*  24px */
  --entry-el-margin-md: 2rem;  /*  32px */
  --entry-el-margin-lg: 3rem;  /*  48px */

  /* エントリー パディング */
  --entry-el-padding-xxs: 0.5rem;  /*  8px */
  --entry-el-padding-xs: 1rem;  /*  16px */
  --entry-el-padding-sm: 1.5rem;  /*  24px */
  --entry-el-padding-md: 2rem;  /*  32px */
}