/*---------------------------------------
 * 共通設定
---------------------------------------*/ 

body{
	height: 100%;
}



/* slick関係
---------------------------------------*/ 

.slick-prev{
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	left: 10px;
	display: block;
	width: 42px;
	height: 42px;
	padding: 0;
	margin-top: -21px;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	background-image: url(../img/arrow_prev.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 1;
}

.slick-next{
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	right:10px;
	display: block;
	width: 42px;
	height: 42px;
	padding: 0;
	margin-top: -21px;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	background-image: url(../img/arrow_next.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 1;
}

@media screen and (max-width: 800px) {
	.slick-next,
	.slick-prev{
		width: 24px;
		height: 24px;
		margin-top: -12px;
	}
	
}

.slick-dots{
	margin-top: 30px;
	text-align: center;
}


.slick-dots li button{
	font-size: 0;
	line-height: 0;
	display: block;
	width: 40px;
	height: 2px;
	padding: 0px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}

.slick-dots li{
	position: relative;
	display: inline-block;
	width: 40px;
	height: 2px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}

.slick-dots li button:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 2px;
	content: '';
	
	text-align: center;
	opacity: 1;
	background: #CCCCCC;
	-webkit-font-smoothing: antialiased;
	border-radius: 7px;
}

.slick-dots li.slick-active button:before{
	background: #666666;
}




/* ローディング
---------------------------------------*/ 

.loading{
	position: absolute;
	top:0px;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	z-index: 100;
	height: 20px;
	width: 110px;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #EA6DA4;
  font-size: 10px;
  margin: -20px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}




/* 画像hoverエフェクト PCのみ
---------------------------------------*/ 	


/* ZOOM */
	
.img_hover{
	width: 100%;
	height: auto;
	overflow: hidden;
	display: block;
}

.img_hover img,
.img_hover .imgs{
	transition-duration: .8s;
	
}

.img_hover img.on,
.img_hover .imgs.on{
	transform: scale(1.02);
	transition-duration: .8s;	
}

.img_hover img:hover,
.img_hover .imgs:hover{
	transform: scale(1.02);
	transition-duration: .8s;	
}


/* SHADOW */

.img_shadow{
	width: 100%;
	height: auto;
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


.img_shadow:hover {
  	box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}



@media screen and (min-width: 769px) {

	
	/*---------------------------------------
	 * フッター
	---------------------------------------*/ 

	footer{
		width: 100%;
		background: #FFFFFF;
		padding: 40px 0;
	}
	footer .footer-logo{
		width: 255px;
		margin: 0 auto 20px;
	}
	footer small{
		display: block;
		text-align: center;
		font-size: 11px;
	}
	
	
}



@media screen and (max-width: 768px) {
	
	
/*---------------------------------------
 * ナビゲーション
---------------------------------------*/ 


/* メニューボタン
---------------------------------------*/ 

	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  width: 34px;
	  height: 14px;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background: #333333;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 6px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(6px) rotate(-45deg);
	  transform: translateY(6px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-6px) rotate(45deg);
	  transform: translateY(-6px) rotate(45deg);
	}
	
	
	

	/*---------------------------------------
	 * フッター
	---------------------------------------*/ 

	footer{
		width: 100%;
		background: #FFFFFF;
		padding: 30px 0;
	}
	footer .footer-logo{
		width: 120px;
		margin: 0 auto 20px;
	}
	footer small{
		display: block;
		text-align: center;
		font-size: 11px;
	}
	
	
}