@charset "UTF-8";


/* //////////////////////////////////////////////////
[font] 
////////////////////////////////////////////////// */
@font-face {
    font-family: 'jsdoitSymbols';
    src: url('/fonts/jsdoitSymbols.eot');
    src: local('jsdoitSymbols'),
         url('/fonts/jsdoitSymbols.woff') format('woff'),
         url('/fonts/jsdoitSymbols.ttf') format('truetype'),
         url('/fonts/jsdoitSymbols.svg#jsdoitSymbols') format('svg');
}

/* //////////////////////////////////////////////////
[Helper Classes] 

HTML5Boilerplateから引用
<https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css>
////////////////////////////////////////////////// */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}
.hidden {
    display: none !important;
    visibility: hidden;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.invisible {
    visibility: hidden;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* //////////////////////////////////////////////////
[Base] 
////////////////////////////////////////////////// */

/* --------------------------------------------------
    0. Resetting default margin and padding
-------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code, p,
blockquote, th, td, form, fieldset, legend,
article, section, aside, header, footer, nav {
    margin: 0;
    padding: 0;
}
article, section, aside, header, footer, nav {
    display: block;
}


/* --------------------------------------------------
    1. HTML, Body, Anchor
-------------------------------------------------- */
html {
    overflow-y: scroll;
    height: 100% !important;
}
body {
    background: white;
    color: #404040;
    font-family: Myriad, Helvetica, Arial, "Meiryo", "メイリオ", "微软雅黑", "LiHeiPro", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}
body.zh_cn {
    font-family: Myriad, Helvetica, Arial, "微软雅黑", "Hiragino Sans GB","Hiragino Sans GB W3", sans-serif;
}
a:link {
    color: #C00;
    text-decoration: none;
}
a:visited {
    color: #C66;
    text-decoration: none;
}
a:hover,
a:active  {
    text-decoration: underline;
}
.user a:link {
    color: #F00;
}

/* --------------------------------------------------
    2. Heading, Paragraph
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    line-height: 1.2;
}

/* --------------------------------------------------
    3. List
-------------------------------------------------- */
li { list-style: none; }

/* --------------------------------------------------
    4. Table
-------------------------------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
    font-family: inherit;
}
caption, th, td {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

/* --------------------------------------------------
    5. Form
-------------------------------------------------- */
fieldset { border: none; }

input, textarea, select, label {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 100%;
    font-family: inherit;
    vertical-align: middle;
}
input[type="text"] {
    padding: 2px 3px;
    border: none;
    background: #E4E4E4;
}
input[type="text"]:focus {
    background: #F0F0F0;
}
.input-prompt {
    color: #999;
}

textarea {
    padding: 2px 3px;
    border: none;
    background: #E4E4E4;
}
textarea:focus {
    background: #F0F0F0;
}
label { cursor: pointer; }

textarea { overflow: auto; }

/* --------------------------------------------------
    6. Other
-------------------------------------------------- */
img {
    border: none;
    vertical-align: bottom;
}
object {
    vertical-align: middle;
    outline: none;
}
em, strong {
    font-weight: bold;
    font-style: normal;
}
abbr, acronym {
    border: none;
    font-variant: normal;
}
q:before, q:after { content: ''; }

address, caption, cite, code, dfn, var {
    font-weight: normal;
    font-style: normal;
}
code, pre { font-family: monospace; }

sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

hr { display: none; }

/* ------------------------------------------------------------
    7. For IE6/7
------------------------------------------------------------ */

/* --- for IE7: page zoom bug fix --- */
*:first-child+html body,
*:first-child+html br { letter-spacing: 0; }

/* //////////////////////////////////////////////////
[Layout] 
////////////////////////////////////////////////// */

/* --------------------------------------------------
    0. Container
-------------------------------------------------- */
#container {
    text-align: left;
}

#body {
}

.layoutWideContainer{
    width: 100%;
}

.layoutContainer{
    width: 950px;
    margin: auto;
}

#body > .layoutContainer:first-child,
.layoutWideContainer + .layoutContainer,
#headerGlobal + .layoutContainer{
    margin-top: 25px;
}

#container > .layoutContainer:last-child {
    margin-bottom: 50px;
}

/* --------------------------------------------------
    1. Header
-------------------------------------------------- */
#headerGlobal {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    min-width: 950px;
    position: relative;
}

#headerGlobal .main{
    background: url(/img/common/bg_header_texture_01.png) 50% 0 repeat-x #1d1d1d;
    border-top: 1px solid #787878;
}

#headerGlobal .sub{
    background: #6a6a6a;
    border-bottom: 1px solid #333;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    box-shadow: 0 -3px 8px rgba(0,0,0,.1) inset;
}

/* pr
----------------------------------- */
#headerGlobal .pr {
    float: left;
    font-size: 11px;
    line-height: 20px;
}

#headerGlobal .pr a {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #ddd;
    max-width: 470px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#headerGlobal .pr a:hover {
    color: #fff;
}

#headerGlobal .pr a:before {
    content: "PR";
    background: #000;
    padding: 1px 4px;
    margin-right: 3px;
    font-size: 9px;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(255,255,255,.5) inset;
}

#headerGlobal .pr a:hover {
    text-decoration: none;
}

/* navGlobal
----------------------------------- */
#navGlobal{
    float: right;
}

#navGlobal li{
    float: left;
    padding: 1px 0;
}

#navGlobal li a{
    font-size: 11px;
    line-height: 18px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-left: 5px;
    color: #fff;
    padding: 0 8px;
    border-radius: 2px;
}

#navGlobal li a:hover {
    text-decoration: none;
    background: #222;
    box-shadow: 0 -1px 0 rgba(255,255,255,.5) inset;
}

/* siteName
----------------------------------- */
#siteName {
    float: left;
    margin-right: 20px;
}

/* userActivity
----------------------------------- */
#headerGlobal .userActivity {
    position: relative;
    z-index: 100;
    border-left: 1px solid #333;
    border-right: 1px solid #666;
}
#headerGlobal .userActivity .count {
    position: relative;
    z-index: 103;
    display: inline-block;
    padding: 7px 7px;
    border-left: 1px solid #666;
    border-right: 1px solid #333;
    *display: inline;
    *zoom: 1;
}
#headerGlobal .userActivity .count a {
    display: block;
    background: #eee;
    font-size: 85%;
    color: #999;
    line-height: 25px;
    min-width: 20px;
    height: 25px;
    padding: 0 2px;
    vertical-align: middle;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 1px 1px rgba(0, 0, 0, .75) inset;
    -moz-box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 1px 1px rgba(0, 0, 0, .75) inset;
    -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 1px 1px rgba(0, 0, 0, .75) inset;
    border-radius: 3px;
    background:#000;
    color: #fff;
    cursor: pointer;
}
#headerGlobal .userActivity .count a:hover {
    text-decoration: none;
}
#headerGlobal .userActivity .count a.unread {
    background: #AE0202;
}
.xmas #headerGlobal .userActivity .count a.unread {
    background: #094;
}
#headerGlobal .userActivity div{
    position: absolute;
    z-index: 1000;
    top: 30px;
    right: -35px;
    padding: 5px 20px 20px 20px;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    transition-timing-function: ease-in;
    -moz-transition-property: opacity, visibility;
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: opacity, visibility;
    -webkit-transition-duration: .1s;
    -webkit-transition-timing-function: ease-in;
}
#headerGlobal .userActivity ul{
    background: #fff;
    width: 280px;
    font-weight: normal;
    padding: 5px 0 0;
}
#headerGlobal .userActivity:hover div{
    visibility: visible;
    opacity: 1;
}
#headerGlobal .userActivity:hover div.inactive{
    display: none;
}
#headerGlobal .userActivity ul li{
    padding: 10px 15px;
    border-bottom: 1px dotted #ccc;
    overflow: hidden;
    zoom: 1;
    font-size: 85%;
    line-height: 1.75;
}

#headerGlobal .userActivity ul li:hover{
    background: #fcfcfc;
}

#headerGlobal .userActivity ul li a{
    color: #C00;
    text-decoration: none;
}

#headerGlobal .userActivity ul li a:hover{
    text-decoration: underline;
}

#headerGlobal .userActivity ul li.more{
    border: none;
    text-align: right;
    padding: 0;
}

#headerGlobal .userActivity ul li.more a{
    padding: 5px 15px;
    display: block;
    text-decoration: none;
    color: #404040;
    border-radius: 0 0 6px 6px;
}

#headerGlobal .userActivity ul li.more a:hover{
    text-decoration: none;
}


#headerGlobal .userActivity ul li .imgActivity{
    float: left;
    margin-right: 8px;
}

#headerGlobal .userActivity ul li .target{
    text-overflow: ellipsis;
    overflow: hidden;
    zoom: 1;
    white-space: nowrap;
}

#headerGlobal .userActivity ul li .action{
    overflow: hidden;
    zoom: 1;
}

