@charset "UTF-8";

@media screen and (max-width: 1685px) {
.slide{
	background-attachment: fixed;
	width:100%;
	position: relative;
	padding:150px 0;
}
#slide1{
	background-image:url('../images/ond01.png');
	background-size:100%;
	background-color:#0095CD;
	background-position:50% 435%;
	color:#ffffff;
	height:500px;
	padding:110px 0 410px 0;
}

#slide2{
	background-image:url('../images/ond02.png');
	background-position:0% 350%;
	height:450px;
	padding:80px 0 180px 0;
}

#slide3{
	background-image:url('../images/ond03.png');
	background-position:0% 210%;
	padding:20px 0 10px 0;
	height:380px;
}

#slide4{
	background-image:url('../images/ond04a.png');
	background-position:0% 360%;
	padding:20px 0 10px 0;
	height:360px;
}
}

/* Tablet */
@media screen and (max-width: 1024px) {
.menu {
	top:0px;
	padding:0px 0;
}
#logo {
	width: 100%;
	text-align: center;
}

#nav {
	width:100%;
	text-align:center;
	margin:0px 0;
}

.navigation{
	width: 100%;
	float: center;
	list-style: none;
	margin: 0;
	padding:0;
}


.navigation li{
	float: left;
	width:25%;
	padding:15px 0px 5px 0px;
}

.navigation li p{
	width:80%;
	margin-top:1px;
	font-size:0.7em;
	margin-left:20px;
	border-top: 1px solid #0095CD;padding-top:1px;
	}
	
#explain{
	padding:30px 0 90px 0;
	background-color:#fff;
	width:90%;
	margin: auto;
	}
	
 .text03{
	margin-left:10px;
	line-height:24px;
	width:95%;
 }
 
   .text04{
	 width:100%;
	 margin:auto;
 }
 
  .text04 .tele{
	 width:24%;
	background-size:14%;
	background-position:18% 0%;
	 }

.slide{
	background-attachment: fixed;
	width:100%;
	position: relative;
	padding:150px 0;
}
#slide1{
	background-image:url('../images/ond01.png');
	background-position:0% 550%;
	padding:60px 0 30px 0;
	height:600px;
}

#slide2{
	background-image:url('../images/ond02.png');
	background-position:0% 4450%;
	padding:0px 0 0px 0;
	height:350px;
}

#slide3{
	background-image:url('../images/ond03.png');
	background-position:0% 210%;
	padding:0px;
	height:380px;
}

#slide4{
	background-image:url('../images/ond04s.png');
	background-position:0% 900%;
	padding:230px 0 200px 0;
	height:120px;
}
#decorative {
	display:none;
}

#content {
	text-align:center;
	width:100%;
}

#lineup{
	margin:auto;
	padding:180px 0 120px 0;
	}


.ond875{
	background-image:url('../images/ondo-875.png');
	background-repeat:no-repeat;
	background-size:100%;
	height:90px;
	margin:20px auto;
	}
	
}

/* tablet  */
@media only screen and (max-width: 768px) {

 
.text04{
	 width:100%;
	 margin:auto;
 }
.text04 .tele{
	 width:26%;
	background-size:15%;
	 }
	 
	   .text05,.text06{
	width:85%;
	margin:15px auto;
 font-size:0.9em;
	text-align:center;
	line-height:24px;
 }
 
 #product{
	margin:auto;
	width:95%;
}

.producttwo{
	float:left;
	margin: 0 20px 20px 190px;
	text-align: center;
}

.slide{
	background-attachment: fixed;
	width:100%;
	position: relative;
	padding:150px 0;
}

#slide1{
	background-image:url('../images/ond01s.png');
	background-position:0% 650%;
	padding:20px 0 50px 0;
	height:800px;
}

#slide2{
	background-image:url('../images/ond02s.png');
	background-position:0% 4100%;
	padding:40px 0 50px 0;
	height:450px;
}

#slide3{
	background-image:url('../images/ond03s.png');
	background-position:0% 50%;
	padding:0px 0 120px 0;
	height:400px;
}

#slide4{
	background-image:url('../images/ond04s.png');
	background-position:0% 2350%;
	padding:80px 0 100px 0;
	height:550px;
}
 .text02{
	 margin:0px 0 20px 100px;
	font-size:0.85em;
	line-height:24px;
		 width: 44%;
 }

.botton01 a{
	 font-size:1.0em;
	 padding:20px 40px;
	 width: 18.5%;
 }
 
.botton01 a:hover{
 padding:20px 40px;}





.text01{
	background-size:100%;
	height:280px;
	font-size:0.8em;
	line-height:22px;
	padding:210px 0 0 0px;
 }
 
}

/* tablet  */
@media only screen and (max-width: 720px) {

#slide1{
	background-image:url('../images/ond01s.png');
	background-position:0% 650%;
	padding:20px 0 50px 0;
	height:800px;
}

#slide2{
	background-image:url('../images/ond02s.png');
	background-position:0% 4100%;
	padding:40px 0 50px 0;
	height:450px;
}

#slide3{
	background-image:url('../images/ond03s.png');
	background-position:0% 50%;
	padding:0px 0 120px 0;
	height:400px;
}

