/*
 | ------------------------------------------
 | Glide styles
 | ------------------------------------------
 | Here are slider styles
 | 
*/


/*--- ■PC向け■ ---*/
@media screen and (min-width: 640px)
{
/*-- Index ---------------------------------------------------------*/
.slider {
	width: 100%;
	height: 310px;
	list-style:none;
	padding-left:0;
	position: relative;
	text-align:center;
	overflow: hidden;
	background: url(../img/loading.gif) no-repeat 50% 50%;
}
	
.slides {
	width: 100%;
	height: 250px;
	list-style:none;
	margin-left:0;
	padding-left:0;
	list-style:none outside;
	
	/**	
	 * Prevent blinking issue
	 * Not tested. Experimental.
	 */
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;

	/**
	 * Here is CSS transitions 
	 * responsible for slider animation in modern broswers
	 */
	-webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	   -moz-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		-ms-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		 -o-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.slide {
	position:relative;
	width: 100%;
	height: 100%;
	line-height: 0;
	padding: 0;
	margin: 0 0 60px 0;
	background-color: #ff8c00;
	list-style:none outside;
	float: left;
	clear: none;
	z-index: 1;
}
.slide:before {
	content:"";
	position:absolute;
	z-index: -1;
	width: 1px;
	padding: 0 308px;
	margin-left: -308px;
	top: 50%;
	left: 50%;
	bottom: 0;
	position:absolute;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.7);
	box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-border-radius:200px / 20px;
	border-radius:200px / 20px;
}

.slider-arrows {}

.slider-arrow {
	position: absolute;
	display: block;
	margin-bottom: 60px;
	text-decoration: none;
}
.slider-arrow--right {
	width: 32px;
	height: 250px;
	margin-left: 50%;
	left: 329px;
	background-image:url(../img/top_arrow_r.png);
	top: 0;
	z-index: 100;
}
.slider-arrow--left {
	width: 32px;
	height: 250px;
	margin-right: 50%;
	right: 329px;
	background-image:url(../img/top_arrow_l.png);
	top: 0;
	z-index: 100;
}

.slider-nav__item:hover { background: #b3b3b3; }
.slider-nav__item--current { background: #b3b3b3; }


/*-- Company ---------------------------------------------------------*/
#company .slider {
	width: 320px;
	height: 245px;
	top: 30px;
	right:50px;
	list-style:none;
	padding-left:0;
	position: absolute;
	text-align:center;
	overflow: hidden;
	float:right;
	z-index: 20;
}
	
#company .slides {
	width: 278px;
	height: 185px;
	list-style:none;
	margin-left:0;
	padding-left:0;
	list-style:none outside;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	   -moz-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		-ms-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		 -o-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

#company .slide {
	position: relative;
	width: 278px;
	height: auto;
	line-height: 0;
	padding: 0;
	margin: 0 0 60px 0;
	list-style:none outside;
	float: left;
	clear: none;
	z-index: 1;
	background: none;
}
#company .slide:before {
	content:"";
	position:absolute;
	z-index: -1;
	width: 1px;
	padding: 0 119px;
	margin-left: -119px;
	top: 50%;
	left: 50%;
	bottom: 0;
	position:absolute;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.7);
	box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-border-radius:119px / 20px;
	border-radius:119px / 20px;
}
#company .slide img {
	border:solid 1px #FFFFFF;
}

#company .slider-arrows {}

#company .slider-arrow {
	position: absolute;
	display: block;
	margin-bottom: 20px;
	text-decoration: none;
}

#company .slider-arrow--right {
	width: 21px;
	height: 185px;
	margin-left: 50%;
	left: 139px;
	background-image:url(../img/company_arrow_r.png);
	top: 0;
	z-index: 100;
}
#company .slider-arrow--left {
	width: 21px;
	height: 185px;
	margin-right: 50%;
	right: 139px;
	background-image:url(../img/company_arrow_l.png);
	top: 0;
	z-index: 100;
}

