@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
/* CSS Document */
		#banner{width: 100%;background: #ccc; display: block; position: relative; overflow-x: hidden; padding:0; margin: 0; box-sizing: border-box;}
		#banner > ul{min-width: 100%;display:flex; flex-direction: row; list-style: none; position:relative; flex-wrap: nowrap; top:0px; left:0px; padding:0; margin: 0; box-sizing: border-box; }
		#banner > ul > li{min-width: 100%; display: inline-block;position:relative;}
		/*#scroll{height:3000px;display:inline-block;width: 100%;}*/
		#banner > ul > li > a > .li_div{width: 100%;height:auto;display:block;position: relative;}
		
		#disc_area{display:inline-flex;position: absolute; bottom:2%;left:50%; flex-direction: row; transform: translate(-50%,-50%);z-index: 1;gap:15px}
		#disc_area .disc{width:20px;height:20px;display:inline-block;background:white; opacity:0.5; border-radius:50%;margin: 0px;cursor:pointer;}
		#disc_area .disc.hover{background: yellow;opacity: 1;}
		#disc_area .disc:hover{background: yellow;opacity: 1;}

        #banner > ul > li > a > .li_div > img.desk{display:block; width: 100%;}
		#banner > ul > li > a > .li_div > img.mobile{display:none; width: 100%;}
		
		#arrow_left{ 
			font-family: "Sawarabi";
			font-weight: 200;
			font-style: normal; 
			height: auto;
			display: inline-block; 
			transform: translateY(-50%);
			position: absolute;
			top:50%;
			z-index: 1;
			left:1%;
			font-size:5vw;
			line-height: 1;
			background:rgba(0,0,0,.5);
			padding:0px 10px;
			box-sizing: border-box;
			color:#fff;
			}

		#arrow_left:hover{
			color:yellow;
		}
		
		#arrow_right{
			font-family: "Sawarabi";
			font-weight: 200;
			display: inline-block; 
			transform: translateY(-50%);
			position: absolute;
			top:50%;
			z-index: 1;
			right:1%;
			font-size:5vw;
			background:rgba(0,0,0,.5);
			padding:0px 10px;
			color:#fff;
			}
		#arrow_right:hover{
			color:yellow;
		}
		
		@media screen and (max-width: 600px){
			#banner{width: 100%;background: #ccc; display: inline-block;position: relative;padding: 0;margin: 0;}
			#banner > ul > li > a > .li_div > img.desk{display:none; width: 100%;}
			#banner > ul > li > a > .li_div > img.mobile{display:block; width: 100%;}
			#disc_area .disc{width:15px; height:15px;}
		}