/* メイン */
.banner{
background-color: rgba(0,218,252,0.5);
width: 90vw;
padding: 30px 5%;
margin: 100px auto 20px auto;
color: #000;
}
.outline{
width: 60vw;
margin: 0 auto;
}
.leftSide{
 width: 100%;
}
.leftSide div{
 width: 100%;
 overflow: hidden;
 object-fit: contain;
}
.leftSide img{
width: 100%;
}
.cell{
width: 100%;
}
.graphic{
width: 80%;
margin: 20px auto;
}
.graphic img{
width: 100%;
}
.making{
 width: 60vw;
 display: grid;
 margin: 0 auto;
 grid-template-columns: repeat(3, 1fr);
 gap: 2vw 3vw;
}
.making div{
 width: 18vw;
 height: 13.5vw;
 overflow: hidden;
 object-fit: contain;}
.making div img{
 width: 100%;
}
.rightSide{
 width: 100%;
font-weight: bold;
text-align: center;
}
.rightSide div{
display: inline-block;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
}
.scrollFlex{
display: block;
}
@media only screen and (min-width:500px) and (max-width:960px){
.graphic{
width: 70%;
margin: 20px auto;
}}

@media only screen and (min-width:961px){
.graphic{
width: 60%;
margin: 20px auto;
}
.leftSide{
width: 63vw;
}
/* .leftSide div{
 width: 30vw;
 height: 22.5vw;
} */
.rightSide{
width: 22.5vw;
margin: 0 50px;
}
.scrollFlex{
display: flex;
}
}