@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: middle;
	
}

body{
	background-color: #000000;
	width: 100%;
	background-position: center;
	font:13px  "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, fantasy;
    *font-size:small;
    *font:x-small;
}



a img{border:none;
	}

#container a{display:block;
}
#container a:hover
	{
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
  }	
 .btnanime:hover{
	   filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity:0.7;
	 }



 /*layout */	
 

 
#container{
	width: 900px;
	margin:0px auto;
	padding-bottom:30px;
	text-align:center;
	background-color:#ffffff;
	box-shadow: 0px 5px 50px #f5e05a; 
	}	




#footer{

	font-size:120%;
	width: 935px;
margin-left: auto;
	margin-right: auto;
	color:#ffffff;
	}

	
	

#footer a:link{
	color: #169dd5 ;
	text-decoration:underline;
	
	}
#footer a:hover{
	color:#ffffff;
		text-decoration:none
	
	}
/*design*/
.m14{
	margin-top:14px;
	}
.m30{
	margin-top:30px;}
.m60{
	margin-top:60px;}	

.p10{
	padding-left:10px
		
}

#qa{border: 10px double #d2c377; padding:20px; margin:20px 0px;
text-align:left;
	}

.toi{font-size: 50px;
	color: #ffffff;
	font-weight: bold;
	font-style: italic;
    background-color: #d2c377;
	padding: 20px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', serif;
	}

#qa dt{color:#df039b; font-weight:bold; font-size:18px; padding-left:20px; padding-right:20px;
	}
#qa dd{color:#000000; font-size:15px; padding-left:20px; padding-right:20px;
	}	
	
