body{
    font-family: serif;
    font-weight: 700;
    font-size: 11px;
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    padding: 35px 5px 5px 35px;
    margin: 30px;
    background-color: #fff;
}
.main{
    flex-grow: 1; /* 残りの高さをすべて埋める */
    display: grid;
    /* 4列のグリッドを定義。frは比率を表す単位 */
    grid-template-columns: 1fr 1fr ;
    gap: 20px;
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    padding: 25px 5px 5px 25px;
    background-color: #fff;
    
}

    

.works-back .image-box video{
    height: 60%;
    
}
.worksContainer{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    padding: 15px 2px 2px 15px;
    height: 100vh;
    background-color: #fff;
}
.middle{
    margin-top: 30px;
}
.right{
    display: grid;
    grid-template-rows: 1fr 1.5fr 0.5fr;
    margin-top: 30px;
}
.viewport{
    gap: 10px;
    box-sizing: border-box;
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    background-color: white;
    padding: 6px;
    gap: 20px;
    box-sizing: border-box;
    position: relative; /* 子要素を絶対位置で配置するための基準 */
    overflow-x: scroll;
    overflow-y: hidden;
}
.works{
    box-sizing: border-box;
    overflow-x: scroll;
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    background-color: white;
    padding: 6px;
    gap: 20px;
    margin-bottom: 20px;
}
.works-sclool{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:1fr;
    width: 300%;
    object-fit: contain;
    height: 100%;
    gap: 20px;
    
}
.st{
     grid-template-columns: 1fr 1fr 1fr 1fr;
     width: 400%;
}
.video-scrool{
    grid-template-columns: 1fr 1fr;
}
.image-box{
    display: flex;
    padding: 20px;
}
.image-box img {
     display: flex;
    padding: 20px;
    height: 100%;
    padding: 5px;
}
.image-box video {
     display: flex;
    padding: 20px;
    height: 100%;
}
.description, .description-full {
    display:grid;
    flex-direction: column;
    gap: 15px;/* 説明欄の幅を固定 */
    flex-shrink: 0;
}

.description-full {
    width: 100%;
}

.info-box {
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    padding: 8px;
    display: flex;
    text-align: left;
}

.image-box {
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    flex-grow: 1; /* 残りの幅をすべて埋める */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    overflow: hidden; /* 画像がはみ出ないように */
}

/* --- ここから追加・変更したスタイル --- */

/* viewport内に配置される作品のスタイル */
.view-works {
    /* ユーザー指定のスタイル */
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    background-color: white;
    padding: 10px;
    /* 位置とサイズ設定のためのスタイル */
    position: absolute; /* viewportを基準に絶対位置を指定 */
    box-sizing: border-box;
    width: 100%;
    
}

/* view-works内の画像と動画がコンテナにフィットするようにする */
.view-works img, .view-works video {
    width: 100%;
    height: 100%;
    display: block; /* 余白をなくす */
    object-fit: contain; /* アスペクト比を保ちながらコンテナに収める */
    padding: 0; /* 元のpaddingを上書き */
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;
    
}

/* --- ここまで --- */

.text-title {
    display: flex;
    flex-direction: column-reverse;
    align-items: end;
    text-align: right;
    font-family: Roboto,monospace;
    border-bottom: #e5e5e5 1.5px solid;
    border-top: #000 1.5px solid;
    border-right: #e5e5e5 1.5px solid;
    border-left: #000 0.8px solid;

}
.foot-right {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 20px;
    align-items: end;
}
.title{
    white-space: nowrap;
}

#clock-container {
    width: 300px;
    height: 40px;
    margin-left: auto;
    flex-shrink: 0;
}
.info-box a:hover{
    border-bottom: #e5e5e5 1px solid;
    border-top: #000 1px solid;
    border-right: #e5e5e5 1px solid;
    border-left: #000 1px solid;
    text-decoration: none;
    color: #fff;
}
.image-box img:hover{
    border-bottom: #e5e5e5 1px solid;
    border-top: #000 1px solid;
    border-right: #e5e5e5 1px solid;
    border-left: #000 1px solid;
}
.image-box video:hover{
    border-bottom: #e5e5e5 1px solid;
    border-top: #000 1px solid;
    border-right: #e5e5e5 1px solid;
    border-left: #000 1px solid;
}
    
@media screen and (max-width: 1200px) {
    .main{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 1000px) {
    .main{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 600px) {
    .works-sclool{
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 0.5fr;
    grid-template-rows:0.8fr;
    width: 300%;
    object-fit: contain;
    height: 100%;
    gap: 20px;
    
}
.info-box{
    white-space: nowrap;
}
.st{
     grid-template-columns: 1fr 1fr 1fr 1fr;
     width: 400%;
}
.main-back{
    display: flex;
    height: 100vh;
    overflow: scroll;
}
.video-scrool{
    grid-template-columns: 0.5fr 0.5fr;
}
body{
    margin: 10px;
}

.text-title{
    overflow-x: scroll
}
.foot-right{
    flex-direction: column-reverse;
}
marquee{
    margin-bottom: 20px;
}
}