@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#kagura1809{
	background: #ffb36f;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
	/*background:url(../../../img/contents_pc/campaign/kagura1809/kagura1809_pc_a01_bg.png) repeat-x center top0;*/
}


#kagura1809 section[class^="box0"]{
	position: relative;
	width: 1900px;       /* 中央揃え指定 */
	left: 50%;           /* 中央揃え指定 */
	margin-left: -950px; /* 中央揃え指定 */
}

#kagura1809 section[class^="box0"] >img{
	vertical-align: bottom;
}

#kagura1809 section[class^="box0"] p{
	position: absolute;
}

/* ボタン
---------------------------------------------------------- */
/* 疑似クラスを使うためのボタンコンテナ */
#kagura1809 section[class^="box0"] p.btn{
	position: absolute;
	width: 220px;
	height: 220px;
	left: 50%;
}

/* ボタン位置調整 */
#kagura1809 .box01 p.btn_dl {top: 410px;margin-left:  50%;left: 160px;}/* 1段目 */
#kagura1809 .box01 p.btn_nijiyome{top: 416px;margin-left: 50%;left: -410px;}/* 1段目 */
#kagura1809 .box03 p.btn_dl{top: 720px;margin-left:  50%;left: 240px;}/* 3段目 */
#kagura1809 .box03 p.btn_nijiyome{top: 720px;margin-left: 50%;left: -476px;}/* 3段目 */


/* ボタン画像01 */
#kagura1809 section[class^="box0"] p.btn_dl a{
	background:url(../../../img/contents_pc/campaign/kagura1809/kagura1809_btn01.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	width: 220px;
	height: 220px;
	z-index: 100;
	line-height:99em;
	overflow:hidden;
  -webkit-animation: scaling 2.5s ease 1s infinite both;
  animation: scaling 2.5s ease 1s infinite both;
}

@-webkit-keyframes scaling{
  0%    {-webkit-transform:scale(1);}
  1%    {-webkit-transform:scale(0.80);}
  4%    {-webkit-transform:scale(1.);}
  8%    {-webkit-transform:scale(0.94);}
  13%,100%{-webkit-transform:scale(1);}
}
@keyframes scaling{
  0%    {transform:scale(1);}
  1%    {transform:scale(0.80);}
  4%    {transform:scale(1);}
  8%    {transform:scale(0.94);}
  13%,100%{transform:scale(1);}
}
/* ボタン画像02 */
#kagura1809 section[class^="box0"] p.btn_nijiyome a{
	background:url(../../../img/contents_pc/campaign/kagura1809/kagura1809_btn02.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	width: 220px;
	height: 220px;
	z-index: 100;
	line-height:99em;
	overflow:hidden;
  -webkit-animation: scaling 2.5s ease 2s infinite both;
  animation: scaling 2.5s ease 2s infinite both;
}

@-webkit-keyframes scaling{
  0%    {-webkit-transform:scale(1);}
  1%    {-webkit-transform:scale(0.80);}
  4%    {-webkit-transform:scale(1.);}
  8%    {-webkit-transform:scale(0.94);}
  13%,100%{-webkit-transform:scale(1);}
}
@keyframes scaling{
  0%    {transform:scale(1);}
  1%    {transform:scale(0.80);}
  4%    {transform:scale(1);}
  8%    {transform:scale(0.94);}
  13%,100%{transform:scale(1);}
}

/* hover指定 */
#kagura1809 section[class^="box0"] a:hover{ background-position: 0px -240px;}




/* box_01（上段）
---------------------------------------------------------- */
#kagura1809 .box01 h1{
	background: url(../../../img/contents_pc/campaign/kagura1809/kagura1809_mainpic_01.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 268px;
	line-height: 268%;
	overflow: hidden;
}


/* kaguraBox_02（中段）
---------------------------------------------------------- */
#kagura1809 .box02 h1{
	background: url(../../../img/contents_pc/campaign/kagura1809/kagura1809_mainpic_05.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 250px;
	line-height: 200%;
	overflow: hidden;
}


