@charset "UTF-8";

/* *****************************************************************************************************
*
*  top.css
* 
* -------------------------------------------------------------------------------------
* 
*   ---- FONT-SIZE -----
*	
*	 9px	69%			|		18px	138.5%
*	10px	77%			|		19px	146.5%
*	11px	85%			|		20px	153.9%
*	12px	93%			|		21px	161.6%
*	13px	100%		|		22px	167%
*	14px	108%		|		23px	174%
*	15px	116%		|		24px	182%
*	16px	123.1%		|		25px	189%
*	17px	131%		|		26px	197%
*
*
***************************************************************************************************** */

/* ============================================================
	
	#mvArea
	
   ============================================================ */
#mvArea {
	margin-top:45px;
	display:block;
	position:relative;
	z-index:0;
	width:100%;
}
#mvArea a, #mvArea .slides li img { display:block; }
#mvArea .mvTxt {
	display:block;
	position:absolute;
	top:32%;
	left:8%;
	z-index:999;
	width:85%;
	color:#FFF;
	text-align:center;
}
#mvArea .mvTxt p {
	font-weight:bold;
	margin-bottom:5%;
	font-size:69%;
}
#mvArea .mvTxt h2 a {
	border:2px #FFF solid;
	padding:4px 0;
	text-decoration:none;
	color:#FFF;
	font-size:100%;
	text-decoration:none;
}
#mvArea .mvTxt h2 a:hover { background-color:rgba(255,255,255,0.2); }
.flexslider {
	border: 0;
	@include box-shadow(black 0 0 0);
}
.flex-direction-nav { display:none !important; }

/* manualControls */
.flex-control-nav { bottom:-16%; }
.flex-control-nav li { margin: 0 3.3333%; position: relative; }
.flex-control-nav li a {
	width: 11px;
	height: 11px;
	display: block;
	background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
	cursor: pointer;
	text-indent: -9999px;
	border-radius: 20px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;

}
.flex-control-nav li a:hover {
	background: #333;
	background: rgba(0,0,0,0.7);
}
.flex-control-nav li.flex-active a {
	background: #000;
	background: rgba(0,0,0,0.9);
	cursor: default;
}
#eventTab li, #eventTab div { position: relative; }
.flex-control-nav li.new::after, #eventTab li.new::after, #eventTab div.new::after {
    content: 'NEW!';
    background-color: rgba(227,0,53,1);
    color: #fff;
    font-size: .5rem;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    width: 40px;
    line-height: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: -5px;
    animation: new .25s infinite;
    text-align: center;
}
@keyframes new { 50% { background-color: rgba(255,30,127,1.00); } }
@media (max-width: 767px) { #eventTab li.new::after, #eventTab div.new::after { display: block; transform: scale(0.64,0.64); bottom: 1.5rem; } }

#topEvent h2.col.span_2 .new { background-color: rgba(227,0,53,1); color: #fff; font-size: .64rem; font-family: 'Arial', sans-serif; font-weight: bold; padding: 3px 5px; margin-left: 5px; line-height: 30px; vertical-align: text-top; }

@media all and (orientation: landscape) {
	.flex-control-nav { bottom:-10%; }
	#mvArea .mvTxt p { font-size:100%; }
	#mvArea .mvTxt h2 a {
		font-size:138.5%;
		width:70%;
		margin:0 auto;
	}
}

@media (max-width:767px) {
	.flex-control-nav { display: none; }
}

/* ============================================================
	
	#mvBox
	
   ============================================================ */
#mvBox { position:relative; }


/* ============================================================
	
	#loading
	
   ============================================================ */
#loading {
	position:relative;
	z-index:1;
	left:0;
	top:0;
	text-align:center;
	margin:0 auto;
}

#loading img { width:100%; height:100%; display:block; }

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

	#mainContents

   ============================================================ */
#mainContents { padding-top:0; }

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

	#topMain

   ============================================================ */
#topMain {
	padding:0 3.125%;
	margin:13% 0 4.6875%;
}
#topMain h2 { margin-bottom:5%; }
#topMain h2 img { width:92%; }
#topMain h2 + p {
	font-size:93%;
	font-weight:bold;
	line-height:1.6;
}
#topMain h2 + p span, .eMessage span { display:inline; }
.eMessage {
	font-size:69%;
	margin-top:3.125%;
	line-height:1.6;
}
@media all and (orientation: landscape) {
	#topMain { margin:9% 0 4.6875%; }
}

