@charset "utf-8";

/*------------------------------------------------------------
LP
------------------------------------------------------------*/

/*パンくずリスト*/
.bread-crumbs .bread-crumbs-inner{
	display: none;
}






/*! pc & tb 
------------------------------------------*/
@media screen and (min-width: 641px) {
	
.sp_view{
	display: none;
}

/*! main
------------------------------------------*/

	main .contents{
		margin: 0 0 80px;
	}
	main .contents-inner{
		width: 100%!important;
		/*max-width: 1240px!important;*/
		max-width: auto!important;
		max-width: none;
		margin: 0 auto;
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
		font-size: 15px;
		color: #7d7d7d;
	}


/* pc & tb  上部スライダーのためのcss
======================*/
.slider {
	max-width: 1400px;
	margin: 0 auto;
 /* position:relative;
	z-index: 1;*/
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/*height: 100vh;*/
	/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

/*.slider-item01 {
    background:url("../img/main_img1.jpg");
}

.slider-item02 {
    background:url("../img/main_img2.jpg");
}

.slider-item03 {
    background:url("../img/main_img3.jpg");
}*/

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    /*height:100vh;*//*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:right;
	margin:0 1.0715vw;/*ドットの位置*/
	margin-top: 15px;
}

.slick-dots li {
  display:inline-block;
	margin:0 4px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:7px;/*ドットボタンのサイズ*/
    height:7px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#bfbfbf;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#000000;/*ドットボタンの現在地表示の色*/
}


/* セクション
======================*/
.sec_ttl{
	font-size: 21px;
	text-align: center;
	color: #414042;
	padding-bottom: 40px;
}

/* ボタン*/
.sec_btn_wrap a{
	width: 200px;
	height: 30px;
	display: block;
	margin: 50px auto 150px;
}

.sec_btn{
	background-color: #a7a7a7;
	border-radius: 50px;
	font-size: 14px;
	line-height: 30px;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.8px;
}
/* ボタン大*/
	.footer_btn_wrap{
		/*border-top: 1px solid #dadada;*/
		margin: 0px auto 150px;
	}

	.footer_btn_wrap a{
		width: 320px;
		height: 30px;
		display: block;
		margin: 0 auto 30px;
	}
	.footer_btn{
		background-color: #a7a7a7;
		border-radius: 5px;
		font-size: 14px;
		line-height: 40px;
		height: 40px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.8px;
	}

/* sec00
======================*/
.sec00_movie{
	max-width: 1400px;
	margin: 0 auto;
}
.sec00 .sec_ttl{
	padding-top: 100px;
}


/* sec01
======================*/
.sec01{
	/*padding-top: 80px;*/
}
.sec01_ttl{
	font-size: 21px;
	text-align: center;
	color: #414042;
	padding-bottom: 15px;
}
.sec01_icon{
	width: 50px;
	margin: 0 auto;
	padding-bottom: 40px;
}
h2.instagram-title-txt, .instagram-title h2{
	margin-bottom: 15px!important;
}
	
.instagram-title h2{
	padding-top: 100px!important;
}

/* sec02
======================*/
.sec02{
		padding-bottom: 150px;
	}
.sec02_img{
	width: 630px;
	margin: 0 auto;
}


/* sec03
======================*/
.sec03{
	padding-bottom: 150px;
}
.sec03_slider{
	position: relative;
}
.sec03_copy{
	width: 470px;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	z-index: 50;
}


/* sec04
======================*/
.sec04{
	padding-bottom: 110px;
}
.sec04_shopinfo{
	display: flex;
	width: 600px;
	margin: 0 auto;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto 50px;
	padding: 0;
	text-align: center;;
}
.sec04_logo{
	width: 150px;
}
.sec04_logo img{
	width: 70px;
	padding-bottom: 3px;
}
.sec04_name{
	font-size: 17px;
	color: #333333;
	letter-spacing: 0.5px;
	padding: 0 0 15px;
}
.sec04_name span{
	font-size: 12px;
}
.sec04_info{
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
}

.sec04_close{
	padding: 5px 0 0;
}
.sec04_map{
	width: 100%;
	display: flex;
	margin: 0 auto;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	align-items: flex-end;/*下揃え*/
	padding-top: 5px;
}
.sec04_map_icon{
	width: 18px;
}
.sec04_map_txt{
	font-size: 11px;
	color: #7d7d7d;
	font-family: "Raleway", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
	padding-left: 4px;
}
.sec04_map_txt a{
	color: #7d7d7d;
}


/* sec05
======================*/
.sec05{
	padding-bottom: 150px;
}
.sec05_movie{
	max-width: 1400px;
	margin: 0 auto;
}
.sec05_movie img{
	width: 100%;
}

.sec05_img{
	max-width: 1400px;
	margin: 0 auto;
}
.sec05_img img{
	width: 100%;
}

.sec_txt{
	font-size: 16px;
	line-height: 2;
	width: 80%;
	width: 80%;
	max-width: 760px;
	margin: 50px auto 0;
}


/* sec06
======================*/
.sec06{
	padding-bottom: 60px;
}
.sec06_movie{
	max-width: 1400px;
	margin: 0 auto;
}



}/*! //pc & tb */