/* btnHeaderCodeNew
----------------------------------- */
#btnHeaderCodeNew {
    line-height: 30px;
    float: left;
}

#btnHeaderCodeNew input{
    line-height: 40px;
    margin-right: 15px;
    cursor: pointer;
    height: 40px;
    width: 170px;
    border: none;
    outline: none;
    border-right: 1px solid rgba(0,0,0,.1);
    margin-top: -1px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    font-size: 15px;
    font-weight: bold;
    display: block;
    text-align: center;
    padding-left: 35px;
    background: url(/img/common/btn/btn_add_01.png) 0 0 no-repeat;
}

#btnHeaderCodeNew input:hover{
    background: url(/img/common/btn/btn_add_01.png) 0 -40px no-repeat;
}

/* navGlobalSearch
----------------------------------- */
#navGlobalSearch{
    float: left;
    position: relative;
    z-index: 1;
}

#navGlobalSearch .query{
    display: block;
    float: left;
    border-radius: 3px 0 0 3px;
    background: url(/img/common/ico/ico_arow_w_d_2.png) 173px 50% no-repeat #000;
    font-size: 12px;
    line-height: 1;
    margin: 6px 1px 0 0;
    padding: 6px 10px 5px 10px;
    width: 165px;
    box-shadow: 0 -1px 1px rgba(255,255,255,.275) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255,255,255,.275) inset;
    -webkit-box-shadow: 0 -1px 1px rgba(255,255,255,.275) inset;
}
#navGlobalSearch .query:hover {
    background-color: #050505;
}
#navGlobalSearch .query:focus {
    outline: none;
    background-color: #111;
    color: #fff;
}

#navGlobalSearch .button{
    cursor: pointer;
    display: block;
    float: left;
    background: url(/img/common/btn/btn_search_01.png) 0 0 no-repeat;
    width: 30px;
    height: 27px;
    border: none;
    margin-top: 6px;
}

/* headerAccount
----------------------------------- */
#headerAccount{
    float: right;
    font-size: 12px;
}

#headerAccount .column{
    float: left;
    line-height: 39px;
    position: relative;
    margin-left: 10px;
}

#headerAccount .column.userName{
    text-align: right;
    text-shadow: 0 1px 0 #000;
}

#headerAccount .column.userName:hover{
    /*min-width: 130px;*/
}

#headerAccount .column img{
    vertical-align: middle;
    margin-right: 7px;
}

#headerAccount .column a{
    color: #fff;
}

#headerAccount .column a:hover{
    text-decoration: none;
}

#headerAccount .navGlobalSub{
    text-shadow: none;
    position: absolute;
    z-index: 1000;
    top: 30px;
    right: -43px;
    width: 170px;
    line-height: 1;
    padding: 5px 20px 20px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    transition-timing-function: ease-in;
    -moz-transition-property: opacity, visibility;
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: opacity, visibility;
    -webkit-transition-duration: .1s;
    -webkit-transition-timing-function: ease-in;
}

#headerAccount .navGlobalSub .shadowLayor1{
    padding: 8px 0;
    position: relative;
    z-index: 1;
}

#headerAccount .navGlobalSub .shadowLayor1:before {
    content: "";
    background: url(/img/common/ico/ico_balloon_01.png) 0 0 no-repeat;
    width: 12px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 43%;
}

#headerAccount .column:hover .navGlobalSub{
    opacity: 1;
    visibility: visible;
}

#headerAccount .navGlobalSub li.hr{
    margin-top: 8px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

#headerAccount .navGlobalSub a{
    color: #404040;
    display: block;
    padding: 8px 15px;
    font-size: 13px;
    line-height: 1.5;
}

#headerAccount .navGlobalSub a:hover{
    background: #f5f5f5;
    text-decoration: none;
}

/* headerLanguage
----------------------------------- */

#headerLanguage{
    margin-top: 4px;
    float: right;
    font-size: 11px;
}

#headerLanguage .column{
    float: left;
    position: relative;
    margin-left: 10px;
}

#headerLanguage .column a {
    background: url(/img/common/ico/ico_arow_w_d.png) 93% 50% no-repeat;
    padding-right: 20px;
}

#headerLanguage a.usa,
#headerLanguage a.kor,
#headerLanguage a.chn,
#headerLanguage a.jpn {
    background: url(/img/common/ico/ico-usa.png) 16px 50% no-repeat;
}

#headerLanguage a.kor {background-image: url(/img/common/ico/ico-kor.png);}
#headerLanguage a.chn {background-image: url(/img/common/ico/ico-chn.png);}
#headerLanguage a.jpn {background-image: url(/img/common/ico/ico-jpn.png);}

#headerLanguage .column img{
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -3px;
}

#headerLanguage .column a{
    color: #fff;
}

#headerLanguage .column a:hover{
    text-decoration: none;
}

#headerLanguage .navGlobalSub{
    text-shadow: none;
    position: absolute;
    top: 17px;
    right: -30px;
    width: 170px;
    line-height: 1;
    padding: 5px 20px 20px;
    text-align: left;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    transition-timing-function: ease-in;
    -moz-transition-property: opacity, visibility;
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: opacity, visibility;
    -webkit-transition-duration: .1s;
    -webkit-transition-timing-function: ease-in;
}

#headerLanguage .navGlobalSub .shadowLayor1{
    padding: 8px 0;
    position: relative;
    z-index: 1;
}

#headerLanguage .navGlobalSub .shadowLayor1:before {
    content: "";
    background: url(/img/common/ico/ico_balloon_01.png) 0 0 no-repeat;
    width: 12px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 87%;
}

#headerLanguage .column:hover .navGlobalSub{
    opacity: 1;
    visibility: visible;
}

#headerLanguage .navGlobalSub li.hr{
    margin-top: 8px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

#headerLanguage .navGlobalSub a{
    color: #404040;
    display: block;
    padding: 8px 15px 8px 40px;
    font-size: 13px;
    line-height: 1.5;
}

#headerLanguage .navGlobalSub li:hover{
    background: #f5f5f5;
    text-decoration: none;
}

/* headerSignin
----------------------------------- */
#headerSignin{
    float: right;
    position: relative;
}
#headerSignin > p,
#headerSignin > .signin,
#headerSignin > .signin > p{
    float: left;
    color: #fff;
    line-height: 39px;
}
#headerSignin > p,
#headerSignin > .signin > p{
    margin-left: 10px;
}
#headerSignin > p > a,
#headerSignin > div.signin > p > a{
    color: #fff;
    display: inline-block;
    line-height: 25px;
    border-radius: 3px;
    text-shadow: 0 1px 0 #000;
    font-size: 14px;
    padding: 0 12px;
}
#headerSignin > p > a:hover,
#headerSignin > .signin a.signin:hover{
    background-color: rgba(0,0,0,.8);
    box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset;
}
#headerSignin div.signin a.signin{
    background: url(/img/common/ico/ico_arow_w_d.png) 93% 50% no-repeat;
    padding-right: 20px;
}

#headerSignin a:hover{
    text-decoration: none;
}

#headerSignin .panel{
    position: absolute;
    top: 15px;
    right: -35px;
    font-size: 13px;
    line-height: 1;
    width: 200px;
    padding: 20px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition-property: all;
    transition-duration: .1s;
    transition-timing-function: ease-in;
    -moz-transition-property: all;
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: all;
    -webkit-transition-duration: .1s;
    -webkit-transition-timing-function: ease-in;
}

#headerSignin div.signin:hover .panel{
    visibility: visible;
    opacity: 1;
}

#headerSignin .panel .shadowLayor1{
    padding: 8px 0;
    position: relative;
    z-index: 1;
}

#headerSignin .panel .shadowLayor1:before {
    content: "";
    background: url(/img/common/ico/ico_balloon_01.png) 0 0 no-repeat;
    width: 12px;
    height: 10px;
    position: absolute;
    top: -10px;
    right: 15px;
}

#headerSignin .panel a{
    color: #404040;
}

#headerSignin .panel .service li a{
    padding: 8px 15px 8px 40px;
    display: block;
    line-height: 18px;
}

#headerSignin .panel .service li.google a{
    background: url(/img/login/ico_google.png) 15px 50% no-repeat;
}

#headerSignin .panel .service li.twitter a{
    background: url(/img/login/ico_twitter.png) 15px 50% no-repeat;
}

#headerSignin .panel .service li.facebook a{
    background: url(/img/login/ico_facebook.png) 15px 50% no-repeat;
}
#headerSignin .panel .service li.qq a{
    background: url(/img/login/ico_qq.png) 15px 50% no-repeat;
}
#headerSignin .panel .service li.weibo a{
    background: url(/img/login/ico_weibo.png) 15px 50% no-repeat;
}
#headerSignin .panel .service li.renren a{
    background: url(/img/login/ico_renren.png) 15px 50% no-repeat;
}

