@charset "utf-8";

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

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


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

	main .contents-inner{
		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;
	}



/* メイン画像
======================*/
.sec_img{
	max-width: 1400px;
	margin: 0 auto;
}
.sec_img img{
	width: 100%;
}

/* メインテキスト
======================*/
	.sec_txt{
		width: 100%;
		background-color: #ffffff;
		margin: 60px 0 0;
	}
	.main_ttl{
		width: 90%;
		max-width: 700px;
		margin: 0 auto;
		padding: 60px 0 30px;
	}
	.main_txt{
		width: 80%;
		max-width: 760px;
		margin: 0 auto;
		padding: 70px 0 20px;
		font-size: 15px;
		color: #00040;
		line-height: 2.3;
		text-align: center;
		/*font-family: "Sawarabi Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;*/
		font-family: "Noto Serif JP", serif;
		font-weight: 600;
	}
	.txt_block{
		padding: 0 0 40px;
	}
	.txt_today{
		width: 320px;
		margin: 0 auto;
		padding: 30px 0 0;
	}
	.txt_logo{
		width: 120px;
		margin: 0 auto;
		padding: 20px 0 60px;
	}

/* Pick Up Movie
======================*/
.pick-up-movie {
	max-width: 1400px;
	margin: 80px auto 0;
	padding-bottom: 60px;
}
.pick-up-movie__title {
	margin-bottom: 36px;
	font-size: 21px;
	text-align: center;
}




}/*! //pc & tb */









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

	.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 メイン画像
======================*/
.sec_img{
	width: 100%;
	margin: 0 auto;
}
.sec_img img{
	width: 100%;
}

/* sp メインテキスト
======================*/
	.sec_txt{
		width: 100%;
		background-color: #ffffff;
		margin: 0;
	}
	.main_ttl{
		width: calc(685/780*100vw);
		margin: 0 auto;
		padding: 25vw 0 5vw;
	}
	.main_txt{
		width: 85%;
		max-width: 760px;
		margin: 0 auto;
		padding: 15vw 0 10vw;
		font-size: 3.4vw;
		color: #000040;
		line-height: 2.3;
		text-align: center;
		/*font-family: "Sawarabi Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;*/
		font-family: "Noto Serif JP", serif;
		font-weight: 600;
	}
	.txt_block{
		padding: 0 0 10vw;
	}
	.txt_today{
		width: calc(480/780*100vw);
		margin: 0 auto;
		padding: 5vw 0 0;
	}
	.txt_logo{
		width: calc(190/780*100vw);
		margin: 0 auto;
		padding: 3vw 0 10vw;
	}

/* sp Pick Up Movie
======================*/
	.pick-up-movie {
		margin-top: 9.9vw;
		padding-bottom: 9.9vw;
	}
	.pick-up-movie__title {
	margin-bottom: 36px;
	font-size: 21px;
	text-align: center;
}

}/*! //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
=========================*/