/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap");


/* google fonts */

/* フォントの設定 */
:root {
  /* ベースのフォント種類 */
  --base-font-family:
    "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
}

:root {
  /* 英語フォント */
  --english-font-family: "Manrope", sans-serif;
}

:root {
  /* 見出しのフォント種類 */
  --heading-font-family:
    "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
}

/* フォントの設定 */

:root {
  /* フォントの太さ設定 */
  --semibold: 600;
  --bold: 700;
}

/* フォントサイズ・行間・字間の設定 */
:root {
  /* heading01（特大見出し）- メインビジュアルやトップコピーに使用 */
  --heading01: 4.8rem;
  --heading01-sp: 3.8rem;
  --heading01-line-height: 140%;
  --heading01-letter-spacing: 0;
  --heading01-weight: 600;

  /* heading02（見出し1）- ページタイトルに使用 */
  --heading02: 4.8rem;
  --heading02-sp: 3.2rem;
  --heading02-line-height: 140%;
  --heading02-letter-spacing: 0.05em;
  --heading02-weight: 600;

  /* heading03（見出し2）- セクション見出しに使用 */
  --heading03: 3.2rem;
  --heading03-sp: 2.4rem;
  --heading03-line-height: 150%;
  --heading03-letter-spacing: 0.05em;
  --heading03-weight: 600;

  /* heading04（見出し3）- サブタイトルやカードタイトルに使用 */
  --heading04: 2.4rem;
  --heading04-sp: 2rem;
  --heading04-line-height: 160%;
  --heading04-letter-spacing: 0.05em;
  --heading04-weight: 500;

  /* text-lg（本文ラージ）- 本文よりやや大きい標準テキストに使用 */
  --text-lg: 1.8rem;
  --text-lg-sp: 1.6rem;
  --text-lg-line-height: 180%;
  --text-lg-letter-spacing: 0.05em;
  --text-lg-weight: 500;

  /* text-base（本文）- 本文に使用 */
  --text-base: 1.5rem;
  --text-base-sp: 1.3rem;
  --text-base-line-height: 200%;
  --text-base-letter-spacing: 0;
  --text-base-weight: 400;

  --caption: 1.2rem;
  --caption-sp: 1.2rem;
  --caption-line-height: 160%;
  --caption-letter-spacing: 0;
  --caption-weight: 300;
}

/* 余白の設定 */
:root {
  /* 1 - アイコンと文字の間、非常に狭い隙間 */
  --spacing-1: 0.8rem;
  /* 2 - 小さな要素同士の間隔（カード内の要素など） */
  --spacing-2: 1.2rem;
  /* 3 - 最もよく使う標準的な余白 【基準】 */
  --spacing-3: 1.6rem;
  /* 4 - 関連するグループ同士の間隔 */
  --spacing-4: 2.4rem;
  --spacing-4-sp: 2rem;
  /* 5 - コンポーネント同士の間隔 */
  --spacing-5: 3.2rem;
  --spacing-5-sp: 2.4rem;
  /* 6 - セクションの区切り（小） */
  --spacing-6: 4rem;
  --spacing-6-sp: 2.8rem;
  /* 7 - セクションの区切り（大） */
  --spacing-7: 5.6rem;
  --spacing-7-sp: 4rem;
  /* 8 - セクションの区切り（超大） */
  --spacing-8: 8rem;
  --spacing-8-sp: 6rem;
  /* 9 - ページ全体の余白など最大単位 */
  --spacing-9: 12rem;
  --spacing-9-sp: 6rem;
}

/* 余白の設定 */

/* カートタイプの余白 */
:root {
  --gap-x: 4rem;
  --gap-y: 3.2rem;
  --gap-x-sp: 2.4rem;
  --gap-y-sp: 2rem;
}

/* カラー設定 */
:root {
  /* テキストカラーを設定 */
  --text-color: #333333;
  /* リンクテキストのホバー時の色 */
  --link-text-hover: #2a42b0;

  --white: #ffffff;
  --black: #333333;

  /* サイトの背景色を設定 */
  --site-background: #ffffff;

  /* メインカラー背景色と文字色を設定 */
  --primary: #f0f0f0;
  --primary-text: #2a42b0;
  --primary-background-hover: #db671f;
  --primary-text-hover: #ffffff;

  /* サブカラー背景色と文字色を設定 */
  --secondary: #8fc31f;
  --secondary-text: #ffffff;
  --secondary-hover: #333333;
  --secondary-text-hover: #ffffff;

  /* ターシャリーカラー背景色と文字色を設定 */
  --tertiary: #192350;
  --tertiary-text: #ffffff;
  --tertiary-hover: #333333;
  --tertiary-text-hover: #ffffff;
}

/* カラー設定 */

/* 線の色 */
:root {
  --border-color: #e1edf6;
}

:root {
  /* コンテンツ幅を設定 */
  --content-width: 118rem;
  --content-full: 144rem;
  --content-width-sp: 100%;

  /* コンテンツ幅余白を設定 */
  --content-padding: 0 2rem;
  --content-padding-sp: 0 1.5rem;
}

/* 角丸の設定 */
:root {
  --border-radius: 1.2rem;
  --border-radius-sp: 0.8rem;
}

/* 記事投稿のサムネイルの設定 */
:root {
  --article-thumbnail-aspect-ratio: 1 / 1;
}

/* ボタンの設定 */
:root {
  /* ボタン01（アウトライン） */
  --button-background: #ffffff;
  --button-text: #0a0a0a;
  --button-border-color: #0a0a0a;
  --button-border-radius: 8px;

  /* ボタン02（塗りつぶし） */
  --button-background02: #2a42b0;
  --button-text02: #ffffff;
  --button-border-color02: #db671f;
  --button-border-radius02: 4px;

  /* 共通 */
  --button-border-width: 2px;
}

/* ボタンホバー設定 */
:root {
  /* ボタン01 ホバー */
  --button-hover-background: #192350;
  --button-hover-text: #ffffff;
  --button-hover-border-color: #0033ff;

  /* ボタン02 ホバー */
  --button-hover-background02: #192350;
  --button-hover-text02: #ffffff;
  --button-hover-border-color02: #0a0a0a;
}

/* ヘッダーの高さ設定 */
:root {
  --header-height: 8rem;
  --header-height-sp: 7.2rem;
}

/* ロゴ設定 */
:root {
  --logo-max-width: 20rem;
  --logo-max-width-sp: 1.5rem;
}

/* アニメーションの動きの設定 */
:root {
  --transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

:root {
  --border-radius01: 4px;
  --border-radius02: 12px;
  --border-radius03: 60px;
}