@charset "utf-8";
/*--****************************************


trailer-cp

@common.css

*****************************************--*/
html,body{
	font-size:13px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing:1px;
	word-break: break-all;
	word-wrap: break-word;

	/*文字のアンチエイリアス設定*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;/*Firefox*/
}

body{
	background: #000;
	color: #fff;
}

img {
	-ms-interpolation-mode: bicubic;
	vertical-align:baseline;
}

#wrapper{
	width:100%;
	height:100%;
	min-width:1024px;
	display:block;
	position: relative;
	z-index: 2;
}

#sub-header{
	width: 100%;
	height: 252px;
	background: url(../img/common/sub_header_bg.png) repeat-x center center;
	text-align: center;
}


video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

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

@contents

-------------------------------*/
#contents{
	width: 980px;
	margin: 0 auto;
}


/*-------------------
@preloader
-------------------*/
#preloader {
	width:100%;
	height:100%;
	background:#000;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index:1000;
}


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

@SNS

-------------------------------*/
#social-container{
	
	display: flex;
	flex-wrap: wrap;
	display: -webkit-flex; /* Safari */
	-webkit-flex-wrap: wrap; /* Safari */

}

#social-container li{
	display:block;
	height:20px;
	padding:0 10px 0 0;
}

#social-container li:nth-last-child(1){
	padding:0;
}

#twitter{
}

#facebook-like{
	width:105px;
}

#line-btn{
	width:82px;
}

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

@flex

-------------------------------*/
.flex{
	display: flex;
	flex-wrap: wrap;
	display: -webkit-flex; /* Safari */
	-webkit-flex-wrap: wrap; /* Safari */
}

.flex-center{
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

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

@modules

-------------------------------*/
a{
}

a:hover{
}



.inner{
}

input[type="text"], button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


@media screen and (max-width: 980px) {

	#wrapper{
		width: 100%;
		min-width: 320px;
	}
	
	#contents{
		width: 94%;
		margin: 0 auto;
	}
	
	#sub-header{
		width: 100%;
		height: 120px;
		background: url(../img/common/sub_header_bg.png) repeat-x center center;
		text-align: center;
		background-size: auto 120px;
	}
	
	#sub-header img{
		height: 120px;
		width: auto;
	}



}