@charset "UTF-8";

html, body {
  width: 100%;
  overflow-x: hidden; /* 横スクロールを防ぐ */
}

.main {
  max-width: 100%; /* 横幅を画面サイズに収める */
}

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 必要に応じてカードが折り返す */
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto; /* 中央揃え */
}


.wrapper {
  flex: 1; /* コンテンツ部分が伸縮可能に */
  display: flex;
  flex-direction: column;
}

body {
    margin: 0;
    padding: 0;
    font-size: 17px;
    color: #2D4778;
    background: #EFE8CC;
}

.headerbar {
    background: #2D4778;
}

.main {
    width: auto;
    text-align: center;
}

.navbar {
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    border: none; /* 必要に応じてボーダーもリセット */
}

.nav-link {
    color: #EFE8CC;
    navbar-active-color: #EFE8CC;
}

.table {
    width: 50%;
    background: #EFE8CC;
    text-align: left;
    overflow-x: hidden; /* 横スクロールを防ぐ */
    opacity:1;/*itemAの不透明度を100％に指定*/
}



/* 通常状態 */
.navbar-nav .nav-link {
    color: #EFE8CC; /* 通常時の文字色 */
    transition: all 0.3s ease; /* スムーズな色変化 */
}

/* フォーカス時のスタイル */
.navbar-nav .nav-link:focus {
    color: #00bfff; /* フォーカス時の文字色 */
    outline: none; /* アウトラインを消す（必要なら） */
}

/* hover状態もフォーカスと合わせたい場合 */
.navbar-nav .nav-link:hover {
    color: #00bfff;
}

.text-image {
  position: relative;
  width: auto;
}

.text-image img {
  width: auto;
}

.text-image p {
  position: absolute;
  top: 80%;
  width: 100%;
  font-size: 50px;
  color: #2D4778;
  text-align: center;
}

.card {
    margin-top: 5px; /* カード間のスペース */
    margin-bottom: 5px; /* カード間のスペース */
}

.footer {
    color: #EFE8CC;
    text-align: center;
    background: #2D4778;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  /* ハンバーガーメニューアイコンの線を白に */
}


/* スマホ用CSS */
@media screen and (max-width: 450px) {
    body {
        width: auto;
        font-size: 13px;
    }


    .text-image > img {
        width: 80%;
        height: auto;
    }

    .text-image p {
        top: 70%;
        font-size: 28px;
    }

    .flex-container {
        display: flex; /* フレックスボックスを維持 */
        flex-direction: column; /* 縦方向に並べる */
        align-items: center; /* カードを中央寄せ */
    }

    .table {
        width: 100%;
    }

    .card {
        margin-top: 5px; /* カード間のスペース */
        margin-bottom: 5px; /* カード間のスペース */
    }

    .navbar {
        height: auto; /* 高さを自動調整 */
    }

    .navbar-brand img {
        width: 60px; /* ロゴ画像の幅を縮小 */
        height: 60px; /* ロゴ画像の高さを縮小 */
    }

    .navbar-toggler {
        padding: 5px; /* トグルボタンの余白を調整 */
    }

    .headertext {
        margin-top: 0; /* 余白を削除 */
        padding: 0; /* 必要であればパディングも削除 */
    }

    .navbar-nav .nav-link {
        padding: 5px; /* ナビゲーションリンクの上下余白を縮小 */
    }
}



}