body {
       background-color: #f6cdf5;
       font-size: 32px;
       font-family: Arial, sans-serif;
       text-align: center;
       padding: 20px;
       word-wrap: break-word;
       overflow-wrap: break-word;
       max-width: 100%;


}






/* 縦画面のときにメッセージを表示 */
.rotate-message {
       display: none;
       /* 初期は非表示 */
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 20px;
       background: rgba(0, 0, 0, 0.7);
       color: white;
       padding: 20px;
       border-radius: 10px;
       z-index: 1000;
}





.mars-tour-link {
       position: relative;
       z-index: 1000;

}

button {
       padding: 10px 20px;
       font-size: 16px;
       cursor: pointer;
       position: fixed;
       left: 800px;
       top: 20px
}

#gazo {
       background-image: url(room.gif);
       background-position: left 0px;
       background-size: 100%;
       background-repeat: no-repeat;
       position: absolute;
       top: 300px;
       left: 0px;
       z-index: 1;

}

#sd {

       background-image: url(room.gif);
       background-position: left 0px;
       background-size: 100%;
       background-repeat: no-repeat;
       position: absolute;
       top: 300px;
       /* 垂直方向の中央 */
       left: 0px;
       /* 水平方向の中央 */
       z-index: 1;

}

#message {

       white-space: pre-wrap;
       word-break: break-word;
       /*じゃんけんぽい!*/
       font-size: 1em;
       left: 10px;
       top: 80px;
       background-color: #f6cdf5;
       font-size: 35px;
       margin: 20px 0;
       z-index: 1000;
       word-wrap: break-word;
       overflow-wrap: break-word;
       max-width: 100%;
       z-index: 1000;
}

.text {
       font-size: 16px;
       white-space: normal;
       /* テキストを折り返す */
       overflow-wrap: break-word;
       /* 長い単語を折り返す */
       max-width: 100%;
       /* 必要に応じて調整 */
       margin: 10px;
       /* マージンを設定 */
       padding: 10px;
       /* パディングを設定 */
       border: 0px solid #ccc;
       /* 枠線を設定 */
       border-radius: 5px;
       /* 枠線の角を丸くする */
       background-color: #f9f9f9;
       /* 背景色を設定 */
       text-align: left;
       /* テキストを左揃えにする */
}

.highlight {
       color: #f6cdf5;
       /* 色をオレンジに設定 */
}





.hearts {
       /*♡ハートの位置*/
       font-size: 50px;
       margin: 10px 0;
       position: absolute;
       left: 0px;
       top: 230px;
       opacity: 0.5;
       /* 透明度を調整（0 = 完全に透明、1 = 完全に不透明） */
}





#sd:active {
       transform: scale(1.02);
       /* クリック時に拡大 */
       transition: transform 0.2s ease-in-out;
}


form[name="slide"] {
       position: fixed;
       left: 50px;
       top: 320px;
       z-index: 1000;
}




.dress_button:active {
       transform: scale(1.1);
       /* クリック時に拡大 */
       transition: transform 0.2s ease-in-out;
}

.dress_button {

       position: fixed;
       left: 0px;
       top: 300px
}