/*! sp 
------------------------------------------*/
@media screen and (max-width: 640px) {

	.pc_view{
		display: none;
	}
	main .contents-inner{
		margin: 0 0 0;
		/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		color: #7d7d7d;
	}



/*! sp 
------------------------------------------*/
	.main-visual .slick-dots li button::before{
	/*font-size: 45px!important;*/
	/*font-size: 13px!important;*/
		width: 2.1875vw;
		height: 2.1875vw;
		font-size: 1.25vw;
		line-height: 2.1875vw
	}

	main .contents{
		margin: 0 0 0;
	}
	
	.main-visual{
	position: relative;
	}

	.main-visual .main-logo{
	width: calc(320/640*100%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: 10;
	}

	.insta-wrap{
		width: 100%;
		margin: 10vw auto 15vw;
	}
	.insta-wrap a{
		width: 7vw;
		display: block;
		margin: 0 auto;
	}



/*sp スライダーのためのcss
======================*/
.slider {
	max-width: 1400px;
	margin: 0 auto;
 /* position:relative;
	z-index: 1;*/
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/*height: 100vh;*/
	/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

/*.slider-item01 {
    background:url("../img/main_img1.jpg");
}

.slider-item02 {
    background:url("../img/main_img2.jpg");
}

.slider-item03 {
    background:url("../img/main_img3.jpg");
}*/

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    /*height:100vh*/;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}


/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:right;
	margin: 4vw 0 0 0;/*ドットの位置*/
	padding: 0 4.6875vw;
}

.slick-dots li {
  display:inline-block;
	margin:0 0.7vw;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:1.1vw;/*ドットボタンのサイズ*/
    height:1.1vw;/*ドットボタンのサイズ*/
		line-height: 1.1vw;
    display:block;
    border-radius:50%;
    background:#bfbfbf;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#000000;/*ドットボタンの現在地表示の色*/
}



/* sp セクション
======================*/

.sec_ttl{
	font-size: 4.3vw;
	text-align: center;
	color: #414042;
	padding-bottom: calc(70/780*100%);
}


/* sp view more ボタン*/

.sec_btn_wrap a{
	width: 40vw;
	height: 5.625vw;
	display: block;
	margin: 0 auto;
/*	padding-bottom: calc(160/780*100vw);*/
}

.sec_btn{
	background-color: #a7a7a7;
	border-radius: 7.8125vw;
	font-size: 2.8125vw;
	line-height: 5.625vw;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1vw;
}


/* sp ボタン大*/
.footer_btn_wrap{
	/*border-top: 1px solid #dadada;*/
	margin: 9vw auto 13vw;
}

.footer_btn_wrap a{
	width: 63vw;
	height: 5.625vw;
	display: block;
	margin: 0 auto 8vw;
}
.footer_btn{
	text-align: center;
	letter-spacing: 0.8px;
	background-color: #a7a7a7;
	border-radius: 1vw;
	font-size: 2.8125vw;
	line-height: 5.625vw;
	line-height: 8vw;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1vw;
}


/* sp sec00
======================*/
.sec00_movie{
	width: 100%;
	margin: 0 auto;
}
.sec00 .sec_ttl{
	font-size: 4.3vw;
	text-align: center;
	color:#414042;
	line-height: 1.4;
	letter-spacing: -0.001em;
	text-align: center;
	padding-top: 15vw;
	padding-bottom: calc(70/780*100%);
}


/* sp sec01
======================*/
.instagram-title h2{
	padding-top: 20vw!important;
}
.sec01{
	/*margin-top: calc(70/780*100vw);*/
/*	padding-bottom: calc(160/780*100vw);*/
	padding-bottom: calc(60/780*100vw);
}
.sec01_ttl{
	font-size: 4.3vw;
	text-align: center;
	color: #414042;
	padding-bottom: calc(20/780*100vw);
}
.sec01_icon{
	width: calc(50/780*100vw);
	margin: 0 auto;
	padding-bottom: calc(70/780*100%);
}
	/*visumo*/
h2.instagram-title-txt, .instagram-title h2{
	font-size: 4.3vw!important;
	margin-bottom: 2.8vw!important;
}
.instagram-title img{
	width: calc(60/780*100vw)!important;
	height: calc(60/780*100vw)!important;
}
	/*powered by visumo*/
.ecbn-selection-page-wrapper .ecbn-selection-footer2{
	margin-top: 0!important;
}

/* sp sec02
======================*/
	.sec02{
		padding-bottom: calc(160/780*100vw);
	}
	.sec02_img{
		width: 94%;
		margin: 0 auto calc(50/780*100vw);
	}
.sec02 .pick-up-news__title{
	font-size: 4.3vw!important;
	
}
/* sp sec03
======================*/
.sec03{
	padding-bottom: calc(160/780*100vw);
}
.sec03_slider{
	position: relative;
}
.sec03_copy{
	width: calc(360/780*100vw);
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	z-index: 50;
}

/* sp sec04
======================*/
.sec04{
	padding-bottom: calc(148/780*100vw);
}
.sec04_shopinfo{
	display: flex;
	width: calc(660/780*100%);
	margin: 0 auto;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	align-items: flex-start;/*上揃え*/
	padding: 0 0 12vw;
	text-align: center;
}
.sec04_logo{
	width: calc(200/660*100%);
}
.sec04_logo img{
	width: 65%;
	padding-bottom: 1vw;
}
.sec04_name{
	font-size: 3.5vw;
	color: #333333;
	letter-spacing: 0.2vw;
	padding-bottom: 4vw;
}
.sec04_name span{
	font-size: 3.0vw;
}
.sec04_info{
	width: calc(660/660*100%);
	font-size: 3.0vw;
	line-height: 1.6;
}

.sec04_close{
	padding: 0.8vw 0 0;
}
.sec04_map{
	width: 100%;
	display: flex;
	margin: 0 auto;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	align-items: flex-end;/*下揃え*/
	padding-top:0.51vw;
	text-align: center;
}
.sec04_map_icon{
	width: 4.5vw;
}
.sec04_map_txt{
	font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
	padding-left: 1vw;
}
.sec04_map_txt a{
	font-size: 2.6vw;
	color: #7d7d7d;
}


/* sp sec05
======================*/
.sec05{
	padding-bottom: calc(100/780*100vw);
}
.sec05_img{
	width: 100%;
	margin: 0 auto;
}
.sec05_img img{
	width: 100%;
}
.sec_txt{
	line-height: 2;
	font-size: 3.4vw;
	width: calc(624/780*100%);
	margin: calc(70/780*100vw) auto;
}
/* sp sec06
======================*/
.sec06{
	padding-bottom: calc(100/780*100vw);
}

}/*! //sp */










