body::before {
    background-image: url('images/main-image.jpg');
}

/* --- 1. 普通の太さ (Regular) の定義 --- */
@font-face {
    font-family: 'KleeOne';
    /* 好きな名前をつけてOK */
    src: url('./fonts/KleeOne-Regular.ttf') format('truetype');
    font-weight: 400;
    /* Regularは通常400 */
    font-style: normal;
}

/* --- 2. 太字 (Bold) の定義 --- */
@font-face {
    font-family: 'KleeOne';
    /* 上と同じ名前にする！ */
    src: url('./fonts/KleeOne-SemiBold.ttf') format('truetype');
    font-weight: 700;
    /* Boldは通常700 */
    font-style: normal;
}

:root {
    --font-1: "KleeOne", cursive, 'ヒラギノ角ゴ ProN', 'Noto Sans JP';
    --font-2: "KleeOne", cursive, 'Noto Serif JP', serif;
}

/* メインタイトルの文字サイズ
.hero__title {
    font-size: 10vw;
} */

/* メインビジュアルを右寄せにする
.hero__content {
    align-items: flex-end;
} */

/* =============================================
   ヘッダーの位置
   デフォルトは左上
   他の位置にする場合は下記から
   スマホで下部に表示させるには「レスポンシブ対応 (1000px以下のスクリーン)」に記載
============================================= */

/* 上・中央
.header__inner {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
} */

/* 上・右
.header__inner {
    margin-bottom: auto;
    margin-left: auto;
} */

/* 下・中央
.header__inner {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
} */

/* 下・左
.header__inner {
    margin-top: auto;
} */

/* 下・右
.header__inner {
    margin-top: auto;
    margin-left: auto;
} */


/* =============================================
   レスポンシブ対応 (1000px以下のスクリーン)
=============================================
@media (max-width: 1000px) {} */


/* =============================================
   レスポンシブ対応 (768px以下のスクリーン)
============================================= */
@media (max-width: 768px) {
    body::before {
        background-image: url('images/main_sp.jpg');
    }

    /* メインビジュアルを右寄せにする
    .hero__content,
    .hero__info {
        align-items: flex-end;
    } */

    /* メインビジュアルをPCで右寄せ、かつスマホで左寄せにする場合
    .hero__content {
        align-items: flex-start;
    } */

    /* メインタイトルの文字サイズ
    .hero__title {
        font-size: 16vw;
    } */
}