@charset "UTF-8";

/* --- 基本リセット --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 【重要】中身が少なくてもフッターを下に押し下げるための設定 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面の高さいっぱいを最低ラインにする */
}

img {
    max-width: 100%;
    height: auto;
}

/* --- ヘッダー領域 --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 100;
    color: #fff;

    /* ↓ここから背景画像の設定を追加・変更 */
    background-image: url("img/topback.png"); /* ここに画像の名前（パス）を入れる */
    background-size: cover;      /* 隙間ができないように画像を拡大縮小して敷き詰める */
    background-position: center; /* 画像の「ど真ん中」を基準に表示する */
    background-repeat: no-repeat;/* 画像の繰り返し表示を防ぐ */
}

/* ヘッダーの中の1200pxの箱 */
.header-inner {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    
    display: flex;
    align-items: center;     /* 上下中央 */
    justify-content: center; /* 左右中央 */
    text-align: center;      /* 文字も中央 */
}

/* --- メインコンテンツ領域 --- */
.site-main {
    margin-top: 200px; 
    width: 100%;
    flex: 1; /* 【重要】メインの箱を伸び縮みさせてフッターを下に追いやる */
}

/* メインコンテンツの中の1200pxの箱 */
.main-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center; /* メインの中身も中央揃え */
}

/* --- フッター領域 --- */
.site-footer {
    width: 100%;
    background-color: #555; /* 確認用の背景色 */
    color: #fff;
}

/* フッターの中の1200px・高さ300pxの箱 */
.footer-inner {
    max-width: 1200px;
    width: 100%;
    height: 300px;  /* 高さを300pxに固定 */
    margin: 0 auto; /* 箱自体を中央に配置 */
    padding: 0 20px;
    
    display: flex;
    align-items: center;     /* 上下中央 */
    justify-content: center; /* 左右中央 */
    text-align: center;      /* 中の文字も中央揃え */
}