@charset "utf-8";
/* =============================================================================
   pc
   ========================================================================== */

#mv {
    padding-bottom: 50px;
    position: relative;
}
.mv1 {
    background: url(../../img/home/pc/mv1.jpg) no-repeat center;
    background-size: cover;
}
.mv2 {
    background: url(../../img/home/pc/mv2.jpg) no-repeat center;
    background-size: cover;
}
.mv3 {
    background: url(../../img/home/pc/mv3.jpg) no-repeat center;
    background-size: cover;
}
.mv4 {
    background: url(../../img/home/pc/mv4.jpg) no-repeat center;
    background-size: cover;
}
.mv5 {
    background: url(../../img/home/pc/mv5.jpg) no-repeat center;
    background-size: cover;
}

.mvSlider li.slick-slide {
    padding: 150px 0 100px;
}
.mvSlider li .mvTxt {
	display: block;
    max-width: 640px;
    width: 64%;
    margin: 0 auto;
}

a.slick-arrow {
	margin-top: -24px;
	top: 50%;
	z-index: 10;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
a.slick-prev {
	position: absolute;
	left: 20px;
}
a.slick-next {
	position: absolute;
	right: 20px;
}

.slick-dots	{
    position: absolute;
    bottom: -45px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
    z-index: 10;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 23px;
    margin: 0 10px !important;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 19px;
    height: 23px;
    cursor: pointer;
    border: 0;
    outline: none;
    background: url(../../img/home/pc/ico_pager@2x.png) no-repeat center;
    background-size: 100%;
}
.slick-dots li button:hover,
.slick-dots li button:focus	{
    outline: none;
}
.slick-dots li.slick-active {
    animation: pyonpyon 1.5s ease 1;
}

#mv .mvOwner img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 1300px;
    width: 100%;
}

.mvSlider:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    max-width: 1300px;
    width: 100%;
    height: 615px;
    background: url(../../img/home/pc/mv_owner@2x.png) no-repeat center;
    background-size: 100%;
    z-index: 1;
    transform: translateY(19px);
}




#normal {
    padding: 50px 0;
}
	#normal .figure {
	    margin-top: 45px;
	}

#short {
    padding: 60px 0 50px;
    background: url(../../img/home/pc/bg_paints.png) no-repeat center;
    background-size: cover;
}
	#short .figure {
	    margin-top: 40px;
	}

#facebook {
    padding: 180px 0 80px;
    text-align: center;
    margin-top: -100px;
}

#about {
    padding: 40px 0;
    background-color: #e9dfc9;
    background-image: url(../../img/home/pc/bg_tree.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin: 30px 0;
}
#about:before {
    content: "";
    position: absolute;
    top: -30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 50px;
    background: url(../../img/home/pc/about_top.png) repeat-x top center;
    z-index: 1;
}
#about:after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -30px;
    margin: 0 auto;
    width: 100%;
    height: 50px;
    background: url(../../img/home/pc/about_bot.png) repeat-x bottom center;
    z-index: 1;
}
	#about .fl {
	    float: left;
	    max-width: 336px;
	    width: 33.6%;
	    margin-top: 4.5%;
	}
	#about .fr {
	    float: right;
	    max-width: 630px;
	    width: 63%;
	}
		#about .fr h3 {
		    margin-bottom: 30px;
		}
		#about .fr p {
		    font-size: 20px;
		    line-height: 56px;
		    background: url(../../img/home/pc/txt_line.png) repeat-y top center;
		    position: relative;
		}
		#about .fr p:before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 100%;
			height: 3px;
			background: #eadfc9;
		}
		#about .fr p:after {
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 100%;
			height: 3px;
			background: #eadfc9;
		}
		#about .fr .name {
			margin-top: 10px;
			text-align: right;
		}
	#about > a {
	    display: block;
	    max-width: 350px;
	    width: 35%;
	    margin: 40px auto 0;
	}




/* =============================================================================
   sp
   ========================================================================== */

@media screen and (max-width: 640px) {

	#mv {
	    padding-bottom: 35px;
	}
	.mv1 {
	    background: url(../../img/home/sp/mv1.jpg) no-repeat center;
	    background-size: cover;
	}
	.mv2 {
	    background: url(../../img/home/sp/mv2.jpg) no-repeat center;
	    background-size: cover;
	}
	.mv3 {
	    background: url(../../img/home/sp/mv3.jpg) no-repeat center;
	    background-size: cover;
	}
	.mv4 {
	    background: url(../../img/home/sp/mv4.jpg) no-repeat center;
	    background-size: cover;
	}
	.mv5 {
	    background: url(../../img/home/sp/mv5.jpg) no-repeat center;
	    background-size: cover;
	}
	.mvSlider:before {
	    display: none;
	}
	.mvSlider li.slick-slide {
	    padding: 0;
	}
	.mvSlider li .mvTxt {
	    width: 100%;
	}
	a.slick-arrow {
	    width: 30px;
	    margin-top: -15px;
	}
	a.slick-prev {
	    left: 10px;
	}
	a.slick-arrow {
	    right: 10px;
	}
	.slick-dots {
	    bottom: -35px;
	}
	.slick-dots li {
	    width: 15px;
	    height: 18px;
	}
	.slick-dots li button {
	    width: 15px;
	    height: 18px;
	}

	#about:before {
	    background: url(../../img/home/sp/about_top.png) repeat-x top center;
	    height: 35px;
	    top: -20px;
	}
	#about:after {
	    background: url(../../img/home/sp/about_bot.png) repeat-x bottom center;
	    height: 35px;
	    bottom: -20px;
	}
	#about .fr {
	    float: none;
	    max-width: 100%;
	    width: 100%;
	}
	#about .fl {
	    float: none;
	    max-width: 336px;
	    width: 60%;
	    margin: 20px auto 0;
	}
	#about .fr p {
	    font-size: 16px;
	    line-height: 50px;
	    background: url(../../img/home/sp/txt_line.png) repeat-y top center;
	}
	#about > a {
	    max-width: 450px;
	    width: 70.3125%;
	}

	#facebook {
	    padding: 150px 0 80px;
	    margin-top: -70px;
	}


}/*　ここまで max-width 640px　*/




/* =============================================================================
   animation
   ========================================================================== */
   
@keyframes pyonpyon {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-10px); }
  30%  { transform: translateY(0); }
  40%  { transform: translateY(-5px); }
  50%  { transform: translateY(0); }
  60%  { transform: translateY(-3px); }
  70%  { transform: translateY(0); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}