.preview-area{
    flex: 7;
    transform: rotate(-4deg);
    touch-action: manipulation;
}

.prev-screen-bez {
    width: 120%;
    aspect-ratio: 4/3;
    margin-left: 8%;
    margin-top: 25%;
    background-color: #1c1c1c;
    justify-items: center;
    align-content: center;
    border-radius: 20px;
}

/* preview.css */

.prev-screen {
    top: 2.5dvh;
    left: 1.5dvw;
    width: 93%;
    height: 90.5%;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 指定の left: -25% などではみ出す分をカット */
}

.question {
    position: relative;
    z-index: 10; /* 棚より手前に表示 */
    width: 70%;
    height: 33%;
    margin: 3%;
    border: 3px solid #000000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px;
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.game {
    /* test.js から動的に left, width, height, top が上書きされます */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
}

.prev-vege-img {
    position: absolute;
    height: auto;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

/* 野菜の相対位置（.game の中での位置） */
/* バスケット用 */
.v2-pos-0 { top: 10%; left: 0%; width: 50%; height: 58%} 
.v2-pos-1 { top: 10%; left: 50%; width: 50%; height: 58%}

/* 4分割棚用 (vegetable4.js の overlay 配置を参考) */
.v4-pos-2 { top: 5%; left: 0%; width: 50%; height: 50%}  /* トマト */
.v4-pos-3 { top: 5%; left: 50%; width: 50%; height: 50%}  /* じゃがいも */
.v4-pos-0 { top: 53%; left: 0%; width: 50%; height: 48%}  /* ピーマン */
.v4-pos-1 { top: 53%; left: 50%; width: 50%; height: 48%}  /* さつまいも */

.preview-memo-row {
    font-family: "BIZ UDGothic", sans-serif;
    color: black;
    font-size: 1.6dvw;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-right: 2%;
    letter-spacing: 0rem;
}

.kaimono-memo {
  font-size: 1.6dvw;
}