#headerSignin .panel .service li.other a{
    background: url(/img/common/ico/ico_arrow_1_r.png) 20px 50% no-repeat;
}

#headerSignin .panel .service li a:hover {
    background-color: #f5f5f5;
}

/* nav primary tag
----------------------------------- */
#navPrimaryTag{
    height:53px;
    border-bottom: 1px solid #d2d2d2;
    z-index: 2;
    position: relative;
    position: relative;
    background-color: #eeeeee; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #f2f2f2 0%, #dcdcdc 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #f2f2f2 0%,#dcdcdc 100%); /* Chrome 10+,Safari 5.1+ */
    background-image: -ms-linear-gradient(top, #f2f2f2 0%,#dcdcdc 100%); /* IE10+ */
    background-image: -o-linear-gradient(top, #f2f2f2 0%,#dcdcdc 100%); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
    background-image: linear-gradient(top, #f2f2f2 0%,#dcdcdc 100%); /* W3C */
    border-bottom: 1px solid #d2d2d2;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.1);
}

#navPrimaryTag nav{
    position: relative;
    z-index: 1;
}

#navPrimaryTag .layoutContainer{
}

#navPrimaryTag nav .search{
    display: none;
    position: absolute;
    z-index: 2;
    right: 0;
    line-height: 53px;
    height: 53px;
    top: 0;
}

#navPrimaryTag nav .search input.text{
    outline: none;
    border: 1px solid #c8c8c8;
    background: #fff;
    padding: 6px;
    position: relative;
    top: -1px;
}

#navPrimaryTag nav div input.text:focus{
    outline: none;
    border: 1px solid #aaa;
}

#navPrimaryTag nav .search input.hidden{
    display: none;
}

#navPrimaryTag nav .search:after{
    content: "け";
    font-family: 'jsdoitSymbols';
    border: none;
    background: none;
    color: #bfbfbf;
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 7px;
    line-height: 53px;
    height: 53px;
}

#navPrimaryTag nav ul{
    position: relative;
    z-index: 1;
    width: 100%;
    border-left: 1px solid #d2d2d2;
    display: block;
    /*display:         box;
    display:      -o-box;
    display:     -ms-box;
    display:    -moz-box;
    display: -webkit-box;*/
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#navPrimaryTag li{
    position: relative;
    float: left;
    border-right: 1px solid #d2d2d2;
}

.ie9 #navPrimaryTag li{
    float: left;
}

#navPrimaryTag li a{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    color: #6f6f6f;
    font-size: 11.5px;
    padding: 0 10px 0 30px;
    position: relative;
    height:53px;
    z-index: 1;
    max-width: 100px;
    line-height: 1.25;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}

#navPrimaryTag li a:before{
    font-size: 20px;
    vertical-align: middle;
    margin-right: 3px;
    position: absolute;
    z-index: 1;
    line-height: 53px;
    top: 0;
    left: 7px;
    color: #999;
    font-family: 'jsdoitSymbols';
    font-weight: normal;
}

#navPrimaryTag li a:hover:before{
    color: #555;
}

#navPrimaryTag li.application a:before{ content: "あ"; }
#navPrimaryTag li.ui a:before{ content: "い"; }
#navPrimaryTag li.html5 a:before{ content: "う"; }
#navPrimaryTag li.css a:before{ content: "え"; }
#navPrimaryTag li.art a:before{ content: "お"; }
#navPrimaryTag li.game a:before{ content: "か"; }
#navPrimaryTag li.library a:before{ content: "き"; }
#navPrimaryTag li.smartphone a:before{ content: "く"; }

#navPrimaryTag li.all{
    box-flex:         1;
    -o-box-flex:      1;
    -ms-box-flex:     1;
    -moz-box-flex:    1;
    -webkit-box-flex: 1;
    width: 80px;
}

#navPrimaryTag li.all a{
    display: block;
    text-align: center;
    line-height: 53px;
    padding: 0;
}

.ie9 #navPrimaryTag li.all{
    display: none;
}

#navPrimaryTag li:nth-of-type(1){ z-index: 10; }
#navPrimaryTag li:nth-of-type(2){ z-index: 9; }
#navPrimaryTag li:nth-of-type(3){ z-index: 8; }
#navPrimaryTag li:nth-of-type(4){ z-index: 7; }
#navPrimaryTag li:nth-of-type(5){ z-index: 6; }
#navPrimaryTag li:nth-of-type(6){ z-index: 5; }
#navPrimaryTag li:nth-of-type(7){ z-index: 4; }
#navPrimaryTag li:nth-of-type(8){ z-index: 3; }
#navPrimaryTag li:nth-of-type(9){ z-index: 2; }
#navPrimaryTag li:nth-of-type(10){ z-index: 1; }

#navPrimaryTag li a:hover{
    text-decoration: none;
}

#navPrimaryTag li a:active{
    box-shadow: 0 2px 4px rgba(0,0,0,.16) inset;
    background: #e0e0e0;
}

#navPrimaryTag li a[data-add]:after{
    content: attr(data-add);
    display: none;
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 9px;
    background: #c00;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
    color: #fff;
    line-height: 1;
    text-align: center;
    padding: 3px 4px;
    border-radius: 10px;
    font-weight: bold;
    text-shadow: none;
}

#navPrimaryTag li:hover a[data-add]:after{
    opacity: 1;
    display: block;
    -webkit-animation-duration: .2s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: fadeIn;
}

/* blockDialogNotification
----------------------------------- */
.blockDialogNotification{
    text-align: center;
    width: 300px;
    margin: 0 auto;
    padding: 10px 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    z-index: 1;
    bottom: -51;
    opacity: 1;
    left: 50%;
    margin-left: -151px;
    -webkit-animation-duration: .4s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: notificationDialog;
}

@-webkit-keyframes notificationDialog {
  0%{
      bottom: 0;
      opacity: 0;
    }
  100% {
      bottom: -51px;
      opacity: 1;
  }
}

/* --------------------------------------------------
    2. Content
-------------------------------------------------- */

#main {
    float: left;
    width: 730px;
}
* html #main {
    overflow: hidden;
}
#sub {
    float: right;
    width: 200px;
}

/* --------------------------------------------------
    3. Footer
-------------------------------------------------- */
#siteFooter{
    background: #333;
    color: #fff;
    padding: 30px 0 20px;
    margin-top: 25px;
}

#siteFooter a{
    color: #fff;
}

/* apps
----------------------------------- */
#siteFooter .apps{
    margin-bottom: 20px;
}

#siteFooter .apps a{
    border: 1px solid #333;
    display: block;
    border-radius: 4px;
    padding: 5px;
    text-shadow: 0 1px 1px rgba(0,0,0,.7);
}

#siteFooter .apps a:hover{
    border: 1px solid #666;
    text-decoration: none;
    background-image: linear-gradient(
        center top,
        rgba(255,255,255,.15) 0%,
        rgba(255,255,255,.05) 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.15)),
        color-stop(1, rgba(255,255,255,.05))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.15) 0%,
        rgba(255,255,255,.05) 100%
    );
}

#siteFooter .apps > div{
    width: 33.3%;
    float: left;
}

#siteFooter .apps > div:nth-child(2){
    margin: 0 1%;
    width: 31.3%;
}

#siteFooter .apps .userRanking{
    font-weight: bold;
    line-height: 29px;
    display: block;
    padding: 0 0 0 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAMAAACknt2MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJQTFRFl5eXVVVVRUVFOzs7ZWVldXV1jY2NNTU1hoaGlJSUaWlpmJiYYWFhPj4+kpKSgoKCcHBwTU1NfX19b29vSUlJSkpKlZWVUVFROjo6Pz8/PT09V1dXf39/jo6ObW1thYWFQEBARkZGkZGRbm5uXFxcT09PY2NjUFBQenp6g4ODjIyMXV1dZGRkVlZWdnZ2ampqiIiIi4uLfHx8R0dHmZmZMzMz4SK4BQAAADZ0Uk5T//////////////////////////////////////////////////////////////////////8AoY9OMQAAAMJJREFUeNps0ecWgjAMBeCKIFNRkOnee1/e/9Usta21mF9JPuhJU1IpsXLOSkWUfABg/p8MgLQVKsZ7Wcbujme2FSakD5iCvFRkLSAkJ6AlGhbEAQsffVIN3K6gg/zKPpr1GJ0nr4dAxNMARU0xbqwsH3T4EUtfqcOGz4ArPXPToQISULm42DKye7TlMGA4q2vjc2ULjbjzbYya5HHK/QYNxQ6Nlx5yvab+01RSptNaUqlT8n2vpUb5l6JfmbDmW4ABABu+Xw46pRByAAAAAElFTkSuQmCC) 0 50% no-repeat;
}