/*@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}
*/








/*タイトル タイピングアニメーション start
=========================*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on1 1s ease-out forwards; }

.line1 .eachTextAnime.appeartext span{ animation:text_anime_on1 1s ease-out forwards; }
.line2 .eachTextAnime.appeartext span{ animation:text_anime_on2 1s ease-out forwards; }
.line3 .eachTextAnime.appeartext span{ animation:text_anime_on2 1.5s ease-out forwards; }
@keyframes text_anime_on1 {
  0% {opacity:0;}
  100% {opacity:1;}
}
	@keyframes text_anime_on2 {
  0% {opacity:0;}
	50% {opacity:0;}
  100% {opacity:1;}
}
/*タイトル タイピングアニメーション end
=========================*/


/*画像回転アニメーション start
=========================*/
/*.itemAnmTrigger {
}
.secImgWide1 .itemAnmActive{
	animation: item_anm1 4s ease-out 1;
}
.secImgWide2 .itemAnmActive{
	animation: item_anm2 3s ease-out 1;
}
.secImgWide3 .itemAnmActive{
	animation: item_anm3 3s ease-out 1;
}

@keyframes item_anm1 {
0%   {transform: scale(1.3) rotate(10deg); }
100% {transform: scale(1.) rotate(0); }
}
@keyframes item_anm2 {
0%   { transform: scale(1.15) rotate(0deg); }
100% { transform: scale(1.) rotate(0deg); }
}
@keyframes item_anm3 {
0%   {transform: scale(1.2) rotate(-7deg); }
100% {transform: scale(1.) rotate(0); }
}*/
/*.imgFrame{
	overflow: hidden;
}
.imgFrame img{
	overflow: hidden;
}*/

