html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* 1. ページ全体と背景画像の設定 */
body {
    margin: 0;
    padding: 0;
    /* 背景画像を設定する場合（画像は wwwroot/images/ などに配置） */
    background-image: url('../images/your-background.jpg');
    background-size: cover; /* 画面いっぱいに広げる */
    background-attachment: fixed; /* スクロールしても背景を固定する */
    background-color: #f0f0f0; /* 画像がない場合の予備の色 */
}

/* 2. 上部に固定されるメニューバー */
.custom-fixed-header {
    position: fixed; /* 位置を固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* ヘッダーの高さ */
    background-color: #333; /* メニューの背景色 */
    z-index: 1000; /* 他の要素より手前に表示させる */
    /* メニューの中身を中央寄せにするための設定 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. 横幅固定のコンテンツエリア */
.custom-main-container {
    width: 1024px; /* ここで横幅を固定 */
    margin: 0 auto; /* 左右の余白を「自動」にすることで画面の中央に配置 */
    background-color: white; /* コンテンツエリアの背景色（背景画像と区別するため） */
    min-height: 100vh; /* 最低でも画面の高さ分はエリアを確保 */
    /* 非常に重要：固定ヘッダーの下にコンテンツが隠れないように、上に余白を作る */
    padding-top: 80px; /* ヘッダーの高さ(60px) + 余白(20px) */

    padding-left: 20px; /* コンテンツの内側の余白 */
    padding-right: 20px;
    /* お好みで左右に影をつけるとコンテンツが浮き出て見やすくなります */
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}