#siteFooter .apps .codeRanking{
    font-weight: bold;
    line-height: 29px;
    padding: 0 0 0 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAdCAMAAACQRsywAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJQTFRFk5OTOjo6fHx8NDQ0a2trjo6OmJiYh4eHVlZWhYWFQUFBlZWVNzc3ODg4S0tLjIyMOzs7XFxclJSUfX19T09Pl5eXV1dXWVlZc3NzjY2NgoKCRkZGiIiIPz8/cHBwi4uLQEBAaWlpbm5uX19fdHR0OTk5U1NTgICAPT09cXFxNTU1j4+PdXV1REREhoaGXl5eYWFhPj4+ZWVlZ2dnmZmZMzMzlJRJAgAAADZ0Uk5T//////////////////////////////////////////////////////////////////////8AoY9OMQAAANlJREFUeNqc0NcagjAMBtCyZCMILlDce2vy/q9m2lJwXZmLND30Kz8w4IWyd3g32CvJzvxvYn8R+0ntDzogm7pvZHvIMChfaBAgEWLPNyT5fdoJwlOgkwyxwJqoZqBr1agIIzU0hB9UmO7IHWQNGSbISjVFS1Blh5IcmjtlYlq0ziWdKdKUxjAF6MacbvTQEfeOWwA9ThHRVr5rBPBQVAW3Ae6cPKK1EK0L0BfX00+crDjtAFpjQRc6Zl2zJKf1KEMYmzqqFVfpQ72Sidd8tqNTpHyxF5unAAMActFc+TcQhXEAAAAASUVORK5CYII=) 5px 50% no-repeat;
}

#siteFooter .apps .event {
    padding: 5px 0 0 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAMAAACaYWzBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN5QTFRFNDQ0Ozs7Pj4+QEBAODg4S0tLlZWVhYWFc3NzREREgICAPz8/PT09lJSUbW1tkpKSRUVFQUFBYWFhenp6k5OTXFxcZGRkU1NTY2NjeXl5SUlJmJiYXV1dfX19T09Pi4uLa2trUFBQiYmJjY2Nbm5ul5eXdXV1e3t7jo6OWVlZcHBwVVVVfHx8SkpKR0dHg4ODUVFRgoKCOjo6f39/NTU1j4+PQ0NDNzc3V1dXkZGRhoaGaGhoRkZGYmJiZWVlW1tbaWlpdHR0Z2dnUlJSd3d3X19fTU1Nb29vmZmZMzMzNe1/FAAAAEp0Uk5T/////////////////////////////////////////////////////////////////////////////////////////////////wBaK78bAAABGElEQVR42mzS15aCMBAG4KFKEQUFy7r27rq9V7fvn/d/oU2IIKBzkcyZL4dJQoilodgsE5Qkbh1oHICjxfzdq9Ie/I58xmooF0FzRMmHW4CbbiCmAEYBWheyD37yoK5kvsEsDxNV5hY8PQsvb3xqtBlVsyfhYClip9B7AEJtB+4f7zLFI+NHB0p6Cp+njL0ClaCDWNQE1nxc4fZqBhnhUoJv8bFZtw2ksRaNKDqWC552AI/X6KMXwwC5cBS6jO/nBIXoUr8p6qb5HS2jiRUmMKb++b3yDOdObrJsbqFGc/CbqCS/zpXQGTAaTjEeJvegX/O+mn2miwNq6eOghwVfbRReCY8v8ZUR2wdVQOsAsEqp1Fa2+b8AAwC0yJOKOORsAwAAAABJRU5ErkJggg==) 0 0 no-repeat;
}

#siteFooter .apps .event h1{
    margin-bottom: 5px;
}

#siteFooter .apps .event p{
    font-size: 12px;
    color: #ccc;
}

#siteFooter .apps .discussions {
    padding: 5px 0 0 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAMAAADto6y6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtQTFRFNzc3QEBAbW1tkpKSg4ODR0dHf39/SkpKOTk5iYmJXl5ecHBwTExMY2NjhYWFl5eXjo6OX19fQUFBPz8/iIiIcXFxk5OTODg4PT09NTU1h4eHREREaGhoXV1dfX19lZWVgoKCampqOjo6jY2NUlJSRkZGb29vbm5umJiYZ2dnQ0NDV1dXRUVFVlZWZWVlVVVVlJSUNDQ0gYGBUVFRenp6dnZ2eXl5mZmZMzMzv8CTIQAAADl0Uk5T//////////////////////////////////////////////////////////////////////////8AOqxlQAAAALxJREFUeNps0dcSwiAQBVBSNdWYnth774X9/y8TjQm7jvdpuYcBZmBAkxmsGhhuw8TinM8m+Q9sOrxKeiOg8iZrF0GLo5QIVAxckXAn0JKwJJBXwAyD7X3UDz937Mz3HKsnve61UMDUrJfpYFUNwUIcUozRCd2r2O2PtEKAja/sKKAAtO2eAJ085tg8kmkEHhJiAo6EPoGDBFaiXr9IACVoeisCBOB967OaAYFnsnW7jjdvk88XEMG/vAQYAH6rZc51G+xEAAAAAElFTkSuQmCC) 0 0 no-repeat;
}

#siteFooter .apps .discussions h1{
    margin-bottom: 5px;
}

#siteFooter .apps .discussions p{
    font-size: 12px;
    color: #ccc;
}

/* account
----------------------------------- */
#siteFooter .account{
    background: #232020;
    padding: 8px 30px;
    border-radius: 3px;
    box-shadow: 0 1px 1px #000 inset;
}

#siteFooter .account > *{
    display: table-cell;
    position: relative;
    z-index: 1;
}

#siteFooter .account > h1{
    padding-right: 20px;
    font-size: 11px;
}

/* globals
----------------------------------- */
#siteFooter .globals{
    margin: 25px 0 15px;
}

#siteFooter .globals nav {
    float: left;
}

#siteFooter .globals nav ul{
    float: left;
    margin-right: 10px;
}

#siteFooter .globals nav li{
    float: left;
    border-right: 1px solid #737373;
    padding-right: 5px;
    margin-right: 5px;
    line-height: 1.1;
    font-size: 11px;
}

#siteFooter .globals nav li:last-child {
    border-right: none;
}

#copyright{
    float: right;
    line-height: 1.1;
    color: #aaa;
}

#copyright a{
    color: #aaa;
}

#siteFooter .projects{
    font-size: 9px;
}

#kayacProjectTrigger{
    float: right;
    font-size: 9px;
    background: #444;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1;
    margin-left: 10px;
    margin-top: -2px;
    box-shadow: 0 -1px 0 rgba(255,255,255,.4);
}

#siteFooter .projects li{
    float: left;
    margin-right: 10px;
}

#siteFooter .projects li a{
}

#boxKayacLink{
    display: none;
}

#siteFooter .projects .unitKayacLink{
    margin-bottom: 5px;
}

#siteFooter .unitKayacLink:last-child {
    margin-bottom: 0;
}

#siteFooter .unitKayacLink dt{
    font-weight: bold;
}


/* --------------------------------------------------
    4. Sidebar
-------------------------------------------------- */
#sub aside {
    margin: 0 0 20px;
}
#sub aside.bnrTwitter {
    overflow: hidden;
}
#sub aside.bnrTwitter + .bnrTwitter {
    margin-top: -10px;
}
#sub .ttlStyle1,
#sub aside h1 {
    padding: 0 0 8px;
    margin: 0 0 10px;
    border-bottom: 1px solid #ccc;
}
#sub #boxSubNews dl {
    padding: 0 10px 10px;
    background: url(/img/common/bdr/bdr_3-4x1.png) repeat-x 0 100%;
}
#sub #boxSubNews dl dt {
    margin: 0 0 3px;
    color: #C33;
    font-size: 85%;
    font-weight: bold;
}
#sub #boxSubNews dl dt span {
    margin-left: 5px;
}
#sub #boxSubNews dl dt a {
    color: #C33;
    text-decoration: none;
}
#sub #boxSubNews dl dt a:hover {
    text-decoration: underline;
}
#sub #boxSubNews dl dd {
    font-size: 93%;
}
#sub aside p.copy {
    margin: 0 0 15px;
    padding-left: 5px;
    border-left: 3px solid #F0F0F0;
    font-size: 85%;
}
#sub .bnrTwitter a:hover img {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    cursor: pointer;
}

/* Event
----------------------------------- */
#sub aside .unitEvent {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #EEE;
}
#sub aside .unitEvent p.thumb {
    float: left;
    width: 60px;
}

#sub aside .unitEvent p.thumb a img {
    -webkit-transition: all 0.2s ease-in-out;
}
#sub aside .unitEvent p.thumb a:hover img {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
#sub aside .unitEvent dl {
    float: left;
    width: 140px;
}
#sub aside .unitEvent dl dt {
    margin: 0 0 3px;
    font-size: 93%;
    font-weight: bold;
}
#sub aside .unitEvent dl dt a {
    text-decoration: none;
}
#sub aside .unitEvent dl dt a:hover {
    text-decoration: underline;
}
#sub aside .unitEvent dl dd {
    font-size: 85%;
}