.big{font-size:26px;}	
.blue{color: #4b82ad;}






.btnanime {
	 position: relative;
	width: 900px;
	height: 160px;
	background-color:#ff0084;
}

	/* ボタン動く背景　*/	
	

.btnanime .btnmovbg{ 
  animation: btnbg 3s linear; 
  animation-iteration-count: infinite; 
  -webkit-animation: btnbg 3s linear; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -moz-animation: btnbg 3s linear; 
  -moz-animation-iteration-count: infinite; 
  -o-animation: btnbg 3s linear; 
  -o-animation-iteration-count: infinite; 
  -ms-animation: btnbg 3s linear; 
  -ms-animation-iteration-count: infinite; 
width:740px;
height:147px;
position: absolute; 
left: 85px; 
top: 10px;  
    
}  
@keyframes btnbg { 
 	0%  { transform:  translate(0px, 0px);   } 

  40%   { transform: translate(50px, -10px) ;   }
 
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes btnbg { 
	0%  { -webkit-transform:  translate(0px, 0px);   } 
   40%   { -webkit-transform: translate(50px, -10px) ;   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
} 
@-moz-keyframes btnbg {
	0%  { -moz-transform:  translate(0px, 0px);   } 
  40%   { -moz-transform:  translate(50px, -10px) ;   }
  100%  { -moz-transform:  translate(0px, 0px);   } 	
		
	}
@-o-keyframes btnbg {
	0%  { -o-transform:  translate(0px, 0px);   } 
  40%   { -o-transform:  translate(50px, -10px) ;   }  
  100%  { -o-transform:  translate(0px, 0px);   } 	
	}
	
@-ms-keyframes btnbg {
	0%  { -ms-transform:  translate(0px, 0px);   } 
  40%   { -ms-transform:  translate(50px, -10px) ;   }
  100%  { -ms-transform:  translate(0px, 0px);   } 	
	}


/*---- ボタン内動く文字 ----*/	


.btnanime .btnt{ 
  animation: text 3s linear; 
  animation-iteration-count: infinite; 
  -webkit-animation: text 3s linear; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -moz-animation: text 3s linear; 
  -moz-animation-iteration-count: infinite; 
  -o-animation: text 3s linear; 
  -o-animation-iteration-count: infinite; 
  -ms-animation: text 3s linear; 
  -ms-animation-iteration-count: infinite; 
	width:521px;
height:45px;
position: absolute; 
left: 250px; 
top: 80px;
    
    
}  
@keyframes text { 
	0%  { transform:  translate(0px, 0px);   } 
 50%  { transform:  translate(105px, -35px);   } 
   75%   { transform: translate(65px, 10px) ;   }
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes text { 
	0%  { -webkit-transform:  translate(0px, 0px);   } 
 50%  { -webkit-transform:  translate(105px, -35px);   } 
   75%   { -webkit-transform: translate(65px, 10px) ;   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
} 
@-moz-keyframes text {
	0%  { -moz-transform:  translate(0px, 0px);   } 
 50%  { -moz-transform:  translate(105px, -35px);   } 
   75%   { -moz-transform: translate(65px, 10px) ;   }
  100%  { -moz-transform:  translate(0px, 0px);   } 	
		
	}
@-o-keyframes text {
	0%  { -o-transform:  translate(0px, 0px);   } 
 50%  { -o-transform:  translate(105px, -35px);   } 
   75%   { -o-transform: translate(65px, 10px) ;   }
  100%  { -o-transform:  translate(0px, 0px);   } 	
	}
	
@-ms-keyframes text {
	0%  { -ms-transform:  translate(0px, 0px);   } 
 50%  { -ms-transform:  translate(105px, -35px);   } 
   75%   { -ms-transform: translate(65px, 10px) ;   }
  100%  { -ms-transform:  translate(0px, 0px);   } 
	}	



	/* 今すぐ吹き出し ↓*/	


.btnanime .btnsugu{ 
  animation: sugu 3s linear; 
  animation-iteration-count: infinite; 
  -webkit-animation: sugu 3s linear; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -moz-animation: sugu 3s linear; 
  -moz-animation-iteration-count: infinite; 
  -o-animation: sugu 3s linear; 
  -o-animation-iteration-count: infinite; 
  -ms-animation: sugu 3s lineart; 
  -ms-animation-iteration-count: infinite; 
		width:136px;
height:91px;
position: absolute; 
left: 210px; 
top: 0px;
    
    
}  
@keyframes sugu { 
	0%  { transform:  translate(0px, 0px);   } 
   30%   { transform: translate(50px, 20px) ;   }
   72%  { transform:  translate(0px, 45px);   } 
  100%  { transform:  translate(0px, 0px);   } 	
} 
@-webkit-keyframes sugu { 
	0%  { -webkit-transform:  translate(0px, 0px);   } 
   30%   { -webkit-transform: translate(50px, 20px) ;   }
   72%  { -webkit-transform:  translate(0px, 45px);   } 
  100%  { -webkit-transform:  translate(0px, 0px);   } 	
} 
@-moz-keyframes sugu {
	0%  { -moz-transform:  translate(0px, 0px);   } 
   40%   { -moz-transform: translate(50px, 20px) ;   }
   72%  { -moz-transform:  translate(0px, 45px);   } 
  100%  { -moz-transform:  translate(0px, 0px);   } 	
		
	}
@-o-keyframes sugu {
	0%  { -o-transform:  translate(0px, 0px);   } 
   30%   { -o-transform: translate(50px, 20px) ;   }
   72%  { -o-transform:  translate(0px, 45px);   } 
  100%  { -o-transform:  translate(0px, 0px);   } 	
	}
	
@-ms-keyframes sugu {
	0%  { -ms-transform:  translate(0px, 0px);   } 
   30%   { -ms-transform: translate(50px, 20px) ;   }
   72%  { -ms-transform:  translate(0px, 45px);   } 
  100%  { -ms-transform:  translate(0px, 0px);   } 
	}	

	/* 矢印 ↓*/	


.btnanime .btna{ 
  animation: arrow 3s linear; 
  animation-iteration-count: infinite; 
  -webkit-animation: arrow 3s linear; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -moz-animation: arrow 3s linear; 
  -moz-animation-iteration-count: infinite; 
  -o-animation: arrow 3s linear; 
  -o-animation-iteration-count: infinite; 
  -ms-animation: arrow 3s linear; 
  -ms-animation-iteration-count: infinite; 
		width:108px;
height:125px;
position: absolute; 
left: 100px; 
top: 10px;
    
    
}  
@keyframes arrow { 
	0%  { transform:  translate(0px, 0px);   } 
   20%   { transform: translate(50px, 0px) ;   }
   40%   { transform: translate(50px, -10px) ;   }
   60%   { transform: translate(0px, 20px) ;   }
  100%  { transform:  translate(0px, 0px);   } 	
} 
@-webkit-keyframes arrow { 
	0%  { -webkit-transform:  translate(0px, 0px);   } 
   20%   { -webkit-transform: translate(50px, 0px) ;   }
   40%   { -webkit-transform: translate(50px, -10px) ;   }
   60%   { -webkit-transform: translate(0px, 20px) ;   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 	
} 
@-moz-keyframes arrow {
	0%  { -moz-transform:  translate(0px, 0px);   } 
   20%   { -moz-transform: translate(50px, 0px) ;   }
   40%   { -moz-transform: translate(50px, -10px) ;   }
   60%   { -moz-transform: translate(0px, 20px) ;   }
  100%  { -moz-transform:  translate(0px, 0px);   } 	
		
	}
@-o-keyframes arrow {
	0%  { -o-transform:  translate(0px, 0px);   } 
   20%   { -o-transform: translate(50px, 0px) ;   }
   40%   { -o-transform: translate(50px, -10px) ;   }
   60%   { -o-transform: translate(0px, 20px) ;   }
  100%  { -o-transform:  translate(0px, 0px);   } 
	}
	
@-ms-keyframes arrow {
	0%  { -ms-transform:  translate(0px, 0px);   } 
   20%   { -ms-transform: translate(50px, 0px) ;   }
   40%   { -ms-transform: translate(50px, -10px) ;   }
   60%   { -ms-transform: translate(0px, 20px) ;   }
  100%  { -ms-transform:  translate(0px, 0px);   } 	
	}