@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

h1,h2{
	font-size:1.2rem;
}

h2,
#container p,
small{
	margin:0 0 30px 0;
}

small{
	display: block;
	text-align: center;
}
/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#wrapper{
	position: relative;/*position stickyの基点にするため relativeをかける*/
    display: flex;/*左エリア、右エリア横並び指定*/
	flex-wrap: wrap;/*ボックスの折り返し可*/
 font-family: "Amiko", "Helvetica", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "a-otf-midashi-go-mb31-pr6n", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-font-feature-settings: "palt";
 font-feature-settings: "palt";
}

/*左エリア*/
#fixed-area{
/*左固定記述*/
position: -webkit-sticky;/*Safari用*/
position: sticky;
top:0;
/*横半分50%　縦を100vhにする*/
width: 50%;
height: 100vh;
/*装飾のためのCSS*/
display: flex;
justify-content: center;
align-items: center;
color:#fff;
}

#fixed-area img{
max-width: 70%;
height: auto;
}
/*右エリア*/
#container{
	/*横半分50%にする*/
	width:50%;
}
/*右各セクション 装飾のためのCSS*/
section{
	min-height: 100vh;
	padding:30px;
	background:#f2f2f2;
}

section:nth-of-type(2n){
/*装飾のためのCSS*/
	background:#de0011;
}
.area_copy,.area_movie{margin:  30px auto auto 30px;
text-align: left;}
.area_copy H1{
font-size: 2em;border-bottom: solid 1px #e60012;
margin: 0px 0px 30px;
max-width: 550px;
padding:0px 0px 30px;
line-height: 1.8em;
}
.area_copy_tb{font-size: 1.5em;
color: #e60012;
letter-spacing: 1px;}

.catch_area,.movie_area{
	display:flex;
	flex-wrap: wrap;
}
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
.txt_box{
width: 100%;
padding: 10px 20px 0px;
margin: 0 20px 0px 20px;
	box-sizing:border-box;
		opacity: 0;
	font-size: 1.3em;
text-align: left;
font-weight: bold;
letter-spacing: 1.6px;
}
.f02em{color: #e60012;letter-spacing: 1px;}
/*==================================================
ふわっ
===================================*/
.fadeup {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(20px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{animation-delay: 1.7s;}
.delay-time03{animation-delay: 2.4s;}
.delay-time04{animation-delay: 3.1s;}
.delay-time05{animation-delay: 4.5s;
font-size: 2em;}
.delay-time06{animation-delay: 5.5s;}
.delay-time07{animation-delay: 7.2s;
margin-top: 40px;}





.movie_area{
	display:flex;
	flex-wrap: wrap;
}
.area_movie ul{margin: 0px;padding: 0px;}
.logo_movie{
	width: 40%;
	padding: 0px;
 margin: 0 40px 0px 0px;
	color: #fff;
	box-sizing:border-box;
    list-style: none;
	opacity: 0;
}
.logo_movie:nth-child(2){
 margin: 0px;
}
.fadeUp_logomovie {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.area_movie H1{color: #FFF;font-size: 2.5em;}
.area_movie p{
font-size: 1em;
text-align: center;
letter-spacing: 3px;
line-height: 3em;
color: #FFF;
}
.sp_br { display: none;}





/*==================================================
じわっ
===================================*/
.blur{
	animation-name:blurAnime;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}





/*＝＝＝＝＝＝＝＝＝＝＝1024px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:1024px){
#wrapper{	display: block;/*display:flex;を解除*/}
section{	min-height:auto;/*縦を100vh⇒解除*/}

#fixed-area{
    position:relative!important;/*position stickyを解除*/
	width:100%;/*横幅を100%にして1列に見せる*/
	height: 40vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
}

#container{
	width:100%;/*横幅を100%にして1列に見せる*/
}
.area_copy{margin:  50px 0px auto 0px;}
.area_movie
{margin:  50px 0px auto 0px;
padding: 0 30px;
}
.area_copy H1{max-width: 100%;}
.txt_box{
padding: 10px 0px 0px;
margin: 0 5px 0px 5px;
	font-size: 1.5em;
font-weight: bold;
letter-spacing: 1px;
}
.delay-time07{animation-delay: 11s;
margin-top: 50px;width: 50%;}
.logo_movie{width: 46%;
 margin: 0 40px 0px 0px}
	.area_movie p{
font-size: 1.3em;
letter-spacing: 0px;
}
}










/*＝＝＝＝＝＝＝＝＝＝＝599px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:599px){
.area_copy{margin:  10px 0px auto 0px;}
.area_copy H1{font-size: 1.15em;
padding:0px 0px 20px;
margin: 0px 0px 15px;}
.txt_box{
padding: 10px 0px 0px;
font-size: 0.98em;
}
.delay-time07{margin-top: 30px;}
.area_movie{
margin: 10px 0px auto 0px;
padding: 0px;
}
.area_movie p{
padding-top: 10px;
font-size:0.8em;
line-height: 1.2em;
}
.logo_movie{width: 45%;
 margin: 0 20px 0px 0px}
.logo_movie:nth-child(2){
 margin: 0px;
}
.sp_br { display:block }
}

/*＝＝＝＝＝＝＝＝＝＝＝350px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:350px){
.area_copy H1{font-size: 0.93em;}
.txt_box{	font-size: 0.78em;}
}