/* //////////////////////////////////////////////////
[Module] 
////////////////////////////////////////////////// */

/* --------------------------------------------------
    1. Common Module
-------------------------------------------------- */
.user {}
.user span,
.user a {
    word-wrap: break-word;
}
.user span.thumb {
    margin-right: 5px;
}
.user span.thumb img {
    vertical-align: middle;
}
.user a {
    color: #C33;
    word-wrap: break-word;
}

/* shadowLayor
---------------------------------------------- */
.shadowLayor1{
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
}

/* animation
---------------------------------------------- */

@-webkit-keyframes fadeIn {
  0%{
      opacity: 0;
    }
  100% {
      opacity: 1;
  }
}

/* button
---------------------------------------------- */
.btnBase{
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    -moz-border-radius: 4px;
    line-height: 1.4;
}

input.btnBase{
    margin: 0;
    vertical-align: baseline;
}

.btnSmall{}

.btnBase.btnSmall{
    font-size: 13px;
    font-weight: normal;
    padding: 5px 10px;
}

.btnInvisible{}

.btnBase.btnInvisible{
    background: none;
    border-color: rgba(255,255,255,0);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color: #000;
}

.btnBase .count{
    color: #fff;
    line-height: 1;
    border-radius: 19px;
    padding: 2px 6px;
    background: #999;
    font-size: 10px;
    margin-left: 6px;
    box-shadow: 0 1px 1px rgba(0,0,0,.25) inset;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.btnBase.labelFree {
    position: relative;
    padding-left: 30px;
}

.btnBase.labelFree:after {
    content: "";
    display: block;
    background: url(data:image/png;base64,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) 0 0 no-repeat;
    width: 45px;
    height: 39px;
    position: absolute;
    top: -2px;
    left: -2px;
}

.btnLabel{
    position: relative;
    z-index: 1;
    display: inline-block;
}

.btnLabel.labelFree:after{
    content: "";
    display: block;
    background: url(data:image/png;base64,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) 0 0 no-repeat;
    width: 45px;
    height: 39px;
    position: absolute;
    top: -2px;
    left: -2px;
}

.btnLabel.labelFree:active:after{
    top: -1px;
}

.btnBase:hover,
.btnBase a,
.btnBase:hover a{
    text-decoration: none;
}

.btnBase:active {
    outline: none;
}

.btnType3{
    color: #fff !important;
    background-color: #f60;
    border: 1px solid #434242;
    box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    background-image: linear-gradient(
        center top,
        #424141 0%,
        #1c1b1b 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #424141),
        color-stop(1, #1c1b1b)
    );
    background-image: -moz-linear-gradient(
        center top,
        #424141 0%,
        #1c1b1b 100%
    );
}

.btnType3:hover{
    border: 1px solid #434242;
    box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 1px 1px rgba(255,255,255,.5) inset;
    background-image: linear-gradient(
        center top,
        #515151 0%,
        #201f1f 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #515151),
        color-stop(1, #201f1f)
    );
    background-image: -moz-linear-gradient(
        center top,
        #515151 0%,
        #201f1f 100%
    );
}

.btnType3.active,
.btnType3:active{
    border: 1px solid #434242;
    box-shadow: 0 1px 1px rgba(255,255,255,.5) inset;
    -moz-box-shadow: 0 1px 1px rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5) inset;
    background-image: linear-gradient(
        center bottom,
        #515151 0%,
        #393838 100%
    );
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #515151),
        color-stop(1, #393838)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #515151 0%,
        #393838 100%
    );
}
.btnType3 a:hover,
.btnType3 a{
    color: #fff;
}

.btnType5{
    color: #fff !important;
    background-color: #ae0202;
    border: 1px solid #9e0202;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    background-image: linear-gradient(
        center bottom,
        #960202 0%,
        #ca0202 100%
    );
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #960202),
        color-stop(1, #ca0202)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #960202 0%,
        #ca0202 100%
    );
}
.btnBase.xmas {
    color: #fff !important; background-color: #007d38; border: 1px solid #007434; background-image: linear-gradient(center bottom, #00682f 0%, #009944 100% ); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00682f), color-stop(1, #009944) ); background-image: -moz-linear-gradient(center bottom, #00682f 0%, #009944 100% );
}

.btnType5:hover
    border: 1px solid #9e0202;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    background-image: linear-gradient(
        center bottom,
        #a70101 0%,
        #f11313 100%
    );
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #a70101),
        color-stop(1, #f11313)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #a70101 0%,
        #f11313 100%
    );
}
.btnBase.xmas:hover {
    color: #fff !important; background-color: #007d38; border: 1px solid #007434; background-image: linear-gradient(center bottom, #007534 0%, #00a24a 100% ); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #007534), color-stop(1, #00a24a) ); background-image: -moz-linear-gradient(center bottom, #007534 0%, #00a24a 100% );
}

.btnType5.active,
.btnType5:active{
    border: 1px solid #9e0202;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px rgba(255,255,255,.6) inset;
    background-image: linear-gradient(
        center bottom,
        #960202 100%,
        #ca0202 0%
    );
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, #960202),
        color-stop(0, #ca0202)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #960202 100%,
        #ca0202 0%
    );
}
.btnBase.xmas.active,
.btnBase.xmas:active {
    color: #fff !important; background-color: #007d38; border: 1px solid #007434; background-image: linear-gradient(center bottom, #009944 0%, #00682f 100% ); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #009944), color-stop(1, #00682f) ); background-image: -moz-linear-gradient(center bottom, #009944 0%, #00682f 100% );
}
.btnType5 a:hover,
.btnType5 a{
    color: #fff;
}

/* Section
----------------------------------- */
.sectionLv1{
    margin-bottom: 35px;
}

#sub .sectionLv1{
    margin-bottom: 20px;
}

/* Title
----------------------------------- */
.ttlStyle1 {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1;
}

.ttlStyle1 a {
    color: inherit;
}

/* Link
----------------------------------- */
.viewMore {
    text-align: right;
}
.viewMore a {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAMAAAC3r6aQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF////4+PtAAAApeDkmwAAAAN0Uk5T//8A18oNQQAAABtJREFUeNpiYGBiYmBgYGJgZGQEYiDNxAQQYAAAsgAT4b7atQAAAABJRU5ErkJggg==) 7px 50% no-repeat #000;
    padding: 5px 10px 5px 17px;
    line-height: 1;
    font-size: 12px;
    display: inline-block;
    color: #fff;
}
.viewMore a:hover {
    text-decoration: none;
    background-color: #333;
}

/* --------------------------------------------------
    2. Unit Module
-------------------------------------------------- */

