.wrap{
	overflow:scroll;
	position:relative;
	height:100%;
	white-space:nowrap;
}
.wrap::-webkit-scrollbar{
	display:none;
}
.wrap>*{
	display:inline-table;
	width:100%;
	margin:0;
}
.pre{
	position:relative;
}
.pre>i{
	position:absolute;
	z-index:100;
	top:calc(50% - 40px);
	left:0;
	color:white;
	font-size:80px;
	cursor:pointer;
}
.pre>i:hover{
	background:rgba(0, 0, 0, .5);
}
.pre>i:last-of-type{
	right:0;
	left:auto;
}
.nate{
	position:absolute;
	bottom:10px;
	left:0;
	width:100%;
	text-align:center;
}
.nate>i{
	display:inline-table;
	width:10px;
	height:10px;
	border-radius:50%;
	background:white;
	cursor:pointer;
}
.nate>i.now{
	background:black;
	pointer-events:none;
}
.nate>i~i{
	margin:0 0 0 10px;
}


2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Material iconsを利用する */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 推奨サイズ */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
 
  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;
 
  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;
 
  /* IEサポート */
  font-feature-settings: 'liga';
}