@charset "UTF-8";

/*--------------------------------------------------------
変数の設定
--------------------------------------------------------*/

/* =======================================
　WordPressブロックエディタ カラープリセット
　（possweb-blocks レスポンシブフォント等の文字色を反映するため）
======================================= */
:root {
  --wp--preset--color--primary: var(--color-primary);
  --wp--preset--color--secondary: var(--color-gray05);
  --wp--preset--color--accent: var(--color-accent01);
  --wp--preset--color--foreground: var(--color-primary-font-main);
  --wp--preset--color--background: var(--color-base);
  --wp--preset--color--black: var(--color-bk);
  --wp--preset--color--white: var(--color-wh);
  --wp--preset--color--gray: var(--color-gray05);
}



/* =======================================
　レイアウト
======================================= */

/*------ メインエリア幅 -----*/
:root {
  /*PCヘッダー高さ（ファーストビュー高さ計算用）*/
  --header-height: 90px;

  /*ワイド幅*/
  --main-max-wide: 1480px;

  /*標準幅*/
  --main-max-regular: 1280px;

  /*タイト幅*/
  --main-max-narrow: 800px;
}

/*------ フッター幅 -----*/
:root {
  /*フッター基準幅*/
  --footer-max-w: 100%;
}


/*------ ロゴ幅 -----*/
:root {
  /*max-width*/
  --logo-size: 260PX;
}


/* =======================================
　デザインカラー
======================================= */

/*------ カラーリング -----*/
:root {
  /* メインカラー */
  --color-primary: #FF0199;

  /* アクセントカラー① */
  --color-accent01: #D3AC08;

  /* アクセントカラー② */
  --color-accent02: #51f9ff;

  /* ベースカラー */
  --color-base: #FFF;

  /* フッターインフォ背景 */
  --color-footer-info-bg: #030405;

  /* フッターコンテンツ背景 */
  --color-footer-bg: #F7F7F7;

  /* フッターボトム背景 */
  --color-footerbottom-bg: #F7F7F7;

}


/*------ モノトーン -----*/
:root {
  /*ホワイト*/
  --color-wh: #FFF;

  /*超薄グレー*/
  --color-gray00: #F7F7F7;

  /*極めて薄いグレー*/
  --color-gray01: #EEE;

  /*ベースとなる薄いグレー（ベースカラー）*/
  --color-gray02: #E5E4E0;

  /*やや薄いグレー*/
  --color-gray03: #999;

  /*標準グレー*/
  --color-gray04: #4b4b4b;

  /*ダークブラック*/
  --color-gray05: #030405;

  /*基本ブラック（フォント色を基準とする）*/
  --color-bk: #231815;
}


/* =======================================
　フォントファミリー
======================================= */

:root {
  /* 基本明朝 */
  --type-primary-font-serif: "Noto Serif JP", serif;

  /* 基本ゴシック */
  --type-primary-font-sans: "Noto Sans JP", sans-serif;

  /* 名前フォント */
  --type-name-font: "Klee One", cursive;

  /* 英語 */
  --type-english-font: "Montserrat", sans-serif;
}






/* =======================================
　基本テキスト
======================================= */

/*----- フォントサイズ -----*/
:root {
  /* ラージサイズ（ロゴテキスト） */
  --size-primary-font-large: calc(var(--size-primary-font) * 1.625);

  /* 標準サイズ */
  --size-primary-font: 16px;

  /* スモールサイズ */
  --size-primary-font-small: calc(var(--size-primary-font) * 0.8125);

  /* 最小サイズ */
  --size-primary-font-verysmall: 10px;
}

/*----- 行間・字間 -----*/
:root {
  /*行間*/
  --lh-primary-font: 1.75;

  /*字間*/
  --ls-primary-font: 1px;
}

/*----- 文字色（メインエリア） -----*/
:root {
  /* 段落・文章 */
  --color-primary-font-main: #231815;

  /* リンク */
  --color-primary-link: #231815;
}

/*----- 文字色（フッターエリア） -----*/
:root {
  /* 段落・文章 */
  --color-primary-font-footer: #231815;

  /* リンク */
  --color-primary-link-footer: #231815;
}



/* =======================================
　見出し
======================================= */

/*----- フォントサイズ -----*/
:root {
  /*PC-h1フォントサイズ*/
  --size-h1: 40px;

  /*PC-h2フォントサイズ*/
  --size-h2: 28px;

  /*PC-h3フォントサイズ*/
  --size-h3: 24px;

  /*PC-h4フォントサイズ*/
  --size-h4: 20px;

  /*PC-h5フォントサイズ*/
  --size-h5: 18px;

  /*PC-h6フォントサイズ*/
  --size-h6: 16px;
}

/*----- 行間・字間 -----*/
:root {
  /*行間*/
  --lh-primary-heading: 1.1;

  /*字間*/
  --ls-primary-heading: 2px;
}

/*----- 文字色（メインエリア） -----*/
:root {
  --color-primary-heading: #231815;
}

/*----- 文字色（フッターエリア） -----*/
:root {
  /* フッター */
  --color-primary-heading-footer: #FFF;

  /* フッターボトム */
  --color-primary-font-footerbottom: #AAA;
}