
body{
	background:#f8ab1d;
	font-size:12px;
	color:#401f05;
	width:100%;
	min-width:1000px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0px;
}

.head_box{
	width:100%;
	min-width:1000px;
	float:left;
	height:400px;
	background:url(img/head_bg.jpg);
	
}

.head_in{
	
	width:50%; float:right; height:350px; margin-right:10px; margin-top:40px; line-height:30px; font-weight:bold;	

}


.mini_box{

	width:21%;margin:0.5%;padding:0.5%; float:left; background:#ffda96; border:double 10px #401f05;
	font-weight:bold;

}



/*---------------------*/






.sample {
animation: anime1 5s  infinite alternate;

height:600px;
background:url(img/town.png) repeat-x #f8ab1d;


}

@keyframes anime1 {

100% {background-position: 100% 0;}

}


/**-------------*/


.gly li.move1 {
	position: absolute;
	animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear;
	-ms-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear;
	-webkit-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear;
	-moz-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear;
}
.gly li.move2 {
	position: absolute;
	animation: moveY 2s infinite alternate linear, moveX 5s infinite alternate linear;
	-ms-animation: moveY 2s infinite alternate linear, moveX 5s infinite alternate linear;
	-webkit-animation: moveY 2s infinite alternate linear, moveX 5s infinite alternate linear;
	-moz-animation: moveY 2s infinite alternate linear, moveX 5s infinite alternate linear;
	margin-top:100px;
}
 
 
.gly li.move3 {
	position: absolute;
	animation: moveY 2s infinite alternate linear, moveX 9s infinite alternate linear;
	-ms-animation: moveY 2s infinite alternate linear, moveX 9s infinite alternate linear;
	-webkit-animation: moveY 2s infinite alternate linear, moveX 9s infinite alternate linear;
	-moz-animation: moveY 2s infinite alternate linear, moveX 9s infinite alternate linear;
	margin-top:200px;
}


@keyframes moveY {
0% {top:0px;}
50% {	top:30px;}
100% {top:0px;}
}
 
@-ms-keyframes moveY {
0% {top:0px;}
50% {	top:15px;}
100% {top:0px;}
}
 

 
/*　横の動き　*/
@keyframes moveX {
0% {left:0px;}
100% {left:100%;}
}
@-ms-keyframes moveX{
0% {left:0px;}
100% {left:100%;}
}











/******************************
 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい
******************************/
.social-area-syncer
{
	width: 100% ;
	min-height: 190px ;
	/*background: #F5F1E9 ;	/* 背景色 */
	padding: 1.5em 0 ;
}

/* デスクトップPCでは高さを拡張する */
@media screen and ( min-width:480px )
{
	.social-area-syncer
	{
		min-height: 119px ;
	}
}

/******************************
 [ul]要素
******************************/
/* スマホ */
ul.social-button-syncer
{
	width: 238px ;
	margin: 24px auto ;
	padding: 0 ;
	border: none ;
	list-style-type: none ;
}

/* デスクトップ */
@media screen and ( min-width:480px )
{
	ul.social-button-syncer
	{
		width: 450px ;
	}
}

/******************************
 [li]要素
******************************/
ul.social-button-syncer li
{
	float: left ;
	text-align: center ;
	height: 71px ;
	margin: 0 8px ;
	padding:0 ;
}

/******************************
 各種ボタン
******************************/
/* [Twitter] */
.sc-tw
{
	width: 71px ;
}

/* [Facebook] */
.sc-fb
{
	z-index: 99 ;
	width: 69px ;
}

/* [LINE] */
.sc-li
{
	width: 50px ;
}

.sc-li-img
{
	border: none ;
	margin: 0 auto ;
	padding:0 ;
	width: 36px ;
	height: 60px ;
}

/* デスクトップPCではLINEボタンを表示しない */
@media screen and ( min-width:480px )
{
	.sc-li
	{
		display: none ;
	}
}