#recruitBnr { text-align: center; background-color: #0044cc; animation: attenBG .5s infinite; }
#recruitBnr a { color: #fff; font-weight: bold; line-height: 2.75rem; font-size: 1rem; letter-spacing: 2px; text-decoration: none; animation: atten .5s infinite; display: block; }
@keyframes atten { 50% { text-shadow: 0px 0px 16px rgba(136,255,255,.2); color: #def; } }
@keyframes attenBG { 50% { background-color: #003CB6; } }

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

	#topEvent

   ============================================================ */
#topEvent {
	padding:4.6875% 3.125% 0;
	margin-bottom:5%;
	background:url(../images/info_bg.jpg) 0 0 repeat-x;
}
#topEvent h2 {
	font-size:146.5%;
	margin-bottom:3.90625%;
}
.refine { display:none; }
#eventTab { margin-bottom:3.90625%; display: flex; justify-content: space-between; }
#eventTab li, #eventTab > div {
	background-color:#EBEBEB;
	border:1px solid #EBEBEB;
	height:30px;
	font-size:63%;
	line-height:1.25;
	color:#333;
	font-weight:bold;
	display:flex;
    align-items: center;
    justify-content: center;
}
.eventTabBox li.evenTabIn { width: 100%; }
#eventTab > div {
    width: calc( ( 100% - 30px ) / 6 );
    text-align: center;
}
#eventTab > div a { text-decoration: none; color: #333; }
#eventTab li span, #eventTab div span { display:block; }
#eventTab li p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#eventTab li:last-child {
}
#eventTab li:hover {
	color:#FFF;
	background-color:#999;
	border-color:#999;
}
#eventTab li.active {
	border:1px solid #999;
	background:none;
	color:#333;
}
.tabCont.hide { display:none; }
#loadarea li.col.span_4 { margin-bottom:5%; }

#loadarea li { position: relative; }
#loadarea li::after { font-size: .5rem; padding: 4px 10px; position: absolute; top: 0; left: 0; color: #fff; font-weight: bold; text-shadow: 0 0 2px rgba(0,0,0,.5); }
#loadarea li.spTool::after { content: 'SPツール'; background-color: rgba(0,0,0,.4); }
#loadarea li.charactorEv::after { content: 'キャラクターショー'; background-color: rgba(0,0,0,.4); }
#loadarea li.campaignOp::after { content: 'キャンペーン運用業務'; background-color: rgba(0,0,0,.4); }
#loadarea li.premiumEv::after { content: 'プレミアムイベント'; background-color: rgba(0,0,0,.4); }

@media (max-width: 374px) { #eventTab li p { transform: scale(0.8,0.8); white-space: nowrap; } }

/* mosaic.css */
.pcEventImg { display:none; }
.mosaic-block {
	width:100%;
	height:200px;
	margin:0;
	background:none;
	border:none;
	float:none;
}
.mosaic-backdrop {
	background:none;
	display:block;
}
.mosaic-backdrop img { width:100%; }
.mosaic-overlay {
	display:block;
	bottom:-83%;
	height:100%;
	background-color:rgba(255,255,255,0.75);
	color:#333;
	opacity:1;
	text-decoration:none;
	text-align:center;
}
/*#pc .col.span_4:hover .bar2 .mosaic-overlay { background-color:rgba(255,255,255,0.85); }*/
.mosaic-overlay h3 { padding:3.3333% 0; }
/*#pc .col.span_4:hover .bar2 .mosaic-overlay h3 { padding:8% 0 3.5%; }*/
.mosaic-overlay p {
	padding:0 3.125%;
	font-weight:bold;
	font-size:77%;
	line-height:1.7;
	text-align:left;
}
.ajax_loading {
	width:32px;
	display:none;
	margin:0 auto;
}
.eventLink {display:none;}
.loadmore a, .pageTransition a, .eventLink a {
	display:block;
	width:100%;
	margin:0 auto;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	font-size:85%;
	line-height:250%;
}
.loadmore a {
	text-align:center;
	background-color:#727BA1;
}
.loadmore a:hover, .pageTransition a:hover, .eventLink a:hover { opacity:0.8; }
.pageTransition a {
	background-color:#727BA1;
	background-image:url(../images/arrow_eventpage.png);
	background-position:80% 50%;
	background-size:2%;
	background-repeat:no-repeat;
	padding-left:18%;
}

.eventLink a {
	text-align:center;
	background-color:#727BA1;
}

@media all and (orientation: landscape) {
	.loadmore a, .pageTransition a, .eventLink a { width:70%; }
	.pageTransition a {
		background-position:75% 50%;
		padding-left:17%;
	}
}

.eventHide { display:none !important; }

@media all and (orientation: landscape) {
	.mosaic-overlay h3 { padding:1.6667% 0; }
}

/* MixItUp */
#loadarea .mix {
	display: none;
	opacity: 0;
	/*width: 200px;
	vertical-align: top;
	margin-bottom: 20px;
	background: #ccc;
	color: #fff;
	font-size: 30px;
	text-align: center;
	line-height: 200px;*/
}
#loadarea .gap {
	display: inline-block;
	/*width: 200px;*/
	width:23.5%;
}


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

	#topInfo

   ============================================================ */
