@charset "utf-8";


/*全体の設定
---------------------------------------------------------------------------*/
body {
	color: #000;	/*全体の文字色*/
	font: 14px/1.75 sans-serif,serif,"Hiragino Mincho ProN","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ;	/*文字サイズ、行間、フォント指定*/
	padding:0;
	margin: 0px;
	background: #000000;
}
p{
padding:0;
margin:0;
}

ul{
	list-style-type: none;
}
img {
	border: none;
}


/*ヘッダーブロック
---------------------------------------------------------------------------*/
header{
	border-top:5px solid #000/*#1e1b22*/;
	background: rgba(99,99,99,1);
	background: linear-gradient(to right, rgba(99,99,99,1) 0%, rgba(115,115,115,1) 18%, rgba(36,36,36,1) 42%, rgba(36,36,36,1) 63%, rgba(133,133,133,1) 79%, rgba(23,23,23,1) 100%);
}
h1.head_logo{
	max-width:1000px;
	width:100%;
	margin:0 auto;
	vertical-align:middle;
	text-align:center;
}
h1.head_logo img{
	max-width:279px;
	width:100%;
	vertical-align:middle;
}

/*コンテンツ背景設定（）
---------------------------------------------------------------------------*/
.wrap {
	width:100%;
	text-align: center;
	/*max-width: 1200px;*/
	width: 100%;
	margin:0 auto;

}



/*メインコンテンツ（main,sub）
---------------------------------------------------------------------------*/
.main {
	width:100%;
	text-align: center;
	color: #FFF;	
	height: 0;
	padding-top: 58.66%;/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	max-width: 1200px;
	width: 100%;
	margin:0 auto;
	background-size:cover;
}

.main_img_wrap{
	margin:0 auto;
	display:flex;
	justify-content:space-around;
	align-items:center;
}

.main_left{
	max-width: 414px;
	width: 100%;
	}
.main_right{
	max-width: 500px;
	width: 100%;
	display:block;
}


.sub_contents{
	max-width: 1000px;
	width: 100%;
	margin:60px auto;
	/*background: #fff000;*/
}
.banner_wrap{
	display:flex;
	justify-content:space-around;
	align-items:center;
}



/*マウスオン時の設定*/
a:hover img{
	filter: alpha(opacity=80);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=80)";  /* ie 8 */
	-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8;              /* Safari 1.x */
	opacity:0.8;

}
.img-responsive{
	width:100%;
}
@media screen and (max-width: 1024px){
.img-responsive{
width:90%;
}
.sub_contents{
	margin:30px auto;
}
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	text-align: center;
	color: #FFF;	
	background: url('../images/footer_bg.jpg') no-repeat;
	height:80px;
	/*max-width: 1200px;*/
	width: 100%;
	margin:0 auto;
	background-size:cover;
}



/*その他
---------------------------------------------------------------------------*/

.example {
	position: relative;
}

.example .fa {
	position: absolute;
	top: 40%;
	left: 40%;
	-ms-transform: translate(-30%,-30%);
	-webkit-transform: translate(-30%,-30%);
	transform: translate(-30%,-30%);
	margin:0;/*余計な隙間を除く*/
	padding:0;/*余計な隙間を除く*/
}

.example img {
	width: 100%;
}










/* ============================================================================================== 

================================================================================================= */


header , footer{
	display:block;
	position:relative;
	z-index:5;
}
.zindex_top{
	z-index:5;
	}


@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
	from {background-position:0 0;}
	to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
	from {background-position: 0;}
	to {background-position:10000px 0;}
}

.stars, .twinkling{
	position:absolute;
	top:0px;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	display:block;
}

.stars {
	background:#000 url(../images/stars.png) repeat top center;
	z-index:0;
}

.twinkling{
	background:transparent url(../images/twinkling.png) repeat top center;
	z-index:0;
	-moz-animation:move-twink-back 200s linear infinite;
	-ms-animation:move-twink-back 200s linear infinite;
	-o-animation:move-twink-back 200s linear infinite;
	-webkit-animation:move-twink-back 200s linear infinite;
	animation:move-twink-back 200s linear infinite;
}