@charset "utf-8";
body{
  width:100%;
  margin:0 auto;
}
.anime0{
  opacity: 0;
}
/* safari */
_::-webkit-full-page-media, _:future, :root .anime0 {
  opacity: 1;
}

.main_slider .first{
  background: url(../img/slides/slide01_bg.jpg) no-repeat center top;
  height:650px;
}
.main_slider .first .contentBox p {
    position: absolute;
    left: 27px;
    top: 460px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-align: left;

}
.main_slider .second{
  background: url(../img/slides/slide02_bg.jpg) no-repeat center top;
  height:650px;
}
.main_slider .second img{
  margin: 100px 0 0 0;
}
.main_slider .contentBox{
  max-width:1202px;
  width:100%;
  margin: 0 auto;
  text-align: center;
}
.main_slider .first .contentBox{
  position: relative;
  overflow-x: hidden;
  height:650px;
}
.main_slider .first .contentBox .image img{
  position: absolute;
  left:50%;
  margin: 20px 0 0 -601px;
}
.main_slider .second .contentBox .image img{
  max-width:100%;
}
.main_slider{
  height: 650px;
  overflow: hidden;
}

.main_slider figure.slide02 img{
    height: auto;
    width: 100%;
}
.bg{
  position: absolute;
  top:290px;
  left:0;
  width:100%;
  padding: 0 0 0 0;
  z-index: 100;
  opacity: 0.85;
}
.bg em{
  font-family: 'Roboto bold', sans-serif;
  font-weight: 700;
  font-size: 130px;
  color: #fff;
    position: absolute;
  -webkit-transition: all 1.5s ;
     -moz-transition: all 1.5s ;
      -ms-transition: all 1.5s ;
       -o-transition: all 1.5s ;
          transition: all 1.5s ;

}

.bg em.hidden{
  display: none;
}
.main_slider .second .contentBox p {
    text-align: left;
    color: #fff;
    width: 570px;
    margin: 0 auto;
    line-height: 1.8;
    margin: 30px auto 0;
}
/*****初期位置******/
.bg em.anime1{
  left:20px;
  opacity: 0;
}
.bg em.anime2{
  left:108px;
  opacity: 0;
}
.bg em.anime3{
  left:186px;
  opacity: 0;
}
.bg em.anime4{
  left:335px;
  opacity: 0;
}
.bg em.anime5{
  left:662px;
  opacity: 0;
}
.bg em.anime6{
  left:741px;
  opacity: 0;
}
.bg em.anime7{
  left:853px;
  opacity: 0;
}
.bg em.anime8{
  left:380px;
}
.bg em.anime8.active{
  display: block;
}

/* safari */
_::-webkit-full-page-media, _:future, :root .bg em.anime1,
_::-webkit-full-page-media, _:future, :root .bg em.anime2,
_::-webkit-full-page-media, _:future, :root .bg em.anime3,
_::-webkit-full-page-media, _:future, :root .bg em.anime4,
_::-webkit-full-page-media, _:future, :root .bg em.anime5,
_::-webkit-full-page-media, _:future, :root .bg em.anime6,
_::-webkit-full-page-media, _:future, :root .bg em.anime7 {
  opacity: 1;
}

/*****文字色変更******/

.bg em.anime1.colorschange,
.bg em.anime3.colorschange,
.bg em.anime6.colorschange{
  color: #fff;
}
/*****文字フェードイン******/
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1;}
}
.anime0.fadein,
.bg em.anime1.fadein,
.bg em.anime2.fadein,
.bg em.anime3.fadein,
.bg em.anime4.fadein,
.bg em.anime5.fadein,
.bg em.anime6.fadein,
.bg em.anime7.fadein{
  opacity: 1;
  animation: fadein 1s ;
  -webkit-animation: fadein 1s ;
}

/* safari */
_::-webkit-full-page-media, _:future, :root .anime0.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime1.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime2.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime3.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime4.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime5.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime6.fadein,
_::-webkit-full-page-media, _:future, :root .bg em.anime7.fadein{
  opacity: 1;
  animation: none;
  -webkit-animation: none;
}


/*****不要文字フェードアウト******/

.bg em.anime2.fadeout,
.bg em.anime4.fadeout,
.bg em.anime5.fadeout,
.bg em.anime7.fadeout{
  opacity: 0;
}

/* safari */
_::-webkit-full-page-media, _:future, :root .bg em.anime2.fadeout,
_::-webkit-full-page-media, _:future, :root .bg em.anime4.fadeout,
_::-webkit-full-page-media, _:future, :root .bg em.anime5.fadeout,
_::-webkit-full-page-media, _:future, :root .bg em.anime7.fadeout{
  opacity: 0;
}

/*****Smile位置制御******/
.bg em.anime1.move{
  left:20px;
}
.bg em.anime3.move{
  left:100px;
}
.bg em.anime6.move{
  left:247px;
}
/*****Smile文字色再変更*****
.bg em.anime1,
.bg em.anime3,
.bg em.anime6{
    position: relative;
    width: 200px;
    height: 60px;
    text-align: center;
    color: #fff;
}*/

.bg em.anime8 {
    position: relative;
    width: 200px;
    height: 60px;
    text-align: center;
    color: transparent;
}

.anime8::after {
    content: attr(data-color-change);
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 80px;
    color: #fff;
    clip: rect(0,0,620px,0);
    transition: clip 1s linear;
}

.anime8.color-change:after {
    clip: rect(0,500px,200px,0);
}

/*---------------一枚目の画像アニメーション--------------------*/

.slide01 p{
    font-size: 22px;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 30;
    letter-spacing: 0.1em;
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-weight: 600;
    width:43vw;
    margin: 0 0 0 7vw;
}



.swiper-container{
  padding: 40px 0 0 0;
}
.swiper-slide img{
  width:100%;
}