@charset "utf-8";
/*------------------------------
【outrage3】

@common

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

	word-break: break-all;
	word-wrap: break-word;

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

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

#wrapper {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 1280px;

}

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

header

------------------------------*/
#header{
	width: 100%;
	min-width: 1280px;
	height: 65px;
	background: url(../img/common/header/bg_pt.png) repeat-x;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 100;
}


#header nav{
}


#header-navi{
	display: -weblit-flex;
	display: flex;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
}


.header-navi{
	color: #fff;
	font-size: 16px;
	font-family: "FOT-筑紫オールドゴシック Std B", "TsukuOldGothicStd-B";
	letter-spacing: 3px;
	padding: 17px 10px;
	cursor: pointer;
	white-space: nowrap;
}

.header-navi.active,.header-navi:hover{
	color: #e40073;
}


.header-navi:nth-child(7){
	margin-right: auto;
}


.header-navi.sns-icon{
	font-size: 26px;
	padding: 12px 10px;
}


#navi {
	margin: 0px auto 0;
	width: 360px;
}

#navi ul li {
	float: left;
	opacity: 0;
}

#navi ul li:nth-child(1) {
	width: 100%;
}

#navi ul li:nth-child(2), #navi ul li:nth-child(3) {
	margin: 0 0 3px;
}

#navi ul li p img {
	display: block;
}

#navi li p {
	cursor: pointer;
}

#navi ul li p img:hover {
    animation: shake 0.2s linear;
    -webkit-animation: shake 0.2s linear;
}

@keyframes shake {
    0% { transform: translate(3px, 2px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-1deg); }
    20% { transform: translate(-4px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-2px, 3px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(3px, 2px) rotate(-1deg); }
    80% { transform: translate(-2px, -2px) rotate(1deg); }
    90% { transform: translate(2px, 4px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}

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

contents

------------------------------*/
#contents {
	width: 100%;
	position: relative;
	z-index: 1;
	min-height: 650px;
	overflow: hidden;
}


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

footer

------------------------------*/
#footer {
	width: 100%;
	background: #000;
	position: relative;
	z-index: 2;
	padding: 0 0 20px 0;
}

#footer:after{
	content: "";
	display: block;
	width: 100%;
	height: 138px;
	background: url(../img/common/footer/bg.png) no-repeat top center;
	position: absolute;
	top: -138px;
	left: 0px;
	right: 0px;
}

#footer-inner{
	width: 980px;
	margin: 0 auto;
}

#footer-billing{
	padding: 0 0 20px 0;
	
}

#footer-billing2{
	padding: 0 0 15px 0;
	
}

.warner{
	margin: 0 0 0 10px;
}

.cc img{
	margin: 0 0 8px 0;
}

#footer-link{
	
}

#footer-link a{
	color: #e40073;
}



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

preloader

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

#preloader-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -115px;
	margin-left: -177.5px;
	width: 355px;
	height: 230px;
	text-align: center;
	z-index: 1;
}

#preloader-ttl {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	margin-top: 0px;
	margin-left: 0px;
	z-index:3;
}

#preloader-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 0px;
	margin-left: 0px;
	z-index: 2;
}

#preloader-anime {
	position: absolute;
	top: 115px;
	left: 310px;
	z-index: 3;
}

#progress-txt {
	display: block;
	position: absolute;
	top: 145px;
	left: 293px;
	width: 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #e63663;
	text-align: center;
	z-index: 4;
}

.loader {
	position: absolute;
	top: 200px;
	left: 50%;
	width: 100%;
}

.ball-clip-rotate-pulse > div:first-child {background: #ba9264;}
.ball-clip-rotate-pulse > div:last-child {border-color: #ba9264 transparent #ba9264 transparent;}


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

flash

------------------------------*/
#flash-container {
}


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

banner

------------------------------*/
#banner-container {
}

#banner-container li {
}


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

share

------------------------------*/
#social-container {
	display: flex;
	justify-content: center;
	padding: 10px 0;
}


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

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

#twitter {
}

#facebook-like {
}

#line-btn {
}


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

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 {
}


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

colorbox

------------------------------*/
#cboxOverlay {
	background: #000;
}

#cboxLoadedContent {
	padding: 0;
	background: #000;
}

#cboxContent {
	margin-top: 50px;
	border: 1px solid #d50078;
}

#cboxClose {
	top: -50px;
	width: 50px;
	height: 50px;
	background: url(../common/colorbox/images/close.png) no-repeat 0 0;
}

#cboxClose:hover {
    background-position: 0 -50px;
}


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

jscrollpane

------------------------------*/
.jspVerticalBar {width: 11px;}
.jspDrag {background: #d50078;}

.jspPane {
    position: absolute;
    width: 100% !important;
}


.pink{
	color:#e40073;
}