.theFlumphHabitat {
    display: grid;
    /* デフォルトでは1列（モバイル優先） */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px; /* ボタン間の余白 */
    padding: 20px;
    max-width: 1200px; /* コンテナの最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

.aShimmeringGlobule {
    display: flex; /* ボタン内のテキストを中央揃えにするため */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 15px 20px;
    background-color: #808080; /* 灰色 */
    color: #ffffff; /* 文字色を白に */
    text-decoration: none; /* 下線をなくす */
    border-radius: 5px; /* 角を丸くする */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    text-align: center; /* テキストが複数行になった場合の中央揃え */
    min-height: 50px; /* ボタンの最小高さを設定 */
}

.aShimmeringGlobule:hover {
    background-color: #696969; /* ホバー時の色を少し濃く */
}

/* PC表示（768px以上）の場合 */
@media (min-width: 768px) {
    .theFlumphHabitat {
        grid-template-columns: repeat(4, 1fr); /* 4列に設定 */
    }
}





.visualFrame { /* クラス名を変更しました */
    max-width: 960px;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
}

.visualFrame img { /* クラス名を変更しました */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スマホ (幅767pxまで) */
@media (max-width: 767px) {
    .visualFrame { /* クラス名を変更しました */
        padding-bottom: 20%; /* 16:9 のアスペクト比 */
    }
}

/* PC (幅768px以上) */
@media (min-width: 768px) {
    .visualFrame { /* クラス名を変更しました */
        padding-bottom: 15%; /* 4:3 のアスペクト比 */
    }
}



/* リンクボタンの基本的なスタイル（全デバイス共通） */
.link-button {
    display: inline-block;
    background-color: #000080; /* 青色 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* 下線なし */
    transition: background-color 0.3s ease, transform 0.1s ease;
    /* デフォルトのフォントサイズとパディングをPC向けに設定 */
    font-size: 22px; /* PCでのフォントサイズ */
    padding: 15px 80px; /* PCでのパディング */
}

/* マウスがリンクボタンに乗ったときのスタイル */
.link-button:hover {
    background-color: #0056b3;
}

/* リンクボタンがクリックされた瞬間のスタイル */
.link-button:active {
    background-color: #004085;
    transform: translateY(1px);
}

---

/* スマートフォン向けのスタイル (画面幅が767px以下の場合に適用) */
@media (max-width: 767px) {
    .link-button {
        font-size: 16px; /* スマホでのフォントサイズを少し小さくする */
        padding: 10px 20px; /* スマホでのパディングを調整 */
        /* 必要に応じて、スマホでブロック要素のように幅いっぱいに表示したい場合 */
        /* width: 100%; */
        /* text-align: center; */
    }
}

/* さらに小さなデバイス向けのスタイル (例: 画面幅が480px以下の場合) */
@media (max-width: 480px) {
    .link-button {
        font-size: 16px;
        padding: 8px 15px;
    }
}



/* ボタンを複数並べるためのラッパー（Flexboxコンテナ） */
.button-wrapper {
    max-width: 1700px; /* ★ラッパーの最大幅を、複数のボタンが並ぶサイズに調整 */
    min-width: 900px; /* ★ラッパーの最大幅を、複数のボタンが並ぶサイズに調整 */
    width: 100%;
    display: flex; /* ★Flexboxコンテナにする */
    flex-wrap: wrap; /* ★子要素（ボタン）が収まりきらない場合に折り返す */
    gap: 20px; /* ★子要素（ボタン）同士の間隔を空ける（横方向と縦方向の両方） */
    justify-content: center; /* ★子要素（ボタン）をラッパー内で中央寄せ */
    /* align-items: flex-start; /* 子要素を上端に揃える（不要なら削除またはcenterに） */
    /* margin: 0 auto; /* bodyがflexになったので不要かもですが、念のため残してもOK */
}


/* ここからボタン自体のスタイル */

/* custom-button スタイル（Flexアイテム） */
.custom-button {
    display: block; /* Flexアイテムとして問題なく機能 */
    text-decoration: none; /* 下線を消す */
    color: inherit; /* デフォルトの文字色を引き継ぐ（またはここで指定 #333 など） */
    border: none; /* 枠線なし */
    /* width: 100%; /* ★Flexアイテムとして振る舞うため、この100%指定は削除または調整 */
    flex-basis: 500px; /* ★Flexアイテムの初期サイズ指定（最小サイズのような働き） */
    max-width: 500px; /* ボタン自体の最大幅は維持 */
    /* margin: 0 auto; /* Flexアイテムではjustify/align/gapを使うため、不要 */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 12/6; /* アスペクト比は維持 */
}

/* ホバー時のスタイル */
.custom-button:hover {
    transform: translateY(-5px); /* 少し上に移動 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 影を濃くする */
}

/* ボタンの中身（背景画像とテキストコンテナ） */
.button-content {
    width: 100%; /* 親要素（custom-button）いっぱいに広がる */
    height: 100%; /* 親要素（custom-button）いっぱいに広がる */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;

    /* 背景画像 + 半透明のオーバーレイ色 */
    background:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), /* 半透明のオーバーレイ（黒 透明度 30%） */
        var(--button-bg-image); /* その下に背景画像 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* テキスト要素共通のスタイル - オーバーレイの上に表示されるようにz-indexを調整 */
.button-content > * {
     position: relative;
     z-index: 2;
}

/* タイトル */
.button-title {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 説明文 */
.button-description {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    overflow: hidden;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; */
}

/* レスポンシブ対応の調整（例：画面幅が狭い場合） */
/* ボタンのサイズ自体はFlexboxとaspect-ratioで調整されますが、
   フォントサイズやpaddingはメディアクエリで調整するとより自然になります */
@media (max-width: 600px) { /* 複数のボタンが並びきらなくなるブレークポイント */
    .button-wrapper {
    max-width: 420px; 
    min-width: 350px; 
        gap: 15px; /* 狭い画面では間隔を少し狭く */
    }

    .custom-button {
        flex-basis: calc(50% - 10px); /* 画面が狭くなったら横に2つ並ぶように（gap 20pxの半分を引く） */
        /* max-width: none; /* 2つ並ぶときはmax-widthを解除しても良い */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .button-content {
        padding: 8px;
    }

    .button-title {
        font-size: 1.2em;
    }

    .button-description {
        font-size: 0.8em;
    }
}

@media (max-width: 300px) { /* さらに狭くなり、1つしか並ばなくなるブレークポイント */
    .button-wrapper {
         gap: 10px;
    }
     .custom-button {
        flex-basis: 100%; /* 画面が狭くなったら横に1つだけ並ぶ */
        /* max-width: none; */
        border-radius: 5px;
     }
     .button-content {
         padding: 10px;
     }
}

/* さらに大きな画面での調整 */
@media (min-width: 800px) {
     .button-wrapper {
         gap: 20px; /* 広い画面では間隔を広く */
     }
     .custom-button {
         flex-basis: 200px; /* 広い画面では初期サイズをmax-widthと同じくらいにしても良い */
     }
}