/*プチゲーム　style.css */

/*
color_site:#EB8221;
color_text:#333333;
color_comment:#939393
---------------------
color_puzzle:#FFB782;
color_brain:#EFD018;
color_card:#9CC0FF;
color_action:#6FDD8E;
color_typing:#E682E8;

color_puzzle_text:#CE824E;
color_brain_text:#AD9B3E;
color_card_text:#5381C4;
color_action_text:#3CAF57;
color_typing_text:#A456A8;
---------------------
color_sub_red:#EA2824;
color_sub_green:#59C65F;
color_sub_blue:#2487EA;
color_sub_yellow:#F7C34D;
*/

@charset "utf-8";

/**
 * contents value css style
 */

/**
 * social icon css style
 */
.social { width:/*435px;*/260px; margin: 10px auto 0;}
.social div{ float:left;}
.social .twitter     { width:85px;}
.social .facebook    { width:112px; /**/line-height: 10px;}
.social .facebook .fb-like span{ width: 110px !important;}
.social .facebook .fb-like iframe{ width: 110px !important;}
.social .hatena      { width:60px;}
.social .mixi        { width:106px;}
.social .g-plus-one  { width:70px;}

/* social2 icon css style*/
.social2 { height:275px;}
.social2 div{ height:30px; padding-left: 7px;}
.social2 h2 {margin: 5px 0px 10px; margin-left: -3px;}


#value { width:calc( 100% - 330px); min-width:660px; float:left;}

#ad { position:relative; background:#fff; border:5px solid #eeeeee; width: 320px; float:right; padding:5px; overflow: hidden; margin-bottom: 10px;}
#ad .ads { margin-bottom: 15px;/* padding-bottom: 15px; border-bottom: 5px solid #EEEEEE;*/ }
/* #ad .ads.box1 {position: absolute; top: 2px; left: 140px; margin: 0; padding: 0px; border: 3px solid #ED8729;} -- 150px離すとき用 --*/
#ad .ads.box2 { background-color: #e5e5e5; padding: 0; border: 3px solid #e5e5e5; margin: 0 0 5px 0; }
#ad .ads-area { text-align: center; }
#ad #ads_bg {position: absolute; top: 2px; left: 132px; margin: 0; padding: 0px; }
#ad .interest {width:298px; border:1px solid #333333; background-color:#FFFFFF; margin-bottom:15px;}
#ad .interest a {text-decoration:none; color:#FD9868;}
#ad-text{ margin:auto; text-align:center; padding: 10px 0;}

div.ad_large { margin:10px 0;}