/* Code
----------------------------------- */
#boxHomeHotCode .unitCodeGroup .unitCode:nth-child(4n),
#boxHTML5CSCCode .unitCodeGroup .unitCode:nth-child(4n),
#boxHomeCodeRankingCSS3 .unitCodeGroup .unitCode:nth-child(4n){
    display: none;
}
.unitCodeGroup {
    margin: 20px 0 0 0;
}
.unitCodeGroup.col4 .unitCode:nth-child(4n) {
        margin-right: 0;
}
.unitCode {
    position: relative; 
    width: 207px;
    margin: 0 35px 20px 0;
    min-height: 150px;
    min-width; 207px;
    float: left;
    z-index: 1;
}
.unitCode:hover{
    z-index: 5;
}
.unitCode:hover div.inner {
    position: absolute;
    width: 207px;
    top: -10px;
    left: -10px;
    padding: 9px;
    border: 1px solid #ccc;
    z-index: 5;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.25);
    -moz-animation-name: unitCodeInner;
    -moz-animation-duration: .15s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: unitCodeInner;
    -webkit-animation-duration: .15s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes unitCodeInner {
    0%{
        box-shadow: 0 1px 0 rgba(0,0,0,0);
        -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0);
        border: 1px solid rgba(255, 255, 255, 0);
        background: rgba(255, 255, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.25);
        box-shadow: 0 1px 5px rgba(0,0,0,.25);
        border: 1px solid rgba(169, 169, 169, 1);
        background: rgba(255, 255, 255, 1);
    }
}
@-moz-keyframes unitCodeInner {
    0%{
        box-shadow: 0 1px 0 rgba(0,0,0,0);
        -moz-box-shadow: 0 1px 0 rgba(0,0,0,0);
        border: 1px solid rgba(255, 255, 255, 0);
        background: rgba(255, 255, 255, 0);
    }
    100% {
        -moz-box-shadow: 0 1px 5px rgba(0,0,0,.25);
        box-shadow: 0 1px 5px rgba(0,0,0,.25);
        border: 1px solid rgba(169, 169, 169, 1);
        background: rgba(255, 255, 255, 1);
    }
}
.unitCode p.ttl a {
    display: block;
    width: 100%;
    overflow: hidden;
    font-weight: normal;
    white-space: nowrap;
    font-size: 12px;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-decoration: none !important;
}
.unitCode p.ttl a .labelPrivate{
    color: #000;
    font-size: 9px;
    margin-right: 7px;
    background: url(/img/common/ico/ico_private.png) 5px 40% no-repeat #ffffc6;
    padding: 2px 5px 2px 19px;
    line-height: 1;
}
.unitCode p.ttl:hover .labelPrivate{
    text-decoration: none !important;
}
.unitCode p.ttl a:hover .body{
    text-decoration: underline;
}
.unitCode .unitCodeThumb p.thumb {
    height: 102px;
    margin: 0 0 3px;
}
.unitCode .unitCodeThumb p.thumb a {
    display: block;
    width: 205px;
    height: 100px;
    border: 1px solid #CCC;
}
.unitCode .unitCodeThumb p.thumb img {
    display: block;
    position: relative;
}
.unitCode .unitCodeThumb:hover p.ttl a {
    text-decoration: none;
}
.unitCode .unitCodeThumb iframe {
    width:120px;
    padding-left:40px;
}
.unitCode p.user {
    font-size: 10px;
    margin-bottom: 3px;
    line-height: 15px;
    display: inline-block;
    float: left;
}
.unitCode p.user a{
    color: #333;
}
.unitCode p.user span.thumb {
    margin: 0 3px 0 0;
}
.unitCode p.user span.thumb img {
    vertical-align: top;
}
.unitCode p.discription {
    clear: both;
    font-size: 10px;
    background: #eee;
    padding: 5px 10px;
    float: left;
    width: 185px;
    border-radius: 4px;
    margin-top: 4px;
    line-height: 1.75;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.unitCode ul.data {
    float: right;
    margin-top: -2px;
}
ul.data li {
    display: inline;
    margin: 0 5px 0 0;
    padding-left: 10px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    font-size: 10px;
    color: #333;
}
ul.data.sub {
    float: none;
    clear: both;
    display: none;
}
.unitCode:hover ul.data.sub {
    display: block;
    opacity: 1;
    -moz-animation-name: unitCodeSub;
    -moz-animation-duration: .15s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: unitCodeSub;
    -webkit-animation-duration: .15s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}
@-moz-keyframes unitCodeSub {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes unitCodeSub {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.unitCode .mycodeAction{
    clear: both;
    float: none;
    display: none;
    margin-top: 5px;
}
.unitCode:hover .mycodeAction{
    display: block;
}
ul.data li a {
    color: #333;
    background-repeat: no-repeat;
    background-position: 0 0;
    white-space: nowrap;
}
ul.data li.forked {
    background-image: url(/img/common/ico/ico_fork.png);
}
ul.data li.tree {
    padding-left: 0px;
}
ul.data li.fav {
    background-image: url(/img/common/ico/ico_fav.png);
    padding-left: 13px;
}
ul.data li.pv {
    background-image: url(/img/common/ico/ico_pageview.png);
    padding-left: 14px;
}
ul.data li.modified {
    padding-left: 16px;
    background-image: url(/img/common/ico/ico_modified.png);
}
ul.data li.license {
    background-image: url(/img/common/ico/ico_license.png);
}

ul.data li.lines {
    padding-left: 15px;
    background-image: url(/img/common/ico/ico_lines.png);
}
ul.data li.tag {
    background-image: url(/img/common/ico/ico_tag.png);
}
ul.data li.tag ul.listTag {
    display: inline;
}
ul.data li.tag ul.listTag li {
    padding: 0;
}
ul.data li.tag ul.listTag li {
    margin: 0;
}
ul.data li.pageview {
    padding-left: 16px;
    background-image: url(/img/common/ico/ico_pageview.png);
}

/* Qamp;A
----------------------------------- */
.unitQaGroup {
    margin: 0 -40px 17px 0;
}
.unitQa {
    float: left;
    width: 287px;
    margin: 0 40px 17px 0;
    padding-left: 58px;
    padding-bottom: 5px;
    border-bottom: 1px solid #E4E4E4;
    background: url(/img/common/ico_q.png) no-repeat 15px 15px;
}
.unitQa p.body {
    margin: 0 0 10px;
    font-size: 93%;
    word-wrap: break-word;
}
.unitQa p.body a {
    word-wrap: break-word;
}
.unitQa p.user {
    margin: 0 0 5px;
    font-size: 93%;
}
.unitQa p.user span.thumb {
    margin: 0 5px 0 0;
}
.unitQa p.date {
    color: #999;
    font-size: 77%;
    text-align: right;
}

/* Ranking
----------------------------------- */

/* listRankingUser
   ホームページの下のセクション
----------------------------------- */
.listRankingUser{
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
}

.listRankingUser.col2{
    width: 345px;
}

.listRankingUser.col2:nth-child(2n-1){
    float: left;
}

.listRankingUser.col2:nth-child(2n){
    float: right;
}

.listRankingUser li {
    border-bottom: 1px solid #ccc;
}

.listRankingUser li > a{
    display: block;
    padding: 5px 0;
    color: #000;
}

.listRankingUser li > a:hover{
    text-decoration: none;
    background: #f5f5f5;
}

.listRankingUser li .rank{
    background: #000;
    color: #fff;
    line-height: 30px;
    width: 30px;
    float: left;
    text-align: center;
    margin-right: 10px;
}

.listRankingUser:first-child li:nth-child(1) .rank,
.listRankingUser:first-child li:nth-child(2) .rank,
.listRankingUser:first-child li:nth-child(3) .rank{
    background: #c00;
}

.listRankingUser li .thumb{
    margin-right: 10px;
    float: left;
}

.listRankingUser li .name{
    line-height: 30px;
    float: left;
    font-weight: normal;
}

.listRankingUser li dl{
    float: right;
    line-height: 30px;
}

.listRankingUser li dt{
    float: left;
    font-size: 10px;
    margin-right: 5px;
}

.listRankingUser li dd{
    float: left;
    font-size: 14px;
    font-weight: bold;
}

/* -. Ad banner
------------------------------------------------- */
/* Googleダブルクリックの広告 */
div.ad_super_bnr {
    text-align:center;
    margin:15px 0 40px;
}

/* tour
----------------------------------- */
.blockTourIntro{
    border-top: 1px solid rgba(0,0,0,.5);
    color: #fff;
    background-color: #2b2b2b;
    padding: 40px 0;
    background: 
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABNCAYAAAHoaMX/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpiZGBgSANiBhZ2dvafYAYXF9d3MIOHh+cLmMHLywth8PHxfUIVATI+gxnc3NxfwQxOTs4fIAZAAIFQGhPIVCaQiUwg05hA+phApkBYIN1MIJ1MIF0AAcTIzMycDNOKYg7cdBR3wZz0Gc6BuQZTBqgHYQDQPd/gHJi/QQAggBjhoQF0yl8wAwj+gBmsrKxwxm8wg42N7RcOBtDQX6ihCmfgUYNszm+YXb9QbYe7B+ZCgABiBIIUBjQAUvYXm+AfDEGYd1AEYQ5AF/xFnCDMa+gqfxKnEjlKqGUmVndi9TsuwT9EhSdAAMGTEIpKYBz9wxBkYmL6j03wHwWCwFSBVeVf4lTCEtXACGJNtLi0/6FAO9aMMAjdSZIg8fH+l7K0RIkgMCNgpHmAAAOVYKkMRACsurEqxGY3nRRiCzWKTfxLrIl/qetGoq2mvkJsuQSXiX8Gzmrq+/rPaDiOGIX/BihfD2D5iK3Vgw0AADudlbhSF8QCAAAAAElFTkSuQmCC) repeat-x,
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFQEFAT05PT09PUFBQQEBAMjExMjIyMTExLLsnaAAAACVJREFUeNocxUECAAAEArAQ/f/HaJeBmIMq1wZJpL5Id1YAAQYADzUAxsujfTEAAAAASUVORK5CYII=);
}

.blockTourIntro .body{
    width: 365px;
    float: left;
}

.blockTourIntro .movie{
    float: right;
}

.blockTourIntro hgroup{
    font-size: 20px;
    margin-bottom: 25px;
    text-shadow: 0 1px 2px rgba(0,0,0,.95);
}

.blockTourIntro p.description{
    line-height: 1.8;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,.95);
}

.blockTourIntro p.description.japanese{
    font-size: 13px;
}

.blockTourIntro .btnType5{
    width: 290px;
    font-size: 20px;
    margin-top: 25px;
    padding: 15px 10px;
}

.blockTourIntro p.description a{
    background: url(/img/common/ico/info_01.png) 0 50% no-repeat;
    padding-left: 30px;
    color: #fff;
    display: inline-block;
    line-height: 25px;
    margin-top: 5px;
}

.blockTour{
    margin-bottom: 50px;
}

