@charset "utf-8";

#voices-top {
}
#voices-top .caption-area{
	margin-bottom: 5px;
	line-height: 1.5em;
}
#voices-top .title-area {
    margin: 0 0 0 0;
}
#voices-top .title-area p{
	display: inline-block;
	vertical-align: middle
}
#voices-top .leed_ttl {
    background: url(../img/n_voice_title.png) left center no-repeat;
    font-size:30px;
    font-weight: bold;
    margin: 0 30px 0 0;
    padding:20px 0 20px 110px;
}
#voices-top .more {
	text-align: right;
	line-height: 20px;
}
#voices-top .more a {
	display: block;
	border-radius: 5px;
	font-size:18px;
	padding:10px 30px 10px 20px;
	background:url(../img/n_voice_arrow.png) 90% center no-repeat;
	background-color:#e8e4db;
	font-weight: bold;
}
#voices-top .more a:hover {
	opacity: 0.8;
}
#voices-top br.sp{
	display: none;
}
/*for the cubes*/
#voices-top p.lead{
	margin:15px 0;
}
#voices-top #panels {
	width: 1164px;
}
#voices-top #panel-l, #voices-top #panel-r {
	width: 577px;
	float: left;
}

#voices-top #panel-r {
	margin-left: 10px;
}
#voices-top .jkcubeslideshow{
	background: #fff;
	display: block;
	float: left;
	width: 187px;
	height: 187px;
	box-sizing: border-box;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	margin-bottom: 8px;
	vertical-align: middle;
}

#voices-top #cubeshow1, #voices-top #cubeshow4 {
	width: 382px;
	height: 382px;
	margin-right: 8px;
}

#voices-top .jkcubeslideshow div.side1, #voices-top .jkcubeslideshow div.side2 {
	width: 100%;
	position: absolute;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	backface-visibility: hidden;
	transition: all 1s ease-in-out;
	top: 0;
	border: 1px solid #ccc;
	vertical-align: middle;
	min-height: 187px;
	overflow: hidden;
	height: 187px;
}

#voices-top #cubeshow1 div.side1, #voices-top #cubeshow1 div.side2, #voices-top #cubeshow4 div.side1, #voices-top #cubeshow4 div.side2 {
	height: 382px;
}

#voices-top div.side1 img, #voices-top div.side2 img {
	width: auto;
	height: 100%;
	position: relative;
}

#voices-top div.side1 img[class^="size-"], #voices-top div.side2 img[class^="size-"]{
	width: 100%;
	height: auto;
}


#voices-top .jkcubeslideshow div[class^="side"] span {
	-webkit-background-size: 100%;
	background-size: 100%;
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	right: 4px;
	bottom: 4px;
}

#voices-top .jkcubeslideshow span.instagram {
	background-image: url(//s3.amazonaws.com/static.shuttlerock.com/images/social-user-icons/instagram.png);
}
#voices-top .jkcubeslideshow span.twitter {
	background-image: url(//s3.amazonaws.com/static.shuttlerock.com/images/social-user-icons/twitter.png);
	border-radius: 50%;
}



#voices-top div.jkcubeslideshowsp{
	background: white;
	display: block;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	margin-left: 2%;
}

#voices-top #cubeshowsp1{
	margin-left: 0%;
}

#voices-top .jkcubeslideshowsp div.side1, #voices-top .jkcubeslideshowsp div.side2 {
	width: 100%;
	position: absolute;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	backface-visibility: hidden;
	transition: all 1s ease-in-out;
	top: 0;
	height: 100%;

}

#voices-top .jkcubeslideshowsp div.side1 img, #voices-top .jkcubeslideshowsp div.side2 img {
	width: auto;
	height: 100%;
	position: relative;
}
#voices-top .jkcubeslideshowsp div.side1 img[class^="size-"], #voices-top .jkcubeslideshowsp div.side2 img[class^="size-"]{
	width: 100%;
	height: auto;
}

#voices-top .jkcubeslideshowsp div[class^="side"] span {
	-webkit-background-size: 100%;
	background-size: 100%;
	display: block;
	width: 11.594203%;
	padding-top: 11.594203%;
	position: absolute;
	right: 3%;
	bottom: 3%;
	height: auto;
}

#voices-top .sp{
	/*margin-left: 2%;*/
}