#ad_block2.new_ad { background-color: #000000; width: 100%; height: 100%;}
#ad_block2.new_ad .box {padding: 10px;background-color: #ffffff;}
#ad_block2.new_ad .new_ad_button {
	position: absolute;
    bottom: 20px;
	text-align: center;
    width: 150px;
	height: 40px;
    color: #fff;
    padding: 5px 0;
    background: -moz-linear-gradient(top, #F3C35D, #E9A719);
    background: -webkit-linear-gradient(top, #F3C35D, #E9A719);
    background: -o-linear-gradient(top, #F3C35D, #E9A719);
    background: linear-gradient(to bottom, #F3C35D, #E9A719);
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    border-radius: 4px;
	border:none;
	left: 0;
	right: 0;
	margin: auto;}

#ranking_wrap { position:relative; background:#fff; width: 320px; float:right; overflow: hidden;}



/**
 * game title css style
 */
#category-title{ width:100%; font-size:14px; color:#e56814; font-weight:bold;}
#category-title span {padding-left: 8px; color: #FFA366; font-size: 14px;}

#game-title { width:100%; color:#333333; font-weight:bold; text-align:center;font-size:18px; line-height: 45px; }

#game-content{ position:relative; max-width: 960px; margin: 0 auto; /*width: 640px; height: 480px;*/ }
#game-content-inner { /*display:none; */ text-align: center;}

/* 20170629 ゲーム表示エリアのｽﾞﾚ修正 */
/*
#game-content-inner #game-contents canvas,
#game-content-inner embed {width: 100%;}
*/
#game-contents {}
#game-content-inner embed { width: 640px; height: 480px; margin: 0 auto;}

/*ゲームローディング中の広告*/

/* 20160928 koike remove to backgroundimage*/
#game-content-ad { width: /*640px*/100%; height: 100%/*480px*/; position:absolute; /* background:url(../../images/site/game/game-content-ad-back.jpg) no-repeat;*/ margin: 0 auto;}
/* 20160624 渡辺 #game-content-ad のpositionをabsoluteに変更 */
/*#game-content-ad { border:1px solid #CCC; padding:1px; border-radius:2px; width:640px; height:480px; position:relative; background:url(../../images/site/game/game-content-ad-back.jpg) no-repeat;}*/

#game-content-ad .loading { position:absolute; top:415px;/* left:224px;*/  width: 100%; color:#FFF; text-align: center; font-size: 2em; text-align: bold;}
.blinking{
    -webkit-animation:blink 2.0s ease-in-out infinite alternate;
    -moz-animation:blink 2.0s ease-in-out infinite alternate;
    animation:blink 2.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*#game-content-ad #ad_block { position:absolute; top:72px; left:170px;}*/
/* 20160606　渡辺追加 */
#game-content-ad #ad_block, #game-content-ad #ad_block_free {
    position: relative;
    padding-top: 60px;
    /* left: 170px; */
    text-align: center;
}
#ad_block .box, #ad_block_free .box {
  position: relative;
  /*width: 336px;*/
  /*height: 300px;*/
  width: 352px;
  height: 316px;
  /*  background-color: #e5e5e5; */
  background-color: #fff;
  padding: 3px;
/*  border: 5px solid #e5e5e5; */
  border: 5px solid #fff;
  margin: 0 auto;
  text-align: left;
}
/*
#ad_block .box .sponsortext,
#ad_block_free .box .sponsortext {
  position: absolute;
  left:10px;
}
*/
#game-content-ad .banner_box { display:none;}/*不具合で表示されてしまうため*/

/*ゲームローディング中の広告*/
#instage_ad { position:absolute; top: 0; bottom: 0; left:0; right: 0; display:none; z-index:2; width: 640px; height: 250px; margin: auto;}
#instage_ad .banner_box { position:absolute; /*top:72px;*/ left:156px; display:none; height:250px;}
/* 20160527 外しました 渡辺 top:72px; width:300px; height:250px;*/
#instage_ad .loading { position:absolute; top:410px; left:224px;}

#game-frameworkArea{width:310px; height:482px; float:right;}
#category-title{
	width:635px;
	border-style:solid;
	border-width:0 0 2px 0;
	border-color:#F8CBAD;
	padding:5px 0px 0px 5px;
	font-size:22px;
}
.category-title2{
	font-size:16px !important;
	width:627px !important;
	/*border:none !important;*/
	/*border-radius:3px;*/
	/*border:1px solid #E6E6E6 !important;*/
	/*box-shadow: 0px 0px 2px #E6E6E6;*/
	padding:5px 0px 5px 10px !important;	
	border:none !important;
}
#value .game-banner-ad { float:left; width:468px; height:60px; margin:15px 0;}
#value .newgame{ float: right; margin:15px 5px 15px 0;} 
#howto .detail-box { background:#FFF; width:100%; font-size:12px; padding: 15px;}
#moregames .item { width:15%; float:left; margin: 0 2% 15px 0;}
#moregames .item_wrap .item:nth-of-type(6n){ margin-right: 0;}
#moregames .item a { display: block; }
#moregames .item p{	font-family:Verdana, Geneva, sans-serif; font-size:10px;
	color:#666; text-align:center; text-decoration:none; font-weight:normal;}
#moregames .item img { width: 100%; color:#E1771E; text-decoration:underline;}

#moregames .item img.icon_p_point {top: -10px; left: -10px; width: 40px !important; }
#moregames .item img.icon_new_game { width: 50px !important;}
#moregames .item img:hover {/*transform: rotate(5deg) scale(1.1);*/}

#moregames #missionToday .explain_text { font-size: 16px; font-weight: bold; margin-bottom: 20px;}
#moregames #missionToday .item_wrap .game_box { width: 19%; margin-right:1.25%;}
#moregames #missionToday .item_wrap .game_box:nth-of-type(5n){ margin-right: 0;}
#moregames #missionToday .item_wrap .game_box img.icon_p_point { top: -5px; left:-5px; right: auto; }


@media screen and (min-width: 1385px) {
	#moregames .item p { font-size: 12px; font-family: inherit;}
}

@media screen and (min-width: 1385px) {
}

/* jsゲーム用インステージ広告 20160616 渡辺追加 */
.game-content-ad2 .ad_block2 iframe {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

/* jsゲーム用インステージ広告 20160616 渡辺追加 end*/

#game-area { 
	border: 5px solid #EEEEEE;
	padding: 5px;
}
#game_info_wrap {
	border: 5px solid #EEEEEE;
	border-top: 0;
	padding:0 5px 5px;
	margin-bottom: 40px;
}
.p-game-fw-loading { width: 100% !important; height: 100% !important;}
.p-game-fw-loading .message p{ text-align: center;}