#slide4{
	background-image:url('../images/ond04s.png');
	background-position:0% 2350%;
	padding:80px 0 100px 0;
	height:550px;
}

}
/* mobile  */
@media screen and (max-width: 640px) {

#logo {
	text-align: center;
	margin: 10px 0 0px 0px;
	background-size:40%;
	height:50px;
}

#nav {
	width:100%;
	margin:0px;
}

.navigation{
	width: 100%;
	float: right;
	list-style: none;
	margin-left: -10px;
	padding:15px 0px 0px 0px;
}

.navigation li{
	float: left;
	padding:15px 0px 5px 0px;
	text-align:center;
	font-size:0.95em;
}
.navigation li p{
	width:80%;
	margin-top:1px;
	font-size:0.6em;
	margin-left:10px;
	border-top: 1px solid #0095CD;padding-top:1px;
	}

.slide{
	background-attachment: fixed;
	width:100%;
	position: relative;
	padding:5px 0px 30px 0px;
}


#slide1{
	background-position:0% 525%;
	padding:10px 0px 60px 0px;
	height:400px;
}

#slide2{
	background-position:0% 8525%;
	padding:0px 0px 30px 0px;
	height:260px;
}

#slide3{
	background-image:url('../images/ond03ss.png');
	background-position:0% 2550%;
	padding:40px 0 30px 0;
	height:230px;
}

#slide4{
	background-image:url('../images/ond04s.png');
	background-position:0% 2350%;
	padding:10px 0 10px 0;
	height:250px;
}

#explain{
	padding:30px 0 50px 0;
	background-color:#fff;
	width:80%;
	}
	
 .text03{
	margin-left:10px;
	line-height:24px;
	width:95%;
 }
 
  
.text04{
	 width:92%;
	 margin:auto;
 }
  .text04 .tele{
	 width:65%;
	background-size:16%;
	 }

 #product{
	margin:auto;
	width:85%;
}

#lineup{
	margin:auto;
	padding:180px 0 120px 0;
	}
	


.productd {
	float: right;
	display: block;
	margin: 0 0px 0px 0%;
	}
	
.productd img{
	width:90%;
	height:90%;
	}
	
.producttwo{
	margin:auto;
	float:left;
	margin: 0 0% 20px 3%;
	text-align: center;
}


	
.text06{
	width:90%;
	margin:15px auto;
 font-size:0.9em;
	text-align:center;
	line-height:28px;
 }
.ond875{
	background-size:90%;
	height:90px;
	margin:20px auto;
	padding:0 0 0 0px;
	}
	
.freecup{
  padding:0;
	width:270px;
  height:580px;
  background-color:#d5effc;
	margin:30px auto;
 font-size:0.8em;
 text-align:center;
	}
.freecup .cup{
	padding:10px;
	margin: 12% 5% 1% 3%;
	}
	
.freecup .ftext{
  padding: 10px 30px;
  height:370px;
	width:210px;
 text-align:center;
  background-color:#d5effc;
  line-height:14px;
	}

  .freecup span{
  line-height:36px;
 font-size:1.15em;
	}
 
   .freecup p{
  line-height:2px;
 font-size:1.20em;
	}
	
.productd {
	width: 49.5%;
	float: right;
	display: block;
	}

.producttwo h4{
	margin:20px 0 30px 0px;
	}
	
	
 .text02{
	 margin:0px 0 40px 10px;
	font-size:0.87em;
	line-height:24px;
		 width: 95%;
		 letter-spacing:-0.03em;
 }

.botton01 a{
	 margin:0px 0 0px 25px;
	 font-size:1.0em;
	 padding:20px 80px;
	 width: 90.5%;
 }
 
.botton01 a:hover{
 padding:20px 80px;}


}





/* mobile  360*/
@media screen and (max-width: 374px) {
#lineup{
	margin:auto;
	padding:220px 0 120px 0;
	}
 #product{
	margin:auto;
	width:95%;
}

.producttwo{
	float:left;
	margin: 0 20px 20px 10px;
	text-align: center;
}
.productd {
	width: 55.5%;
	padding:0px 60px 40px 20px;
	float: right;
	display: block;
	}
	
	
.ond875{
	background-size:100%;
	height:90px;
	margin:0px auto;
	width:95%;
	}



.botton01 a{
	 margin:0px 0 0px 20px;
 }
.botton01 a{
	 margin:0px 0 0px 35px;
	 font-size:1.0em;
	 padding:20px 30px;
	 width: 90.5%;
 }
 
.botton01 a:hover{
 padding:20px 30px;}
 
 .slide{
	padding:40px 0;
}

#slide1{
	background-position:0% 525%;
	padding:60px 0px 30px 0px;
	height:340px;
}

#slide2{
	background-position:0% 525%;
	padding:20px 0px 10px 0px;
	height:260px;
}

#slide3{
	background-position:0% 525%;
	padding:20px 0px 10px 0px;
	height:260px;
}

#slide4{
	background-position:0% 525%;
	height:300px;
}

  .text04 .tele{
	 width:75%;
	background-size:16%;
	 }

}