@charset "utf-8";

 /* stylelint-disable
selector-max-id,
selector-class-pattern,
declaration-no-important,
*/

/* ==========================================================
    introduction of function : mixi_game
========================================================== */

/* funcintro_mixi_game
---------------------------------------------------------- */

/* ----- main-settings ----- */
#bodyMainArea.funcintro_mixi_game{
width:945px;
float:none;
margin-right:auto;
margin-left:auto;
}


/* ----- local_parts ----- */
.cont_main .contents{
margin-bottom:30px;
padding:0;
overflow:hidden;
background:url(/img/func_intro/mixi_game/background_head001.gif) no-repeat 0 0;
}

.cont_main .contents .contentsBody{
padding:0;
overflow:hidden;
background:url(/img/func_intro/mixi_game/background_foot001.gif) no-repeat 0 100%;
}

.cont_main .contentsBody .header{
padding:0 0 5px;
background:url(/img/func_intro/mixi_point/dotline001.gif) repeat-x 0% 100%;
}

.cont_main .contentsBody .section{
padding:20px;
}

.cont_main .anchorBtn{
display:block;
text-indent:-99999px;
outline:0;
}

.caution{
position:relative;
top:-3px;
font-size:83%;
color:#f00;
}


/* ----- (1) titlebox ----- */
.cont_main .titlebox{
margin-bottom:25px;
height:57px;
background:url(/img/func_intro/mixi_game/title001.gif) no-repeat left top;
text-indent:-99999px;
}

/* ----- (2) introduction ----- */
#introduction .contentsBody .section{
min-height:168px;
background:url(/img/func_intro/mixi_game/image001.jpg) no-repeat 95% 20px;
}

#introduction .contentsBody .section .header{
margin:0;
padding:10px 0 0;
background:none;
}

#introduction .contentsBody .section .header h3{
height:24px;
background:url(/img/func_intro/mixi_game/head001.gif) no-repeat 0 0;
text-indent:-99999px;
}

#introduction .contentsBody .section .text{
margin:15px 34px;
width:472px;
height:58px;
background:url(/img/func_intro/mixi_game/read001.gif) no-repeat 0 0;
text-indent:-99999px;
}

#introduction .contentsBody .section .linkButton{
margin:0 34px;
width:262px;
}

#introduction .contentsBody .section .linkButton > a{
height:44px;
background:url(/img/func_intro/mixi_game/link_button001.gif) no-repeat 0 0;
}


/* ----- (3) enjoy ----- */
#enjoy .contentsBody .section .header{
padding-top:10px;
}

#enjoy .contentsBody .section .header h3{
height:29px;
background:url(/img/func_intro/mixi_game/head002.gif) no-repeat 0 0;
text-indent:-99999px;
}

#enjoy .contentsBody .section .oneData::after{
clear:both;
}

#enjoy .contentsBody .section .oneData li{
float:left;
}

/* ----- (3-1)サムネイル一覧 ----- */
#thumbnailArray,
.guestPlayArray{
margin:25px auto;
padding-left:22px;
width:864px;
min-height:241px;
}

#thumbnailArray li,
.guestPlayArray li{
padding-right:22px;
width:266px;
}

/* ----- (4) play ----- */
#play .contentsBody .section .header{
padding-top:10px;
}

#play .contentsBody .section .header h3{
height:27px;
background:url(/img/func_intro/mixi_game/head003.gif) no-repeat 0 0;
text-indent:-99999px;
}

#play .contentsBody .section .oneData{
margin:20px auto;
width:842px;
min-height:306px;
}

#play .contentsBody .section .oneData::after{
clear:both;
}

#play .contentsBody .section .oneData li{
float:left;
padding:0 10px;
width:260px;
}

#play .contentsBody .section .oneData li .image{
margin:0 auto;
width:256px;
}

#play .contentsBody .section .oneData li .text{
margin:15px 0;
min-height:40px;
}

#play .contentsBody .section .oneData li .linkButton{
width:256px;
}

#play .contentsBody .section .oneData li .linkButton > a{
height:52px;
}

#play .contentsBody .section .oneData li.step01 .linkButton > a{
background:url(/img/func_intro/mixi_game/link_button004.gif) no-repeat 0 0;
}

#play .contentsBody .section .oneData li.step02 .linkButton > a{
background:url(/img/func_intro/mixi_game/link_button005.gif) no-repeat 0 0;
}

#play .contentsBody .section .oneData li.step03 .linkButton > a{
background:url(/img/func_intro/mixi_game/link_button006.gif) no-repeat 0 0;
}

#play .contentsBody .section .linkButton{
margin:10px auto;
width:390px;
}

#play .contentsBody .section .linkButton > a{
height:52px;
background:url(/img/func_intro/mixi_game/link_button007.gif) no-repeat 0 0;
}


/* ----- (5) mobile ----- */
#mobile .contentsBody .section .header{
padding-top:10px;
}

#mobile .contentsBody .section .header h3{
height:27px;
background:url(/img/func_intro/mixi_game/head004.gif) no-repeat 0 0;
text-indent:-99999px;
}

#mobile .contentsBody .section .text,
#mobile .contentsBody .section .subtext{
margin:0 auto;
width:842px;
}

#mobile .contentsBody .section .text{
margin-top:20px;
padding:5px 0;
}

#mobile .contentsBody .section .subtext{
font-size:83%;
color:#666;
}

#mobile .contentsBody .section .oneData{
margin:20px auto;
width:842px;
min-height:180px;
}

#mobile .contentsBody .section .oneData::after{
clear:both;
}

#mobile .contentsBody .section .oneData li{
float:left;
padding:0;
overflow:hidden;
width:410px;
min-height:50px;
background:url(/img/func_intro/mixi_game/background_head004.gif) no-repeat 0 0;
}

#mobile .contentsBody .section .oneData li.forSmartPhone{
margin-right:18px;
}

#mobile .contentsBody .section .oneData li .image{
margin:15px auto;
width:333px;
}

#mobile .contentsBody .section .oneData li .text{
margin:0;
padding:0;
overflow:hidden;
width:410px;
min-height:49px;
line-height:49px;
text-align:center;
background:url(/img/func_intro/mixi_game/background_foot004.gif) no-repeat 0 100%;
}

#mobile .contentsBody .section .oneData li .text > img{
margin-right:20px;
}


/* ----- (5) guest ----- */
#guest .contentsBody .section .header{
padding-top:10px;
}

#guest .contentsBody .section .header h3{
height:27px;
background:url(/img/func_intro/mixi_game/head005.gif) no-repeat 0 0;
text-indent:-99999px;
}

#guest .contentsBody .section .text{
width:842px;
margin:20px auto 0;
padding:5px 0;
}

#guest .contentsBody .section .oneData::after{
clear:both;
}

#guest .contentsBody .section .oneData li{
float:left;
}










/* ----- SocialButtons ----- */
.socialButtons{
position:relative;
height:25px;
padding:0;
}

.socialButtons li{
position:absolute;
}

.socialButtons li.mixiCheck{
right:90px;
}

.socialButtons li.twitter{
top:3px;
right:0;
}

.socialButtons li.twitter iframe.twitter-share-button{
width:70px!important;
}




/* ----- EOF ----- */