#company .slider-nav {
	position: absolute;
	bottom: 40px;
}

#company .slider-nav__item {
	width: 10px;
	height: 10px;
	float: left;
	clear: none;
	display: block;
	margin: 0 5px;
	border: none;
	border-radius:6px;
	background: #b3b3b3;
}

#company .slider-nav__item:hover { background: #fff; }
#company .slider-nav__item--current { background: #fff; }

}

/*--- ■スマートフォン向け■ ---*/
@media screen and (max-width: 640px)
{

/*-- Index ---------------------------------------------------------*/
.slider {
	width: 100%;
	height: auto;
	list-style:none;
	position: relative;
	text-align:center;
	overflow: hidden;
	background: url(../img/loading.gif) no-repeat 50% 50%;
}
	
.slides {
	width: 100%;
	height: auto;
	list-style:none;
	margin-left:0;
	padding-left:0;
	list-style:none outside;
	
	/**	
	 * Prevent blinking issue
	 * Not tested. Experimental.
	 */
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;

	/**
	 * Here is CSS transitions 
	 * responsible for slider animation in modern broswers
	 */
	-webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	   -moz-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		-ms-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		 -o-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.slide {
	position:relative;
	width: 100%;
	height: auto;
	line-height: 0;
	padding: 0;
	margin: 0 0 30px 0;
	list-style:none outside;
	float: left;
	clear: none;
	z-index: 1;
}
.slide:before {
	content:"";
	position:absolute;
	z-index: -1;
	width: 2%;
	padding: 0 49%;
	margin-left: -49%;
	top: 49%;
	left: 49%;
	bottom: 0;
	position:absolute;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.7);
	box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-border-radius: 49% / 20px;
	border-radius: 49% / 20px;
}
.slide img{
	width: 100%;
	height: auto;
}
.slider-arrows {
	display:none;
}

.slider-nav {
	position: absolute;
	bottom: 10px;
}

.slider-nav__item {
	width: 8px;
	height: 8px;
	float: left;
	clear: none;
	display: block;
	margin: 0 5px;
	border: solid 1px #b3b3b3;
	border-radius:6px;
	background: #ffffff;
}

.slider-nav__item:hover { background: #b3b3b3; }
.slider-nav__item--current { background: #b3b3b3; }


/*-- Company ---------------------------------------------------------*/
#company .slider {
	width: 80%;
	max-width: 278px;
	height: auto;
	margin: 0 auto;
	top: 0;
	padding: 20px 0;
	list-style:none;
	position: relative;
	text-align:center;
	overflow: hidden;
	z-index: 15;
}
	
#company .slides {
	width: 100%;
	height: auto;
	list-style:none;
	list-style:none outside;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
	   -moz-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		-ms-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		 -o-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

#company .slide {
	position: relative;
	width: 100%;
	max-width: 278px;
	height: auto;
	line-height: 0;
	padding: 0;
	margin: 0 0 30px 0;
	list-style:none outside;
	float: left;
	clear: none;
	z-index: 1;
	background: none;
}
#company .slide:before {
	content:"";
	position:absolute;
	z-index: -1;
	width: 2%;
	padding: 0 49%;
	margin-left: -49%;
	top: 49%;
	left: 49%;
	bottom: 0;
	position:absolute;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.7);
	box-shadow:0 0 30px rgba(0,0,0,0.7);
	-moz-border-radius: 49% / 20px;
	border-radius: 49% / 20px;
}
#company .slide img {
	max-width: 278px;
	border: none;
}

#company .slider-arrows {
	display:none;
}

#company .slider-nav {
	position: absolute;
	bottom: 10px;
}

#company .slider-nav__item {
	width: 10px;
	height: 10px;
	float: left;
	clear: none;
	display: block;
	margin: 0 5px;
	border: none;
	border-radius:6px;
	background: #b3b3b3;
}

#company .slider-nav__item:hover { background: #fff; }
#company .slider-nav__item--current { background: #fff; }

}