/* bodyをFlexboxコンテナにして、フッターの重なりを解決 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面全体の高さを確保 */
}

/* 2分割画面の親コンテナ */
.teamselection {
    display: flex; /* 子要素（左右のボックス）を横並びにする */
    flex-grow: 1;  /* ★重要：この要素が利用可能な高さをすべて埋めるように伸びる */
}

/* 左右の分割エリア共通設定 */
.split {
    width: 50%; /* 幅を均等に50%ずつに分ける */
    position: relative; /* 必要に応じてテキストなどを重ねる場合に備える */
    transition: all 0.3s ease; /* マウスオーバー時のアニメーション */
}

/* 左右のボックス内のリンクと画像の設定 */
.split a {
    display: block;
    width: 100%;
    height: 100%;
}

.split img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がボックス全体を覆うように調整（アスペクト比は維持） */
}

.left-box{
    background-color: #ff8622;
}

.right-box{
    background-color: #0e59aa;
}

/* 左右分割エリアに、変化を滑らかにする transition を設定 */
.split {
    transition: filter 0.2s ease-in-out;
}

/* 親コンテナ(.teamselection)をホバーした時の設定 */
.teamselection:hover .split {
    filter: grayscale(100%); /* まず両方をモノクロにする */
}

/* ホバーしている要素自身のスタイル */
.teamselection .split:hover {
    filter: grayscale(0%); /* ホバーしている方だけモノクロを解除 */
}

/* ====== ここからレスポンシブ対応を追記 ====== */

/* 画面幅が768px以下の場合に適用（タブレットやスマホを想定） */
@media (max-width: 768px) {

    /* 親コンテナのflexの向きを縦に変更 */
    .teamselection {
        flex-direction: column;
    }

    /* 分割エリアの幅を100%に */
    .split {
        width: 100%;
        height: 50vh; /* 高さを画面の半分の高さに設定 */
    }
}