body {
    margin: 0;
    padding-top: 80px; /* ヘッダーの高さに合わせて調整 */
    padding-bottom: 60px; /* フッターの高さに合わせて調整 */
    font-family: 'PT Sans', sans-serif; /* 元のフォント指定 */
    /* その他のグローバルスタイル */
}

/* ヘッダーの固定 */
header.navbar-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    /* background-color: #fff;  この行は削除またはコメントアウト */
    z-index: 1000; /* 他の要素より手前に表示 */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 元のサイトのmainHeaderには別の影があったので、これも削除またはコメントアウト */
    
    /* 元のサイトの高さに近い値に戻すか、自動調整に任せる */
    /* height: 80px;  この行は削除またはコメントアウト */

    /* display: flex; は元のサイトでは使われていなかったので、削除またはコメントアウト */
    /* display: flex; */
    /* align-items: center; はdisplay:flexとセットなので、削除またはコメントアウト */
    /* align-items: center; */
}

/* フッターの固定 */
footer#footerWrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333; /* 背景色を設定 */
    color: #fff;
    text-align: center;
    padding: 20px 0;
    z-index: 1000;
    height: 60px; /* フッターの具体的な高さを指定 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* コンテンツ表示エリアのスタイル（必要に応じて） */
main#content-display-area {
    padding: 20px; /* コンテンツと固定バーの間に余白 */
    min-height: calc(100vh - 80px - 60px); /* ビューポートの高さからヘッダーとフッターの高さを引く */
    box-sizing: border-box; /* paddingをwidth/heightに含める */
    /* スライダーや各セクションのスタイルは、元のテーマのCSSを引き継ぐ形になります */
}

/* 元のテーマのCSS (bootstrap.min.css, layout.css, custom.cssなど) を読み込むことで、
   見た目は元のサイトに近づきますが、上記で書いた固定部分のスタイルは
   新しく定義したスタイルシートで上書きまたは追加してください。 */

/* ナビゲーションリンクのアクティブスタイル */
.nav-link.active {
    font-weight: bold;
    color: #007bff; /* アクティブなリンクの色 */
}

/* Bootstrapのブレイクポイントやレスポンシブ用の調整も必要に応じて追加 */
/* 例: ハンバーガーメニューの表示/非表示制御など */
@media (max-width: 991px) { /* Bootstrapのmdブレイクポイント付近を想定 */
    .navbar-collapse {
        /* モバイル時のメニュー表示スタイル */
        /* display: none; -> display: block; など、JavaScriptでトグルする */
        /* ハンバーガーアイコンの表示もここで制御 */
    }
}

/* ナビゲーションメニューの左右の余白を調整して中央に寄せる */
.nav.navbar-nav {
    float: none; /* Bootstrapのデフォルトでfloatがかかっている場合があるため解除 */
    margin: 0 auto; /* 中央揃えにする */
    display: table; /* または display: flex; justify-content: center; でも可 */
    /* text-align: center; /* メニュー項目（li）がインライン要素の場合に有効 */
}

/* メニュー項目（HOME, ABOUT USなど）の左右の余白を広げる */
.nav.navbar-nav > li {
    padding-left: 20px; /* 例: 左パディングを調整 */
    padding-right: 20px; /* 例: 右パディングを調整 */
    /* または、aタグのパディングを調整することもできます */
    /* &.nav.navbar-nav > li > a {
        padding-left: 25px;
        padding-right: 25px;
    } */
}