#howto { padding: 5px; }
.category_frame1 { background:#EFD018;}
.category_frame2 { background:#9CC0FF;}
.category_frame3 { background:#FFB782;}
.category_frame4 { background:#E682E8;}
.category_frame5 { background:#6FDD8E;}
#howto h3 { color: #FFF; font-size: 14px; line-height: 34px; margin-bottom: 5px;}
#howto h3 img { width: 34px; margin-right: 10px; vertical-align: middle;}

#howto .mission_box { background-color: #FFF; /*margin-top: 15px;*/ margin-bottom: 5px; padding: 15px;}
#howto .mission_box h3 { width: 100% !important; margin-bottom: 10px; line-height: 0;}
#howto .mission_box h3 img { width: 100% !important;}
#howto .mission_box p.catch_text { color: #EB8221; font-size: 20px; margin-bottom: 5px; line-height: 40px;}
#howto .mission_box p.catch_text img { width: 40px; vertical-align: top; }
#howto .mission_box > ul { font-size: 16px;}
#howto .mission_box > ul > li { background-image: url(../../images/site/common/icon_mission.svg); background-repeat: no-repeat; background-size: 30px 30px; margin-bottom: 15px; padding-left: 34px; padding-top: 5px;}
#howto .mission_box ul li.terms { background-image: url(../../images/site/game/icon_mission_terms.svg);}
#howto .mission_box > ul > li >ul.norma_box li { line-height: 20px; margin-bottom: 5px;}
#howto .mission_box > ul > li >ul.norma_box li img { width: 20px; height: 20px; vertical-align: top;}


/*
.mission_box ul li.clear { background-image: url(../../images/site/game/icon_mission_clear.svg);}
.mission_box ul li.no_clear { background-image: url(../../images/site/game/icon_mission_no_clear.svg);}
*/
/**
 * disable-js css style
 */
.disable-js { width:644px; color:#FF0000; text-align:center; margin:10px 0;}
.disable-js .inner { padding:10px;}

.no_flash { width:644px; color:#FF0000; text-align:center; margin:10px 0; display:none;}
.no_flash .inner { padding:10px;}

/*qrcode*/
.qrcode_box { padding: 15px; background-color: #FFF; margin-bottom: 5px;}
.qrcode_box .qrcode_data canvas { vertical-align: bottom; } 
.qrcode_box img { vertical-align: bottom; }


.recommend_box {}
.recommend_box .cnt_title { margin-bottom: 0; }
.recommend_box .cnt_title h3 { line-height: 40px; }
.recommend_box .cnt_title img { width: 40px; height: 40px; margin-right: 10px;}
.recommend_box .inner { margin-bottom: 5px; border-bottom: 1px solid #eeeeee;}
.recommend_box .inner .explain_box { width: 96px; float: left; margin-right: 6px; box-sizing: border-box; border-radius: 4px;}
.recommend_box .inner .explain_box:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(235,131,33,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(235,131,33,1);
  box-shadow: 0px 0px 10px 0px rgba(235,131,33,1);
}
.recommend_box .inner .explain_box a { display: inline-block; padding: 3px 6px;}
.recommend_box .inner .explain_box img { width: 83px; height: 66px; vertical-align: bottom;}

.recommend_box .inner .cnt_box { width: 96px; float: left; margin-right: 6px; margin-bottom: 10px;}
.recommend_box .inner .cnt_box:nth-of-type(3),
.recommend_box .inner .cnt_box:nth-of-type(6) { margin-right: 0;}

.recommend_box .inner .cnt_box img { width: 100%; vertical-align: bottom;}
.recommend_box .inner .cnt_box a { display: inline-block; width: 100%; }
.recommend_box .inner .cnt_box a h4 { width:100%; padding: 0 2px; position: absolute; bottom: 0; color: #FFF; background-color:#EB8221;  font-size: 11px; line-height: 20px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.recommend_box .inner .cnt_box a:hover h4 { color: #FFF !important;}
.recommend_box > .explan_box { line-height: 24px; margin-bottom: 5px; text-align: right;}
.recommend_box > .explan_box img { width: 24px; vertical-align: bottom;}


/*
.recommend_box .inner { margin-bottom: 5px; border-bottom: 1px solid #eeeeee;}
.recommend_box .inner .cnt_box { width: 100%; float: none; padding: 10px 10px 0 5px;}
.recommend_box .inner .cnt_box a img { width: 85px; float: left; margin-right: 5px;}
.recommend_box .inner .cnt_box a h4 { width: calc(100% - 90px); float: left; font-weight: bold; padding: 3px 0; font-size: 13px;}
*/
/*
.recommend_box .inner .cnt_box a p { width: calc(100% - 90px); height: auto!important; font-size: 12px;}
*/
.recommend_box .inner .cnt_box a img.icon_p_point { width: 20px !important; height: 20px; top: -5px; left: -5px; right: auto; margin-right: 0;}
.recommend_box .inner .cnt_box a img.icon_new_game { left: 65px; top: 0; right: auto; width: 30px !important;}
.recommend_box .inner .cnt_box a img.cnt_play { top: 0; left: 0px;}