#kagura1809 .box02 p.charaBoard{
	background:url(../../../img/contents_pc/campaign/kagura1809/kagura1809_charaBorad.png) no-repeat center top;
	background-size: contain;
	width: 1800px;
	padding-top: 640px;
	height: 0;
	line-height: 200%;
	overflow: hidden;
	top: -197px;
}

/* kaguraBox_03（下段）
---------------------------------------------------------- */
#kagura1809 .box03 h1{
	background: url(../../../img/contents_pc/campaign/kagura1809/kagura1809_mainpic_07.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 250px;
	line-height: 200%;
	overflow: hidden;
}

/* IE9用ハック
--------------------------------------------------------- */

/* div01 */
/* ウインドウを広げたとき背景画像がズレるのを固定 */
:root #kagura .kaguraBox01 h1{ position:relative;  width: 1920px; left:50%; margin-left:-960px;\0/}	

/* div02 */
/* ウインドウを広げたとき背景画像がズレるのを固定 */
:root #kagura .kaguraBox02 h2{ position:relative;  width: 1920px; left:50%; margin-left:-960px;\0/}	

/* div03 */
/* ウインドウを広げたとき背景画像がズレるのを固定 */
:root #kagura .kaguraBox03 h2{ position:relative;  width: 1920px; left:50%; margin-left:-960px;\0/}	
/* 可愛い版背景を非表示 */
:root #kagura .kaguraBox03 h2:after{ opacity:0;\0/}
/* 可愛い円画像を非表示 */
:root #kagura .kaguraBox03 p:nth-of-type(3){ opacity:0;\0/}
/* 「かわいい」フキダシ非表示 */
:root #kagura .kaguraBox03 a.login:after,
:root #kagura .kaguraBox03 a.start:after{ opacity:0;\0/}





/* ---------------------------------------------------------
　舞い散るsakuraアニメーション
--------------------------------------------------------- */



/* sakura_02アニメーション
--------------------------------------------------------- */
.sakura_01{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_01 25s ease-in-out 0s infinite both;
	-moz-animation:sakura_01 25s ease-in-out 0s infinite both;
	-o-animation:sakura_01 25s ease-in-out 0s infinite both;
	animation:sakura_01 25s ease-in-out 0s infinite both;
}

.sakura_01_01{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_01 35s ease-in-out 20s infinite both;
	-moz-animation:sakura_01 35s ease-in-out 20s infinite both;
	-o-animation:sakura_01 35s ease-in-out 20s infinite both;
	animation:sakura_01 35s ease-in-out 20s infinite both;
}

@-webkit-keyframes sakura_01{
0%	{opacity:0; -webkit-transform:rotate(0deg); top:-5%; margin-left:400px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(-360deg); margin-left:600px;}
65%	{-webkit-transform:rotate(360deg); margin-left:400px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg); top:105%; margin-left:600px;} 
}
@keyframes sakura_01{
0%	{opacity:0; transform:rotate(0deg); top:-5%; margin-left:400px;}
10%	{opacity:1;}
30%	{transform:rotate(-360deg); margin-left:600px;}
65%	{transform:rotate(360deg); margin-left:400px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg); top:105%; margin-left:600px;} 
}


/* sakura_02アニメーション
--------------------------------------------------------- */
.sakura_02{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(1px);
	-webkit-animation:sakura_02 30s ease-in-out 0s infinite both;
	-moz-animation:sakura_02 30s ease-in-out 0s infinite both;
	-o-animation:sakura_02 30s ease-in-out 0s infinite both;
	animation:sakura_02 30s ease-in-out 0s infinite both;
}

.sakura_02_01{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_02 30s ease-in-out 15s infinite both;
	-moz-animation:sakura_02 30s ease-in-out 15s infinite both;
	-o-animation:sakura_02 30s ease-in-out 15s infinite both;
	animation:sakura_02 30s ease-in-out 15s infinite both;
}


@-webkit-keyframes sakura_02{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.8); top:-5%; margin-left:-800px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(180deg) scale(-0.8); margin-left:-600px;}
65%	{-webkit-transform:rotate(-480deg) scale(-1); margin-left:-800px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-600px;} 
}
@keyframes sakura_02{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.8); top:-5%; margin-left:-800px;}
10%	{opacity:1;}
30%	{transform:rotate(180deg) scale(-0.8); margin-left:-600px;}
65%	{transform:rotate(-480deg) scale(-1); margin-left:-800px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-600px;} 
}


