@charset "UTF-8";

html{
	width: 100%;
	height: 100%;
	background-color: #000;
	}

body{
	margin:0;
	width: 100%;
	height: auto;
	}

#contents{
	width: 100%;
	height: auto;
	line-height:1.4;
	background-color: #000;
	margin: 0;
	text-align: center;
	}

.device{
	width:320px;
	height:auto;
	margin: auto;
	margin-bottom: 15px;
	background:#000;
	position:relative;
	}
	
#coment{
	color: #ccc;
	width: 90%;
	margin: auto;
	margin-top: 15px;
	margin-bottom: 10px;
	text-align: left;
	font-size:13px;
	font-family:"Lucida Grande","segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",'メイリオ', Meiryo, Verdana, Arial, sans-serif;
	}
	
#coment span,h1{
	font-size: 1.3rem;
	display: block;
	margin-bottom: 5px;
	color: #a55;
	font-family: "ヒラギノ明朝 ProN W3",'Hiragino Mincho ProN',"HGS明朝B","ＭＳ Ｐ明朝",'MS PMincho',"ＭＳ 明朝",'MS Mincho',serif;
	}

#swiper-container-box{
	position: relative;
	width:320px;
	height:370px;
}
	
/*写真サイズの指定*/	
.swiper-container{
	width:320px;
	height:180px;
padding: 0;
	background-color: #000;
	margin: auto;
	}

.swiper-slide img{
	width: 100%;
	margin: auto;
	}


	
p{
	width: 90%;
	margin: auto;
	text-align: left;
	color: #646293;
	}
	
p.title{
	text-align: center;
	margin-bottom: 10px;
	}
	
.pagination{
	width:100%;
	margin: auto;
	}
	
.swiper-pagination-switch{
	display:inline-block;
	width:5px;
	height:5px;
	border-radius:5px;
	background:#666;
	box-shadow:0px 1px 2px #555 inset;
	margin:0 5px;
	cursor:pointer;
	}

.swiper-active-switch{
	background:#fff;
	}
	
.device .arrow-left{
	background-image: url(../img/yaji-l.png);
	background-repeat: no-repeat;
	background-size: 13px, auto;
	position:absolute;
	left:10px;
	top:50%;
	margin-top:-15px;
	width:15px;
	height:25px;
	cursor: pointer;
	}

.device .arrow-right{
	background-image: url(../img/yaji-r.png);
	background-repeat: no-repeat;
	background-size: 13px, auto;
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-15px;
	width:15px;
	height:25px;
	cursor: pointer;
	}
	
#small img{
	width: 50px;
	height: 45px;
	margin-bottom: 10px;
	}
	
@media only screen and (min-width: 360px) {
	.device{
		width:360px;
		height:auto;
		}
	
	#coment{
		width: 90%;
		}
	
	#swiper-container-box{
		position: relative;
		width:360px;
		}
	
	/*写真サイズの指定*/	
	.swiper-container{
		width:360px;
		height:203px;
		}
		
	.content-slide{
		width: 360px;
		height: 203px;
		}
}
	
@media only screen and (min-width: 480px) {
	.device{
		width:480px;
		height:auto;
		}
	
	#coment{
		width: 83%;
		}
	
	#swiper-container-box{
		position: relative;
		width:480px;
		}
	
	/*写真サイズの指定*/	
	.swiper-container{
		width:400px;
		height:225px;
		}
		
	.content-slide{
		width: 400px;
		height: 225px;
		}
}

@media only screen and (min-width: 600px) {
	.device{
		width:600px;
		height:auto;
		}
	
	#coment{
		margin-top: 30px;
		}
	
	#swiper-container-box{
		position: relative;
		width:600px;
	
		}
	
	/*写真サイズの指定*/	
	.swiper-container{
		width:500px;
		height:281px;
		margin: auto;
		}
		
	.content-slide{
		width: 500px;
		height: 281px;
		}
}

@media only screen and (min-width: 768px) {
	.device{
		width:768px;
		height:auto;
		}
	
	#coment{
		margin-top: 30px;
		}
	
	#swiper-container-box{
		position: relative;
		width:768px;
	
		}
	
	/*写真サイズの指定*/	
	.swiper-container{
		width:640px;
		height:360px;
		margin: auto;
		}
		
	.content-slide{
		width: 640px;
		height: 360px;
		}
		
	#small img{
	width: 80px;
	height: 75px;
	margin-bottom: 50px;
	margin-left: 10px;
	}
}