.blockTour > section{
    width: 290px;
    float: left;
    margin-right: 40px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.blockTour > section:nth-child(3n+1){
    margin-right: 0;
}

.blockTour > section:nth-child(3n+2){
    clear: both;
}

.blockTour > section h1{
    font-size: 18px;
    margin-bottom: 10px;
}

.blockTour > section p{
    line-height: 1.75;
    margin-bottom: 5px;
}

/* Feed
---------------------------------------------- */
/* トップページのTimeline */

.blockFeed header{
    margin-bottom: 10px;
}

.blockFeed header .ttlStyle1{
    float: left;
    padding-top: 9px;
}

.blockFeed header .btnType5{
    float: right;
    font-size: 13px;
    padding: 7px 35px;
}

.blockFeed .stream{
    margin-bottom: 10px;
}

.unitFeed {
    position: relative;
    height: 40px;
    margin: 0 0 8px;
    border-radius: 3px;
    background-color: #f2f2f2;
    background-position: 0 50%, 0 50%;
    color: #404040;
}
.unitFeed.badge {
    background-color: #e0e0e0;
}

.unitFeed .icons {
    float: left;
    width: 90px;
    margin: 7px;
}

.unitFeed .icons>* {
    display: block;
    float: left;
}

.unitFeed .actionIcon {
    margin: 3px;
}

.unitFeed .content {
    margin-top: 10px;
}

.unitFeed .content p {
    width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unitFeed .content a {
    font-weight: bold;
}

.unitFeed.badge .badgeIcon {
    margin-top: -3px;
    margin-left: -3px;
    margin-right: -2px;
}

.unitFeed.badge .content a {
    color: black;
}

.unitFeed .title {
    font-weight: bold;
    font-size: 13px;
}

.unitFeed .meta,
.unitFeed .metaData {
    position: absolute;
    right: 5px;
    top: 9px;
    max-width: 200px;
    font-weight: bold;
}

.unitFeed .meta li {
    display: block;
    float: left;
    min-width: 40px;
    height: 22px;
    line-height: 22px;
    margin: 0 3px;
    border-radius: 11px;
    text-align: center;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#d2d2d2));
    background-image: -webkit-linear-gradient(#f7f7f7 0%, #d2d2d2 100%);
    background-image: -moz-linear-gradient(#f7f7f7 0%, #d2d2d2 100%);
    background-image: -o-linear-gradient(#f7f7f7 0%, #d2d2d2 100%);
    background-image: linear-gradient(#f7f7f7 0%, #d2d2d2 100%);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.unitFeed .meta li:active,
.unitFeed .meta li.active {
    background-color: #ddd;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d2d2d2), to(#f7f7f7));
    background-image: -webkit-linear-gradient(#d2d2d2 0%, #f7f7f7 100%);
    background-image: -moz-linear-gradient(#d2d2d2 0%, #f7f7f7 100%);
    background-image: -o-linear-gradient(#d2d2d2 0%, #f7f7f7 100%);
    background-image: linear-gradient(#d2d2d2 0%, #f7f7f7 100%);
}

.unitFeed .meta img,
.unitFeed .metaData img {
    vertical-align: middle;
}

.unitFeed .metaData span {
    margin-right: 10px;
}

.unitFeed .metaData .pv img,
.unitFeed .metaData .fork img,
.unitFeed .metaData .favorite img {
    float: left;
    margin: 1px;
}

.unitFeed .metaData li {
    display: block;
    float: left;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

/* blockPushNotification
---------------------------------------------- */
.blockPushNotification{
    background: #eee;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 10px 0;
        display: none;
}

.blockPushNotification .close{
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* account information
---------------------------------------------- */
section.accountInfo{
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 15px;
}

section.accountInfo a{
    color: #000;
}

section.accountInfo a:hover{
    color: #000;
    text-decoration: none;
}

section.accountInfo > header{
    line-height: 50px;
    margin-bottom: 16px;
}

section.accountInfo > header h1{
    font-weight: normal;
    line-height: 50px;
}

section.accountInfo > header h1 a{
    display: block;
}

section.accountInfo > header img{
    margin-right: 15px;
}

section.accountInfo .counts{
    border: 1px solid #ccc;
    border-radius: 3px;
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

section.accountInfo .counts li{
    display: table-cell;
    text-align: center;
    width: 33.3%;
    line-height: 1;
    border-left: 1px solid #ccc;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

section.accountInfo .counts li > span,
section.accountInfo .counts li > a{
    display: block;
    padding: 5px 0;
    background-image: linear-gradient(
        center top,
        #fff 0%,
        #f2f2f2 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #fff),
        color-stop(1, #f2f2f2)
    );
    background-image: -moz-linear-gradient(
        center top,
        #fff 0%,
        #f2f2f2 100%
    );
}

section.accountInfo .counts li > a:hover{
    background-image: none;
}


section.accountInfo .counts li:first-child {
    border: none;
}

section.accountInfo .counts li dt{
    font-size: 10px;
    margin-bottom: 3px;
}

section.accountInfo .counts li dd{
    font-size: 16px;
}

section.accountInfo .connection{
    font-size: 10px;
}

section.accountInfo .connection dl{
    margin-bottom: 3px;
}

section.accountInfo .connection dt{
    float: left;
    padding-left: 27px;
    width: 55px;
}

section.accountInfo .connection .following dt{
    background: url(/img/common/ico/ico_followers.png) 0 50% no-repeat;
}

section.accountInfo .connection .followers dt{
    background: url(/img/common/ico/ico_following.png) 0 50% no-repeat;
}

/* blockPickupContents
---------------------------------------------- */
.blockPickupContents{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAACgCAMAAADHGZeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEVQTFRFIyMjKCgoKSkpLi0tLy4uJCQkKysrIiIiJycnMC8vMTAwJiYmKioqISEhHx8fLCwsICAgLS0tJSUlMTExLi4uMDAwLy8vSD8kFgAAAH9JREFUeNrs1zcOwDAIQNH03tv9j5oT5DMgZDvir2/wggTOFiqz040KpjNlqC0lqF01JehBBdORMtSOEjSnVFpQKp0oQ20oQVfKUHdKpRcVTB9KpaHetdObilRPyjUKHagkp87V9Ut7Ksm94PpvrShB47z6XP+tJSWo4o/zCjAAAVc0+8cFZIwAAAAASUVORK5CYII=) repeat-x #2d2d2d;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #7f7e7e;
    height: 302px;
    overflow: hidden;
}

.blockPickupContents .layoutContainer{
    width: 960px;
    background: #3a3a3a;
    box-shadow: 0 0 14px rgba(20,20,20,.7);
}

.blockPickupContents .layoutContainer a{
    opacity: 1;
    display: block;
}

.blockPickupContents .layoutContainer a img{
  -webkit-animation-duration: .12s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: fadeOutReturn;
}

.blockPickupContents .layoutContainer a:hover{
    background: #fff;
}

.blockPickupContents .layoutContainer a img:hover{
    opacity: .9;
  -webkit-animation-duration: .12s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0%{
      opacity: 1;
    }
  100% {
      opacity: .9;
  }
}

@-webkit-keyframes fadeOutReturn {
  0%{
      opacity: .9;
    }
  100% {
      opacity: 1;
  }
}

.blockPickupContents .layoutContainer .main{
    width: 960px;
    height: 222px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.blockPickupContents .layoutContainer .main li{
    height: 222px;
    width: 960px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.blockPickupContents .layoutContainer .main li:first-child {
    z-index: 3;
    display: block;
}

.blockPickupContents .layoutContainer .sub{
    width: 960px;
    height: 80px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.blockPickupContents .layoutContainer .sub ul{
    position: absolute;
    z-index: 1;
    bottom: 0;
}

.blockPickupContents .layoutContainer .sub li{
    position: absolute;
    bottom: 0;
}

/* --------------------------------------------------
    90. Other
-------------------------------------------------- */

/* for Voice Browser */
.hidden {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Noscript Message */
#msgNoscript {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    padding: 5px 0;
    border-top: 1px solid #f00;
    border-bottom: 1px solid #f00;
    background: #fcc;
    color: #f00;
    line-height: 1.2;
    text-align: center;
    opacity: 0.7;
}

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

 Media Queries

---------------------------------------------- */
@media screen and (min-width: 1300px) {

    /* header */
    #navGlobalSearch{
        display: none;
    }

    #navPrimaryTag nav .search{
        display: block;
    }

    #navPrimaryTag li a{
        padding: 0 11px 0 31px;
    }

    #navPrimaryTag li.all a{
        border-right: 1px solid #d2d2d2;
    }

    #navPrimaryTag li.all{
        border-right: none;
    }

    /* layout */
    .layoutContainer.layoutLiquid{
        width: 1230px;
        margin-right: auto;
        margin-left: auto;
    }

    .layoutLiquid #main{
        width: 980px;
    }

    .layoutLiquid #main .unitCodeGroup{
        width: 1030px;
    }


    #boxHomeHotCode .unitCodeGroup .unitCode:nth-child(4n),
    #boxHTML5CSCCode .unitCodeGroup .unitCode:nth-child(4n),
    #boxHomeCodeRankingCSS3 .unitCodeGroup .unitCode:nth-child(4n){
        display: block;
    }

    .layoutLiquid #main .HTML5CSCCode {
        width: 979px;
    }

    .unitCodeGroup.col4 .unitCode:nth-child(4n) {
            margin-right: 33px;
    }

    .unitCodeGroup.col4 .unitCode:nth-child(5n) {
            margin-right: 0;
    }

    .layoutLiquid .unitQa {
        width: 412px;
    }

    .layoutLiquid .listRankingUser.col2{
        width: 465px;
    }

    .blockTourIntro .layoutLiquid > .body{
        width: 580px;
    }

    #body .blockProfileNav li a{
        padding: 0 20px;
        min-width: 60px;
        padding: 0 10px;
    }

    #headerGlobal .pr a {
        max-width: 720px;
        width: 720px;
    }

    /* コードランキングのコードタイトル */

    .codeRanking .ttl {
        width: 615px;
    }

}

#main section {
    margin: 0 0 40px;
}
.unitCodeGroup {
    width: 785px;
}
.unitCode {
    margin: 0 50px 25px 0;
}

/* Title
----------------------------------- */
.sectionLv1.hotcode .ttlStyle1{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAGOUtMjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNpiYMABeBihjP9A/IgZyuEDYhuAAMKqHqSMgRHGAAEmKH0cJAEQQMhKpYH4Nrp+JyAWgmoHY5CVBkB8DIiloDq0oMahgFcwBkAAEYX+I3NgTmRGkuRhQHIvsmpGmI6faEaC+KIMSG5HZ4PN/4/NAVgBQADhQj+hQUQUCERyQx0hxZ/RHP0fGqyc0DiAAzYkBd/QNPyHKoZ7UAiLAmT8Bz2Y0J1wDCpmj2YrUZF8g4FSABBAuFARsQpVSIluWGiwoUswEkjFjNhSNDJ4hMR+iBSRKDpBCdgPyp6DJM4CDXN29JQIcsJ2tAhLg9LGMIVX8aQVb+SIUiGQVrRgbEao9WxEBOk+RiwRwIgjH7KAgi6OCFOtgPgvjDMZSxqG8Z0ImbQUqlCOmPTxAVpyogBmHIpBWW8duiBAgJGCSoH4OS0yz0akAIqlpsF+WFLNUmoZro6nCLMh19BGpGQ8H0/ab4Sq4Udi4wV1UI3nofxkApnLBinh7sVXmH1A0xhLwGAQToC6HMafjG5wBRGG4MKKQNyFJgYvGRZRYPA6aFmJLAYvdiyJMKARWgy2EGlhCHKWfoJH4Ry04AvHo/YDtOTEADNxaHiIpg5byvmJVFMQbIKcBOJdQJyPJueKZiiorNGlVm69jZT+hahdgL2CVl00ATykKAYArnH9BqspkTgAAAAASUVORK5CYII=) 0 50% no-repeat;
    padding-left: 30px;
    line-height: 32px;
    margin-bottom: -10px;
}

.sectionLv1.dailyCodeRanking .ttlStyle1{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAAHkRx0oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVxJREFUeNpiYCAW/IdiBoAAgqHJMEY7TIYJiI/AlAMEEIiYiaS8HdksRmRVaIARIIDQBarRnYEOQkDENChHAknRN1z2dOCSYAQIIEJB8BOfgrdYxE7CHIgE2IC4DsbhRArch0hsGD6DHPiMSKboQk3CB85i89R/AprA6gECCB86z0Ai0IXaKoovaOuwiH/DofYYiOGEw0Rs/ruHT8FtqFgUkpgxuj/fQhWdxxJHP5HkdZE1RWFRjA1jhLsxEaF6FlcexYXTsJnyioAmIZhCgAAjFTmhGaRIimY5IN4LxBvxpRokAMr+n4HYg4A6UIZZCk1AliCBTCQXhhBh0VJCSRkKDID4D1QtcjkIzuPbCWg2Q3LULgJqi6Dq5NAlvJEMWQHE0khyrjgKm59QA5FBODRoQfIVhIKFGvgqPu8KIYUrpdiMUGTXUcGSCcQkdwkqWGRJbN7aRYElT7AZCACZJsnZVI82qwAAAABJRU5ErkJggg==) 0 50% no-repeat;
    padding-left: 33px;
}

.sectionLv1.dailyUserRanking .ttlStyle1{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAdCAYAAAHQnwwUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZpJREFUeNpiZGBg+M+ABBShAiowARRZMAAIIEao6BcYg4EZiPlQRAACCIQ+QDnImAGnsTCBP9gk2EAMgABiRNfGhK4UQwAZCKEb+h+bW/6DzLgPxPxQgb8sQEIJiLdDBVkAAggk+g2L31AwyJhfDPjBR2QOuonfGMgB4VDdn4E4DYifQPmTcXoeCi6hizHj8JkoSBIggNBNwcZmZiLCvX+JUcRAtKKzeOQvI3Oi0HwIAgm4dLZDY598gC0whbAldBCeCcS92KJJGioQjiQmBxWLggWBIlRiN5KiR1BaBd2620j8OVAxOWRFB7A4/AmuhPcHqiAfWQIgwBixliEMDCSLM6HnGHIBExXM+Agz6B2FBn1H5nBCYx9bdvqPQ3w+VB9OoAVVsB3NkIdQeQNynW5DjCJGHOIgW2OB2B7quu/QHLoMLeniBIsIlcBQDCrYeHAZch4tPBTR5EEadyGp+YlcACKHA7KNEnhcfRVJXSN6gnyBptgST02GnJXvY1OUgyXXFgGxK7RmOIYmvxRfYPNgST/o+DZ6AQMCABmOpTYVO4FHAAAAAElFTkSuQmCC) 5px 50% no-repeat;
    padding-left: 33px;
    line-height: 29px;
}

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

 HTML5CSC Vol.1 Section

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

.HTML5CSCCode {
    position: relative;
    width: 723px;
    height: 181px;
    left: -12px;
    padding: 70px 12px 2px;
    margin-bottom: 10px!important;
    background: url("/img/event/html5csc/common/hom/curtainBg_s.png");
    border-radius: 5px;
}

.HTML5CSCCode h1 {
    position: absolute;
    width: 520px;
    height: 100px;
    left: -40px;
    top: -20px;
    background: url('/img/event/html5csc/common/hom/html5csc3-sec-ttl.png') 0 0 no-repeat;
}

.HTML5CSCCode h1 a {
    display: block;
    width: 500px;
    height: 100px;
}

.HTML5CSCCode .btnMore {
    display: block;
    position: absolute;
    width: 100px;
    height: 60px;
    top: 10px;
    right: 10px;
    background: url('/img/event/html5csc/common/hom/html5csc3-sec-more.png') 0 0 no-repeat;
}

.HTML5CSCCode .btnMore:hover, .HTML5CSCCode .btnMore:focus {
    background-position: 0 -60px;
}

/* 投稿コードセクションのアイコンを白にする呪文 */

.HTML5CSCCode .unitCode p.user a,
.HTML5CSCCode .unitCode li {
    color: white;
}

.HTML5CSCCode .unitCode p.ttl a {
    text-shadow: 1px 1px 0px white,
        -1px 1px 0px white,
        1px -1px 0px white,
        -1px -1px 0px white;

}

.HTML5CSCCode .unitCode li.forked {
    background-image: url('/img/common/ico/ico_fork_w.png');
}
.HTML5CSCCode .unitCode li.fav {
    background-image: url('/img/common/ico/ico_fav_w.png');
}
.HTML5CSCCode .unitCode li.pv {
    background-image: url('/img/common/ico/ico_pageview_w.png');
}

.HTML5CSCCode .unitCode:hover p.user a,
.HTML5CSCCode .unitCode:hover li {
    color: inherit;
}

.HTML5CSCCode .unitCode:hover li.forked {
    background-image: url('/img/common/ico/ico_fork.png');
}
.HTML5CSCCode .unitCode:hover li.fav {
    background-image: url('/img/common/ico/ico_fav.png');
}
.HTML5CSCCode .unitCode:hover li.pv {
    background-image: url('/img/common/ico/ico_pageview.png');
}

.contestInstr {
    margin-bottom: 40px;
}

.contestInstr a:link,
.contestInstr a:visited,
.contestInstr a:hover,
.contestInstr a:focus,
.contestInstr a:active {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

.contestInstr a:hover,
.contestInstr a:focus {
    border-bottom: 1px solid #333;
}


/* --------------------------------------------------
    99. Clearfix
-------------------------------------------------- */
.group { *zoom: 1; } /* for ie6/7 */
.group:after { content: ""; display: block; clear: both; }

.button { cursor: pointer; }