body {
	background-color:#FCFFEE;		/*ページ全体の背景色*/
  max-width: 1000px; margin: auto;
}

.pagenation {
  height: 100vh;
}

.box-canvases {
  height: 550px;               /* canvasの表示する高さを指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-x: scroll;          /* 横方向にスクロール可能にする */
}

.canvases {
  display: flex;                /* 横並びにする */
}

canvas {
  border: 1px solid #000;      /* わかりやすくボーダーを引く,　なくて良い */
}

.titleLogo { /* タイトルロゴの大きさ設定 */
  width: 100%;
  max-width: 800px; 
  height:auto;
}

.mode {
  max-width:100%;
}

.selectVideo {
  width: 100%;
  max-width: 500px; 
  height:auto;
}


.buttonDiv { /* 画像ボタンを作る時のdiv設定(外枠をなくす) */
  width: auto;
  padding:0;
  margin:0;
  background:none;
  border:0;
  font-size:0;
  line-height:0;
  overflow:visible;
  cursor:pointer;
}

.buttonImage { /* スマホ版のボタン画像のサイズを指定する */
  max-width: 35vw;
}



/*  */

.canvases_List{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  scroll-behavior: smooth;
}

.tool_W{
  display: flex;
}

.move_button{
  display: flex;
}

.area {
  scroll-snap-align: center;
  width: 100vh;
  margin:0 20px;
}

.pagenation{
  padding:0 10px;
}

.centerBox{ /*  */
  position: relative;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.buttoncenter {
  position: absolute;
  width:100%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buttoncenter2 {
  position: absolute;
  width:100%;
  top: 87%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.bigbuttonImage { /* スマホ版のボタン画像のサイズを指定する */
  max-width: 40vw;
  min-width: 230px;
}