#voices-top .jkcubeslideshowsp span.instagram {
	background-image: url(//s3.amazonaws.com/static.shuttlerock.com/images/social-user-icons/instagram.png);
}
#voices-top .jkcubeslideshowsp span.twitter {
	background-image: url(//s3.amazonaws.com/static.shuttlerock.com/images/social-user-icons/twitter.png);
	border-radius: 50%;
}


/* add */


@media screen and (min-width:768px){
	#voices-top .sp{
		height:1px;
		overflow: hidden;
	}
}

/*@media screen and (min-width:768px) and ( max-width:960px) {
	#voices-top {
		width: 960px;
	}

	#voices-top #panels {
		width: 960px;
	}
	#voices-top #panel-l, #voices-top #panel-r {
		width: 475px;
		float: left;
	}

	#voices-top #panel-r {
	}

	#voices-top .jkcubeslideshow{
		width: 153px;
		height: 153px;
	}

	#voices-top #cubeshow1, #voices-top #cubeshow4 {
		width: 314px;
		height: 314px;
	}

	#voices-top div.side1, #voices-top div.side2 {
		min-height: 153px;
		height: 153px;
	}

	#voices-top .jkcubeslideshow div.side1, #voices-top .jkcubeslideshow div.side2 {
		min-height: 153px;
		height: 153px;
	}

	#voices-top #cubeshow1 div.side1, #voices-top #cubeshow1 div.side2, #voices-top #cubeshow4 div.side1, #voices-top #cubeshow4 div.side2 {
		height: 314px;
	}
}*/

@media screen and (max-width:767px){
	#voices-top {
		width: 100%;
	}
	#voices-top #panels {
		width: 100%;
	}

	#voices-top .pc{
		height:0px;
		overflow: hidden;
	}
	#voices-top .leed_ttl {
	    background: url(../img/n_voice_title.png) left center no-repeat;
	    background-size:20%;
	    font-size:40px;
	    font-weight: bold;
	    margin: 0 3px 0 0;
	    padding:20px 0 20px 17%;
	    letter-spacing: -0.05em;
	}
	#voices-top .more {
		text-align: right;
		line-height: 20px;
	}
	#voices-top .more a {
		display: block;
		border-radius: 5px;
		font-size:4.7vw!important;
		padding:0.7em 1.2em 0.7em 0.5em;
		background:url(../img/n_voice_sp_arrow.png) 90% center no-repeat;
		background-size:15%;
		background-color:#e8e4db;
	}
	#voices-top br.sp{
		display: block;
	}
}
@media screen and (max-width: 670px) { 
	#voices-top .leed_ttl { font-size: 38px; }
	#voices-top .more a  { font-size: 34px; }
	p.lead { font-size: 24px; }
}
	
@media screen and (max-width: 620px) { 
	#voices-top .leed_ttl { font-size: 35px; }
	#voices-top .more a  { font-size: 31px; }
	p.lead { font-size: 22px; }	
}
	
@media screen and (max-width: 580px) { 
	#voices-top .leed_ttl { font-size: 33px; }	
	#voices-top .more a  { font-size: 29px; }	
	p.lead { font-size: 20px; }
}
	
@media screen and (max-width: 550px) { 
	#voices-top .leed_ttl{ font-size: 31px; }	
	#voices-top .more a  { font-size: 27px; }			
	p.lead { font-size: 19px; }
}
	
@media screen and (max-width: 510px) { 
	#voices-top .leed_ttl { font-size: 29px; }
	#voices-top .more a  { font-size: 25px; }
	p.lead { font-size: 18px; }		
}
	
@media screen and (max-width: 480px) { 
	#voices-top .leed_ttl { font-size: 27px; }	
	#voices-top .more a  { font-size: 23px; }	
	p.lead { font-size: 17px; }	
}
	
@media screen and (max-width: 440px) { 
	#voices-top .leed_ttl{ font-size: 25px; }
	#voices-top .more a  { font-size: 21px; }
	p.lead { font-size: 16px; }		
}
	
@media screen and (max-width: 410px) { 
	#voices-top .leed_ttl { font-size: 23px; }
	#voices-top .more a  { font-size: 19px; }
	p.lead { font-size: 15px; }
}
	
@media screen and (max-width: 380px) { 
	#voices-top .leed_ttl { font-size: 21px; }
	#voices-top .more a  { font-size: 17px; }
	p.lead { font-size: 14px; }	
}
	
@media screen and (max-width: 350px) { 
	#voices-top .leed_ttl { font-size: 19px; }
	#voices-top .more a  { font-size: 15px; }
	p.lead { font-size: 13px; }	
}