:root {
    --font-1: 'Shippori Mincho B1', serif;
    --font-2: 'Yuji Syuku', serif;
}

body::before {
    background-image: url('images/bg1.jpg');
}

.hero__content {
    align-items: flex-end;
}

/* 
.hero {
    background-image: url('images/bg1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
} */


/* メインビジュアル内のタイトルの文字サイズ */
.hero__title {
    font-size: 10vw;
}

/* =============================================
   ヘッダーの位置
   デフォルトは上右
   他の位置にする場合は下記から
   スマホで下部に表示させるには「レスポンシブ対応 (1000px以下のスクリーン)」に記載
============================================= */

/* 上・左 */
.header__inner {
    margin-bottom: auto;
    margin-left: 0;
    margin-right: auto;
}

/* 上・中央
.header__inner {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
} */

/* 下・中央
.header__inner {
    margin-top: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
} */

/* 下・左
.header__inner {
    margin-top: auto;
    margin-bottom: 0;
    marign-left: 0;
    margin-right: auto;
} */

/* 下・右
.header__inner {
    margin-top: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: 0;
} */


/* =============================================
   レスポンシブ対応 (1000px以下のスクリーン)
============================================= */
@media (max-width: 1000px) {}


/* =============================================
   レスポンシブ対応 (768px以下のスクリーン)
============================================= */
@media (max-width: 768px) {
    body::before {
        background-image: url('images/main-image__sp.jpg');
    }

    .hero__content {
        align-items: flex-start;
    }

    /* メインビジュアル内のタイトルの文字サイズ */
    .hero__title {
        font-size: 14vw;
    }
}