/*画像回転アニメーション end
=========================*/



/*一文字テキストアニメーション start
=========================*/
@media screen and (min-width: 768px) {
.oneTxt {
  display: inline-block;
  font-size: 32px;
  overflow: hidden;
	color: #ffffff;
}

.oneTxtAnm span{
  display: block;
  animation: text-animation 0.8s forwards;
  transform: translateX(-32px);
	color: #ffffff;
	line-height: 1.3;
	padding: 0 3px;
}
.txt_space{
	padding: 0 4px;
}

@keyframes text-animation {
    0% {
        opacity: 0;
        transform: translateX(-32px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
}


@media screen and (max-width: 767px) {
.oneTxtAnm {
  display: inline-block;
  font-size: 4.8vw;
  overflow: hidden;
}

.oneTxtAnm span{
  display: block;
  animation: text-animation 0.8s forwards;
  transform: translateX(-4.8vw);
	color: #ffffff;
	line-height: 1.3;
	padding: 0 0.5vw;
}
.txt_space{
	padding: 0 0.7vw;
}

@keyframes text-animation {
    0% {
        opacity: 0;
        transform: translateX(-4.8vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
}
/*一文字テキストアニメーション end
=========================*/


/*
テキストへの効果：背景色が伸びて出現 start
=========================*/
/*全共通*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*下から上*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
	background-color: #dec0d2;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgDUextendTrigger{
    opacity: 0;
}
/*
テキストへの効果：背景色が伸びて出現 end 
=========================*/


/*   ふわっと表示 start
=========================*/
/* ----- effects ----- */
  .effFI, .effFIU, .effFID, .effFIR, .effFIL { opacity:0; }
  .effFI.effanm { -webkit-animation:effFI 2.5s both; animation:effFI 2.5s both; }
  .effFIU.effanm { -webkit-animation:effFIU 1.5s both; animation:effFIU 1.5s both; }
  .effFID.effanm { -webkit-animation:effFID 1.5s both; animation:effFID 1.5s both; }
  .effFIR.effanm { -webkit-animation:effFIR 1.5s both; animation:effFIR 1.5s both; }
  .effFIL.effanm { -webkit-animation:effFIL 1.5s both; animation:effFIL 1.5s both; }

/*その場でフェードイン*/
  @-webkit-keyframes effFI {0%{opacity:0}100%{opacity:1}}
  @keyframes effFI {0%{opacity:0}100%{opacity:1}}

/*下から上へフェードイン*/
  @-webkit-keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*上から下へフェードイン*/
  @-webkit-keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
/*   ふわっと表示 end
=========================*/


/*ページ読み込み時のローディングアニメーション//
=========================*/
#cover {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: #bfe037;*/
    background: #92b326;
    transition: .8s .4s ease;
    transform-origin: right center;
}
.loaded #cover {
	opacity: 1;
	visibility: visible;
	transform: rotateY(90deg);
}
#main {
	opacity: 0;
	transition: .8s .4s ease;
}
.hideCover #main {
	opacity: 1;
}
/*//ページ読み込み時のローディングアニメーション
=========================*/



/*スクロールで画像がカラー⇒黒色or白黒⇒カラーに変化　　★JSと連動
=========================*/

/*発火前のカラー画像をグレーにしておく*/
.sec3_inner .effect, .sec5_inner .effect{
	filter: grayscale(100%) blur(0px) opacity(100%) brightness(20%) saturate(0%);
}

.effect { opacity:1;}
.sec2_inner .effect.active { -webkit-animation:effect_gray 3.5s both; animation:effect_gray 3.5s both; }
.sec3_inner .effect.active { -webkit-animation:effect_color 3.0s both; animation:effect_color 3.5s both; }
.sec5_inner .effect.active { -webkit-animation:effect_color 3.0s both; animation:effect_color 3.5s both; }



@-webkit-keyframes effect_gray {
		0% {filter: grayscale(0%) blur(0px) opacity(100%) saturate(100%) brightness(90%);}
		25% {filter: grayscale(0%) blur(0px) opacity(100%) saturate(110%) brightness(100%);}
	100% {filter: grayscale(100%) blur(0px) opacity(100%) saturate(0%) brightness(100%);}
}
@keyframes effect_gray {
		0% {filter: grayscale(0%) blur(0px) opacity(100%) saturate(100%) brightness(90%);}
		25% {filter: grayscale(0%) blur(0px) opacity(100%) saturate(110%) brightness(100%);}
	100% {filter: grayscale(100%) blur(0px) opacity(100%) saturate(0%) brightness(100%);}
}
@-webkit-keyframes effect_color {
		0% {filter: grayscale(100%) blur(0px) opacity(100%) brightness(20%) saturate(0%);}
		25% {filter: grayscale(50%) blur(0px) opacity(100%) brightness(100%) saturate(0%);}
	100% {filter: grayscale(0%) blur(0px) opacity(100%)  brightness(100%) saturate(100%);}
}
@keyframes effect_color {
		0% {filter: grayscale(100%) blur(0px) opacity(100%) brightness(20%) saturate(0%);}
		25% {filter: grayscale(50%) blur(0px) opacity(100%) brightness(100%) saturate(0%);}
	100% {filter: grayscale(0%) blur(0px) opacity(100%)  brightness(100%) saturate(100%);}
}


/*画像重なりアニメーション start
=========================*/

/*4画像を時差で重ねて表示させる*/
.itemAnmTrigger {
}
.secImgWide1 .itemAnmActive{
	animation: item_anm1 4s ease-out 0s 1;
}
.secImgWide2 .itemAnmActive{
	animation: item_anm2 3.5s ease-out 0.5s 1;
}
.secImgWide3 .itemAnmActive{
	animation: item_anm3 3s ease-out 1s 1;
}
.secImgWide4 .itemAnmActive{
	animation: item_anm4 2.5s ease-out 1.5s 1;
}

@keyframes item_anm1 {
0%   {transform: scale(0.95) rotate(3deg); opacity: 0; }
12.5%{opacity: 1; }
87.5%{transform: scale(1.0) rotate(3deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm2 {
0%   {transform: scale(0.95) rotate(-2deg); opacity: 0; }
14.28%{opacity: 1; }
85.7%{transform: scale(1.0) rotate(-2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm3 {
0%   {transform: scale(0.95) rotate(2deg); opacity: 0; }
16.6%{opacity: 1; }
83.3%   {transform: scale(1.0) rotate(2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm4 {
0%   {transform: scale(0.95) rotate(-1deg); opacity: 0; }
20%{opacity: 1; }
80%   {transform: scale(1.0) rotate(-1deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}

/*スマホ表示時 重なり時は画像小さめ表示*/
@media screen and (max-width: 640px) {
	@keyframes item_anm1 {
0%   {transform: scale(0.9) rotate(4deg); opacity: 0; }
12.5%{opacity: 1; }
87.5%{transform: scale(1.0) rotate(4deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm2 {
0%   {transform: scale(0.9) rotate(-4deg); opacity: 0; }
14.28%{opacity: 1; }
85.7%{transform: scale(1.0) rotate(-4deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm3 {
0%   {transform: scale(0.9) rotate(2deg); opacity: 0; }
16.6%{opacity: 1; }
83.3%   {transform: scale(1.0) rotate(2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm4 {
0%   {transform: scale(0.9) rotate(-2deg); opacity: 0; }
20%{opacity: 1; }
80%   {transform: scale(1.0) rotate(-2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
}

.overlap_box{
	position: relative;
	background-color: aqua;
	width: 100%;
	margin: 0 auto;
}
.overlap_box img{
	opacity: 0;
}

.secImgWide1, .secImgWide2, .secImgWide3, .secImgWide4{
	width: 100%;
	position: absolute;
	top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.secImgWide1{
	z-index: 101;
}
.secImgWide2{
	z-index: 102;
}
.secImgWide3{
	z-index: 103;
}
.secImgWide4{
	z-index: 104;
}

/*画像重なりアニメーション再生後に、同じ位置にスライダーを表示させる*/

.slick-slider{
	z-index: 1!important;
}

.slider_wrap .itemAnmActive{
	animation: slick_anm 5s ease-out 0s 1;

}

@keyframes slick_anm {
0%   { opacity: 0;rotate(2deg);}
65%  { opacity: 0;rotate(2deg);}
100% { opacity: 1;rotate(0);}
}

/*画像重なりアニメーション end
=========================*/