body{
/*  background: url("../images/template/kari.png") no-repeat center top;*/
}

header{
/*  margin-bottom: 83px;*/
}

.fix_header_heigh_wrap{
/*  height: 256px;*/
}
/*============================================================================

	#mainvisual

============================================================================*/

#mainvisual{
	height:auto;
  padding: 0;
}

#mainvisual .inner{
	display:table;
	position:relative;
	width:100%;
  min-width: 1200px;
	margin: 0 auto;
	background-repeat:no-repeat;
  background: none;
}

#mainvisual::after{
  position: absolute;
  top: auto;
  bottom: 30px;
  width: 100%;
  height: 433px;
  background: #f4f1eb;
  content: "";
  z-index: -1;
  animation: slidein_img 0.6s 0.6s ease-in-out both;
}

.text{
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings : "palt";
  letter-spacing: 0.2em;
}

.text p{
  margin-bottom: 0;
}



/*============================================================================

	#animation

============================================================================*/

.mainvisual_slide_wrap{
  height: 635px;
  width: 71.5vw;
  margin-left: auto;
  position: relative;
  overflow: hidden;
}

.mainvisual_slide_wrap:after{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: fade_out 0.7s 1.6s ease-in-out both;
}

.mainvisual_slide{
  animation: slidein_img 0.6s 1.2s ease-in-out both;
}

.mainvisual_slide_cover{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: #bfa46d;
  animation: slidein 1.4s 1s ease-in-out both;
  z-index: 1;
}

.slidein_img{
  transform-origin:left bottom;
}

@keyframes slidein {
    0%{
        transform: translateX(-100%);
    }
  
  60% {
        transform: translateX(0);
    }

   
  100% {
        transform: translateX(100%);
    }
}

@keyframes slidein_img {
    from {
        transform:scaleX(0);
      transform-origin:left bottom;
    }

    to {
        transform:scaleX(1);
      transform-origin:left bottom;
    }

}

@keyframes fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes fade_out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


@media screen and (max-width:812px) {
/* スマホ */
#mainvisual {
	height: 370px;
}
#mainvisual::after {
    top: 75px;
    bottom: auto;
    width: 100%;
    height: calc(100% - 110px);
}
.mainvisual_slide_wrap {
    height: 280px;
    width: 85vw;
}
#mainvisual .inner {
    display: block;
    min-width: initial;
}




}