/* 全体のリセットや基本設定 (お好みで調整してください) */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0; /* 枠との境界が分かりやすいように背景色を付けています */
}

/* 白い背景の枠 */
.white-frame {
    background-color: #f1f1f1; /* 白色の背景 */
    border-radius: 0px; /* 角を少し丸く */
    padding: 0px; /* 枠内の余白 */
    display: flex; /* PC表示時はFlexboxで横並びにする */
    gap: 0px; /* 説明文と画像の間隔 */
    align-items: center; /* 縦方向の中央揃え (PC時) */
}

/* 説明文エリア */
.frame-content {
    flex-grow: 1; /* 残りのスペースを全て使う */
    /* flex-shrink: 1; */ /* 必要に応じて縮む */
    /* flex-basis: auto; */ /* または固定幅 */
}

.frame-content h2 {
    margin-top: 0;
    color: #333;
}

/* 画像エリア */
.frame-image {
    /* Flexboxの幅指定をせず、画像自体のマージンで寄せます */
    flex-shrink: 0; /* 必要に応じて画像エリアが縮まないように */
    flex-basis: 300px; 
     width: 350px;  /* 幅はコンテンツ(画像)に合わせる */
}

.frame-image img {
    display: block; /* 画像の下に不要な余白ができないように */
    max-width: 100%; /* 親要素の幅を超えないように */
    height: auto; /* アスペクト比を維持 */
    border-radius: 0px; /* 画像の角も少し丸く */

    margin-left: auto; /* 左側のマージンを自動で設定し、右に寄せる */
    margin-right: 0; /* 右側のマージンは0に */
    /* --------------------------------------------------------- */
}

/* モバイル表示用のメディアクエリ */
@media (max-width: 768px) { /* 画面幅が768px以下の場合は以下のスタイルを適用 */




    .white-frame {
        flex-direction: column; /* 要素を縦方向に並べる */
        gap: 15px; /* モバイル時の要素間の間隔 */
    }

    .frame-content {
        order: 2; /* 説明文を2番目に (画像の下) */
        flex: none; /* モバイル時はflexの指定を解除、または調整 */
        width: 100%; /* 幅をいっぱいに使う */
    }

    .frame-image {
        order: 1; /* 画像を1番目に (説明文の上) */
        flex: none; /* モバイル時はflexの指定を解除、または調整 */
        width: 100%; /* 幅をいっぱいに使う */
        text-align: center; /* モバイル時は画像エリア自体を中央寄せ (任意) */
    }

    .frame-image img {
        /* --- 修正箇所: モバイル表示時は画像を中央に --- */
        margin-left: auto;
        margin-right: auto;
        /* --------------------------------------------- */
    }
}





/* 共通のスタイル */
.ホバーで画像がピョンと変わる不思議箱,
.きらめく変身ボックス {
    width: 300px; /* 画像の幅を調整 */
    height: 200px; /* 画像の高さを調整 */
    position: relative; /* 子要素の絶対配置の基準にする */
    overflow: hidden; /* はみ出した部分を隠す */
    margin: 20px;
    display: inline-block; /* 複数並べる場合 */
}

.ホバーで画像がピョンと変わる不思議箱 img,
.きらめく変身ボックス img {
    position: absolute; /* 親要素（div）を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out; /* フェードイン・アウトのアニメーション */
}

/* ホバー時に表示される画像をデフォルトで非表示にする */
.ホバーで画像がピョンと変わる不思議箱 .ホバー時画像,
.きらめく変身ボックス .ホバー時画像 {
    opacity: 0; /* 最初は透明 */
}

/* 親要素にカーソルが当たった時の処理 */
.ホバーで画像がピョンと変わる不思議箱:hover .通常画像,
.きらめく変身ボックス:hover .通常画像 {
    opacity: 0; /* 通常画像を透明にする */
}

.ホバーで画像がピョンと変わる不思議箱:hover .ホバー時画像,
.きらめく変身ボックス:hover .ホバー時画像 {
    opacity: 1; /* ホバー時画像を不透明にする */
}