/* sakura_03アニメーション
--------------------------------------------------------- */
.sakura_03{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_03 32s ease-in-out 10s infinite both;
	-moz-animation:sakura_03 32s ease-in-out 10s infinite both;
	-o-animation:sakura_03 32s ease-in-out 10s infinite both;
	animation:sakura_03 32s ease-in-out 10s infinite both;
}

.sakura_03_01{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(2px);
	-webkit-animation:sakura_03 32s ease-in-out 20s infinite both;
	-moz-animation:sakura_03 32s ease-in-out 20s infinite both;
	-o-animation:sakura_03 32s ease-in-out 20s infinite both;
	animation:sakura_03 32s ease-in-out 20s infinite both;
}

@-webkit-keyframes sakura_03{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.6); top:-5%; margin-left:-700px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(180deg) scale(-0.8); margin-left:-900px;}
65%	{-webkit-transform:rotate(-480deg) scale(-0.6); margin-left:-700px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-900px;} 
}
@keyframes sakura_03{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.6); top:-5%; margin-left:-700px;}
10%	{opacity:1;}
30%	{transform:rotate(180deg) scale(-0.8); margin-left:-900px;}
65%	{transform:rotate(-480deg) scale(-0.6); margin-left:-700px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-900px;} 
}


/* sakura_04アニメーション
--------------------------------------------------------- */
.sakura_04{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_04 29s ease-in-out 5s infinite both;
	-moz-animation:sakura_04 29s ease-in-out 5s infinite both;
	-o-animation:sakura_04 29s ease-in-out 5s infinite both;
	animation:sakura_04 29s ease-in-out 5s infinite both;
}

.sakura_04_01{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(2px);
	-webkit-animation:sakura_04 29s ease-in-out 14s infinite both;
	-moz-animation:sakura_04 29s ease-in-out 14s infinite both;
	-o-animation:sakura_04 29s ease-in-out 14s infinite both;
	animation:sakura_04 29s ease-in-out 14s infinite both;
}

@-webkit-keyframes sakura_04{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:700px;}
10%	{opacity:1;}
20%	{-webkit-transform:rotate(180deg) scale(-0.9); margin-left:500px;}
40%	{-webkit-transform:rotate(-480deg) scale(-0.6); margin-left:700px;}
60%	{-webkit-transform:rotate(0deg) scale(-0.6); margin-left:600px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.8); top:105%; margin-left:400px;} 
}
@keyframes sakura_04{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:700px;}
10%	{opacity:1;}
20%	{transform:rotate(180deg) scale(-0.9); margin-left:500px;}
40%	{transform:rotate(-480deg) scale(-0.6); margin-left:700px;}
60%	{transform:rotate(0deg) scale(-0.6); margin-left:600px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(-360deg) scale(-0.8); top:105%; margin-left:400px;} 
}


/* sakura_05アニメーション
--------------------------------------------------------- */
.sakura_05{
	height:40px;
	width:40px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_05 40s ease-in-out 8s infinite both;
	-moz-animation:sakura_05 40s ease-in-out 8s infinite both;
	-o-animation:sakura_05 40s ease-in-out 8s infinite both;
	animation:sakura_05 40s ease-in-out 8s infinite both;
}

@-webkit-keyframes sakura_05{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:200px;}
10%	{opacity:1;}
20%	{-webkit-transform:rotate(180deg) scale(-0.9); margin-left:-300px;}
40%	{-webkit-transform:rotate(-480deg) scale(-0.7); margin-left:200px;}
60%	{-webkit-transform:rotate(0deg) scale(-0.8); margin-left:-200px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.6); top:105%; margin-left:300px;} 
}
@keyframes sakura_05{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:200px;}
10%	{opacity:1;}
20%	{transform:rotate(180deg) scale(-0.9); margin-left:-300px;}
40%	{transform:rotate(-480deg) scale(-0.7); margin-left:200px;}
60%	{transform:rotate(0deg) scale(-0.8); margin-left:-200px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(-360deg) scale(-0.6); top:105%; margin-left:300px;} 
}