@charset "utf-8";
/* スクロールインコンテンツ */
/* スライドフェードイン */
.sc01{
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
}
.mv01{
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
/* 3D回転＋ズームイン表示 */
.sc02{
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.mv02{
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}
/* 縮小・拡大表示 */
.sc03{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.mv03{
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
.sc04{
	opacity: 0;
	transform: translate(100px,0);
	-webkit-transform: translate(100px,0);
}
.mv04{
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
.sc05{
	opacity: 0;
	transform: translate(-100px,0);
	-webkit-transform: translate(-100px,0);
}
.mv05{
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}

.tc01 {
	background: -webkit-linear-gradient(left, #a79897 50%, transparent 50%) 100% 0% / 200% 100% no-repeat;
	background: linear-gradient(to right, #a79897 50%, transparent 50%) 100% 0% / 200% 100% no-repeat;
	transition: background-position 1s ease-out;
	-webkit-transition: background-position 1s ease-out;
}
.tc02 {
	background: -webkit-linear-gradient(left, #a79897 50%, transparent 50%) 100% 0% / 200% 70% no-repeat;
	background: linear-gradient(to right, #a79897 50%, transparent 50%) 100% 0% / 200% 70% no-repeat;
	transition: background-position 1.8s ease-out;
	-webkit-transition: background-position 1.8s ease-out;
}
.mv_start {
	background-position: 0% bottom;
}

.anitxt1,.anitxt1 span{
	opacity: 0;
}

/* ボタンアニメーション */
/* 横広がり */
.anibtn1,
.anibtn1::before,
.anibtn1::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.anibtn1 {
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  position: relative;
  z-index: 2;
  background:#ebeae2 url(../../images/lp/arrow.png) no-repeat 90% center;
  color: #fff;
  line-height: 40px;
}
.anibtn1:hover {
  background-color: #fafafa;
  color: #666;
}
.anibtn1::before,
.anibtn1::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  top: 0;
  width: 50%;
  height: 100%;

}
.anibtn1::before {
  right: 0;
}
.anibtn1::after {
  left: 0;
}
.anibtn1:hover::before,
.anibtn1:hover::after {
  width: 0;
  background-color: #ebeae2;
}


/* menu */
.menu1,
.menu1 span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu1 {
  position: relative;
  width: 30px;
  height: 24px;
}
.menu1 span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #917b79;
  border-radius: 0;
}
.menu1 span:nth-of-type(1) {
  top: 0;
}
.menu1 span:nth-of-type(2) {
  top: 10px;
}
.menu1 span:nth-of-type(3) {
  bottom: 0;
}
.menu1.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.menu1.active span:nth-of-type(2) {
  opacity: 0;
}
.menu1.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
@media screen and (max-width: 728px) {
.menu1 {
  position: relative;
  width: 30px;
  height: 20px;
}
.menu1 span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #917b79;
  border-radius: 0;
}
.menu1 span:nth-of-type(2) {
  top: 8px;
}
.menu1.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.menu1.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
.anibtn1 {

  line-height: 30px;
}
}