@charset "utf-8";
/* CSS Document */

.hs {
	margin-bottom:25px;
}
/*mainVisual START*/
section.viusalBox{
	margin: 50px 0px 0px;

}
section.snsBox{
	margin: 30px 0px 30px;
}

.cntr_content{
	padding:0px;
	margin:0px auto;

}

#listCnter{
	max-width: 500px; margin:15px auto;
}

.visal-row {
	padding: 0 15px;
}
.musBox{

	width: 100%;
	margin: 25px auto;

}

.owl-works .owl-carousel{
  position: relative;
}

.owl-works .owl-dots{
  position: absolute;
  bottom:10px;
  left:25%;
  right:25%;
}
.owl-works .item-text{
	position: absolute;
	bottom:0px;
	padding: 10px 25px;
	color: #fff;
	font-size: 1.0em;
	display:table;
	width:100%;
	margin:0 auto;
	
	
}
.owl-works .item-text p {
	margin:0px;
}
.owl-works .item-text .item-title{
	font-weight: 700;
	font-size: 2.3em;
}
.owl-works .item {
	text-align:center;
}
.owl-works .item img {
	max-width:150px;
	margin:0 auto !important;
}

/*mainVisual START*/


.owl-works .owl-nav .owl-prev{
    background: url('../image/prev_btn.png') no-repeat;
    height:20px; width:14px;
    left:0px;
    top: 45%;
    position: absolute;
}


.owl-works .owl-nav .owl-prev:hover{
    background: url('../image/prev_btn.png') no-repeat;
    height:20px; width:14px;
}

.owl-works .owl-nav .owl-next{
    background: url('../image/next_btn.png') no-repeat;
    height:20px; width:14px;
    right:0px;
    top: 45%;
    position: absolute;
}
.owl-list .item{

}
.owl-list .item img{
	margin:0 auto;
	max-height: 180px;
	width:auto;
}

.owl-works .owl-nav .owl-next:hover{
    background: url('../image/next_btn.png') no-repeat;
    height:20px; width:14px;
    right:0px;
}

.owl-list .owl-dots {
	
}

.owl-theme .owl-dots {
    
}
.owl-theme .owl-dots .owl-dot span {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      background: #D6D6D6;
      display: block;
      -webkit-backface-visibility: visible;
      transition: opacity 200ms ease;
      border-radius: 30px; 
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #869791; 
}



/* grid  style*/


.grid {
	margin: 0 auto;
	width: 902px;
	
	display: table;
}
.grid-item { width: 292px; overflow: hidden; margin: 4px; float: left}
.grid-item--width2 { width: 592px;  overflow: hidden; margin: 4px;}
.grid-cntr{margin-top:310px; display: table; position: absolute;}
.grid-item img{width:100%;}


.grid-item .grid-text{
	visibility: hidden;
}

.grid-item:hover .grid-text{
	visibility: visible;
	background-color: rgba(0,0,0, 0.4);
}

.grid-text {
	position: absolute;
	width:100%;
	height: 100%;
}

.grid-text p{
	position: absolute;
	color:#FFF;
	vertical-align: middle;
	padding:5px 10px;
	text-align: center;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-weight: 400;
	font-size: 18px;
}

.grid-text p .grid-title{
	font-weight: 800;
	font-size: 0.8em;
}
/* grid  style*/

#last-section{
	margin-top:80px;
	margin-bottom: 80px;
}
#listCnter .item p.title{
	margin-top:15px;
	text-align: center;
}



@media (max-width:598px) {


	.owl-works .item-text{
		position: absolute;
		/*top:0px;*/
		bottom:0px;
		padding: 5px 10px;
		font-size: 0.7em;
	}
	.owl-works .item-text .item-title{
		font-weight: 700;
		font-size: 2.3em;
	}



	.grid-item { width: 49%; }
	.grid-item--width2 { width: 99%; }
	.grid-cntr{margin-top:50%; position: relative;}
	.grid-cntr .grid-item{
		 width: 100%;
	}
	.grid{width: 100%;}



	.grid-text p{
		font-size: 12px;
	}

	#last-section{

		margin-top:15px;
		margin-bottom: 10px;
	}

	#listCnter{
		max-width: 350px; margin:15px auto;

	}

	.owl-works .item img {
		max-width:80px;
	}
}

@media all and (min-width: 540px) and (max-width: 766px) {

	.owl-works .item img {
		max-width:100px;
	}

	.owl-works .item-text{
		position: absolute;
		bottom:0px;
		padding: 5px 10px;
		font-size: 1.0em;
	}
	.owl-works .item-text .item-title{
		font-weight: 700;
		font-size: 2.3em;
	}


	.grid{max-width: 500px; min-width: 400px;}
	.grid-cntr{position: relative;}


	.grid-text p{
		font-size: 14px;
	}

}

@media all and (min-width: 766px) and (max-width: 950px) {

	.grid{max-width: 500px}
	.grid-cntr{margin-top:310px; position: relative;}

 
}

@media all and (min-width: 954px) and (max-width: 1200px) {

	
 
}