/* 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');
/* 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: 800;
    /* 見出し・強調（インライン等で使用） */
    --font-weight-strong: 700;
}


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

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

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

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

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

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


    --caption: 1.2rem;
    --caption-sp: 1.2rem;
    --caption-line-height: 150%;
    --caption-letter-spacing: 0.01em;
    --caption-weight: 400;
}

/* 余白の設定 */
:root {
    /* 1 - アイコンと文字の間、非常に狭い隙間 */
    --spacing-1: .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: 3.2rem;
    /* 7 - セクションの区切り（大） */
    --spacing-7: 5.6rem;
    --spacing-7-sp: 4rem;
    /* 8 - セクションの区切り（超大） */
    --spacing-8: 8rem;
    --spacing-8-sp: 6rem;
    /* 9 - ページ全体の余白など最大単位 */
    --spacing-9: 12rem;
    --spacing-9-sp: 10rem;
}

/* 余白の設定 */

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

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

    --white: #ffffff;
    --black: #0A0A0A;


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

    /* メインカラー背景色と文字色を設定 */
    --primary: #035697;
    --primary-text: #0A0A0A;
    --primary-background-hover: #0033FF;
    --primary-text-hover: #ffffff;

    /* サブカラー背景色と文字色を設定 */
    --secondary: #1984B3;
    --secondary-text: #0A0A0A;
    --secondary-hover: #1984B3;
    --secondary-text-hover: #0A0A0A;

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

/* カラー設定 */

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

:root {
    /* コンテンツ幅を設定 */
    --content-width: 124rem;
    --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: #035697;
    --button-text: #fff;
    --button-border-color: #fff;
    --button-border-radius: 4px;

    /* ボタン02（塗りつぶし） */
    --button-background02: linear-gradient(90deg, #1663E0 0%, #207DE8 50%, #3ABEF2 100%);
    --button-text02: #ffffff;
    --button-border-color02: #fff;
    --button-border-radius02: 4px;

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

/* ボタンホバー設定 */
:root {
    /* ボタン01 ホバー 反転 */
    --button-hover-background: #fff;
    --button-hover-text: #035697;
    --button-hover-border-color: #035697;

    /* ボタン02 ホバー */
    --button-hover-background02: linear-gradient(90deg, #3ABEF2 0%, #207DE8 50%, #1663E0 100%);
    --button-hover-text02: #ffffff;
}


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

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

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

/* -------------------------------------------------------------------------- */
/* Figma デザイントークン（追加） */
/* -------------------------------------------------------------------------- */
:root {
    --text-color-blue01: #1984b3;
    --text-color-blue02: #035697;
    --text-color-white: #ffffff;
    --background-white: #ffffff;
    --background-black: #0a0a0a;
    --background-primary: #035697;
    --background-primary-text: #01033e;
    --background-primary-hover: #0033ff;
    --background-primary-text-hover: #ffffff;
    --background-secondary: #1984b3;
    --background-secondary-text: #ffffff;
    --background-secondary-hover: #0a0a0a;
    --background-secondary-text-hover: #ffffff;
    --background-tertiary: #3abef2;
    --background-tertiary2: #207de8;
    --background-tertiary3: #e2f1ff;
    --background-tertiary-text: #ffffff;
    --background-tertiary-hover: #01033e;
    --background-tertiary-text-hover: #ffffff;

    --content-max: 192rem;
    --content-max-width: 182.4rem;

    --border-radius01-pc: 2.8rem;
    --border-radius01-sp: 1.6rem;
    --border-radius02-pc: 1.2rem;
    --border-radius02-sp: 0.8rem;
    --border-radius03-pc: 6rem;
    --border-radius03-sp: 4.8rem;
}