#topInfo a:hover img, #topEco a:hover img { opacity:0.8; }  
 
#topInfo {
	padding:6% 3.125% 0;
	margin-bottom:6%;
	background:url(../images/info_bg.jpg) 0 0 repeat-x;
}
#topInfo h2 {
	font-size:146.5%;
	margin-bottom:3.90625%;
}
#topInfo .span_9 li { border-top:1px #D5D5D5 solid; }
#topInfo dl { padding:3.125% 0 3% 0; }
#topInfo .span_9 a {
	display:block;
	text-decoration:none;
	color:#333;
	background:url(../images/sp_info_li.png) 96% 50% no-repeat;
	background-size:8px 16px;
}
#topInfo .span_9 a:hover {
	background:url(../images/sp_info_li_hv.png) 96% 50% no-repeat;
	background-size:8px 16px;
	color:#727BA1;
}
#topInfo .span_9 {
	border-bottom:1px #D5D5D5 solid;
	margin-bottom:6%;
}
#topInfo dl dt { padding:3.125% 0 3% 0; }
#topInfo dl dd { padding:0 8% 3.125% 0; line-height: 1.5; }
#topInfo dl dd p { margin-bottom: 5px; }
#topInfo .new { background-color: rgba(202,28,31,1.00); color: #fff; padding: 5px 10px 4px; border-radius: 3px; margin-right: 6px; }
#topInfo .pvMark img {
	width:10.9375%;
	margin:0 auto 2%;
}
#topInfo .pvMark {
	text-align:center;
	font-size:69%;
	line-height:1.5;
}
@media all and (orientation: landscape) {
	#topInfo dl dt { padding:1.6667% 0; }
	#topInfo dl dd { padding:0 8% 1.6667% 0; }
}

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

	#topEco

   ============================================================ */
#topEco {
	padding:6% 3.125% 3.9062%;
	background:url(../images/sp_eco_bg.jpg) 0 0 no-repeat;
	background-size:cover;
}
#topEco h2 {
	font-size:146.5%;
	margin-bottom:3.90625%;
}
#topEco div.col.span_8 {
	margin-bottom:10px;
	font-weight:bold;
	line-height:1.5;
}
#topEco div.col.span_8 p {
	font-size:85%;
	margin-bottom:3.90625%;
}
#topEco div.col.span_8 ol {
	font-size:77%;
	padding-left:6.25%;
}
#topEco div.col.span_8 ol li { list-style:decimal outside; }
#topEco div.col.span_4 {
	text-align:right;
	font-weight:bold;
}
#topEco .signature {
	font-size:77%;
	line-height:1.7;
}
.ecoImg {
	margin:3.125% 0 0 auto;
	width:63.125%;
}
.ecoImg ul li { line-height:0; }
.ecoImg ul li:first-child {
	width:40.5940%;
	float:left;
	margin-right:3.125%;
}
.ecoImg ul li:last-child {
	width:54.4554%;
	float:right;
}
footer {
    padding-bottom: 100px;
}
@media (max-width: 677px) {
    footer {
        padding-bottom: 60px;
    }
}