@charset "utf-8";
/*************************************
 *  リセット
 *************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    list-style: none;
}

/*************************************
 *  サイト基本構造
 *************************************
 *  body
 *     #Topbar
 *             .centerizer
 *     #Header
 *     #GlobalMenu
 *     #Contents
 *           ▼2カラム
 *              #Left
 *                     #CpMenu
 *              #Column02
 *           ▼1カラム
 *              #Column01
 *      #Footer
 *            .Pagetop
 *            .copyright
 *************************************/


/*************************************
 *  基本設定
 *************************************/

a:link    { color: #666666  ; text-decoration: underline; }
a:visited { color: #333333; text-decoration: underline; }
a:hover   { color: #F17603; text-decoration: none; }
a:active  { color: #F17603; text-decoration: underline; }

body {
    text-align: center;
    font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Osaka',sans-serif;
    font-size:85%;
    line-height: 150%;
    overflow-x: auto;
    min-width: 1024px;
}


/*************************************
 * 汎用クラス
 *************************************/


/* .clearfix */

.clearfix       { /zoom: 1.0 }
.clearfix:after { content: ""; display: block; clear: both; }
.clear{clear:both;}
.nofloat{float: none;}
.leftfloat{float: left;}
.rightfloat{float: right;}
.block{display:block;}

.min{font-size: 85%;}
.red {color: #CC0033;}
.orange {color: #F27900;}
.thin{font-weight: normal;}
a.accent {color: red;}

.aln-right{  text-align: right;}
.aln-left{  text-align: left;}
.aln-center{ text-align: center;}

.relative{position:relative;}

/* .box_shadow*/

.box_shadow{
    -moz-box-shadow: 0px 0px 3px #000; /* Firefox用 */
    -webkit-box-shadow: 0px 0px 3px #000; /* Safari,Google Chrome用 */
}

/* .txt_shadow1  エンボス 白ベース */

.txt_shadow1{
    text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
}

/* .txt_shadow2  エンボス 濃色ベース */

.txt_shadow2{
    text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
}

/* .smallnotice */
.smallnotice{
    font-size: 80%;
    color: #666;
}
/* .round5 */
.round5{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.round5-t{
    -moz-border-radius:  5px 5px 0 0 ;
    -webkit-border-radius:  5px 5px 0 0;
    border-radius : 5px 5px 0 0;
}
.round5-b{
    -moz-border-radius:  0 0 5px 5px;
    -webkit-border-radius:  0 0 5px 5px;
    border-radius:  0 0 5px 5px;
}

/* .round20 */
.round20{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.cps{color: #CC0066; font-weight: normal;}
.cps strong{font-size: 150%; padding-right: 0.1em; font-family: Arial;font-weight: bold;}

.yen{color: #CC0000; font-weight: normal;}
.yen strong{font-size: 150%; padding-right: 0.1em; font-family: Arial;font-weight: bold;}

.point{color: #8A5506; font-weight: normal;}
.point strong{font-size: 150%; padding-right: 0.1em; font-family: Arial;font-weight: bold;}

.percent{color: #CC0000; font-weight: normal;}
.percent strong{font-size: 150%; padding-right: 0.1em; font-family: Arial;font-weight: bold;}



/*************************************
 * 共通パーツ
 *************************************/
/* item1 */
.item1 {
    position: relative;
}
.item1 .thum{
    position: absolute;
    display: block;
    margin: 1px auto;
    top:0px;
    left: 0px;
    width: 80px;
    height: 60px;
}
.item1 .thum a{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: url(/images/common/bg/bg_grad_b.png) repeat-x 0 0;
    padding: 5px 4px 5px 5px;
    width: 70px;
    height: 50px;
    display: block;
    text-align: center;
}

.item1 .thum a img{
    max-width: 70px;
    max-height: 50px;
    vertical-align: middle;
}

.item1 .thum a:hover{
    background: #666 none no-repeat 0 0;
}
.item1 .dsc{
    padding-left: 100px;
    display: table-cell;
    *display:inline;
    *zoom: 1.0;
}

.item1 .dsc span{
    background-color:  #fff;
    border:2px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* item2 */
.item2 {
    float:left;
    width: 140px;
    height: 140px;
    text-align: center;
    margin-left: 32px;
    line-height: 120%;
    margin-bottom: 1em;
}

.item2 span, .item2 a{
    display: block;
    margin: 2px auto;
    font-size: 85%;
}
.item2 .thum{
    display: block;
    margin: 1px auto;
    width: 100px;
    height: 80px;
    position: relative;
}
.item2 .thum a{
    background: url(/images/common/bg/bg_grad_b.png) repeat-x 0 0;
    padding: 5px 4px 5px 5px;
    width: 90px;
    height: 70px;
    text-align: center;
    display: block;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.item2 .thum a img{
    max-width: 90px;max-height: 70px;
    vertical-align:middle;
}
.item2 .thum a:hover{
    background: #666 none no-repeat 0 0;
}
.item2 .thum .new{
    position: absolute;
    left: 2px;
    bottom: 1px;
}

.item2 span.ch-num{
    display: inline-block; !important
    *display:inline;
    *zoom: 1.0;
    font-size:90%;
    color:#FB8C05;
    vertical-align: middle;
}
.item2 a.btn-tree-min{
    display: inline-block; !important
    *display:inline;
    *zoom: 1.0;
    vertical-align: middle;
}

.item2 .title_link {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 2.8em;
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}


/*edit mode*/

.item2 .edit{
    padding: 4px 0 4px 0;
    border-radius: 10px;
    -moz-border-radius: 10px ;
    -webkit-border-radius:10px;
	position:relative;
    text-align: center;
}

.item2 .edit:hover{
	background-color:#ededed;
}
.item2 .edit p.btn_ng{
	position: absolute;
	top: 2px;
	right: 2px;
    display: inline-block; !important
    *display:inline;
    *zoom: 1.0;
	width: 17px;
	height:17px;
}
.item2 .edit p.btn_ng a{
    display: block;
	width: 17px;
	height:17px;
	background: url(/images/common/button/btn_ng.png) no-repeat 0 0;
	text-indent:-9999px;
}
.item2 .edit:hover p.btn_ng a{
	background-position:0 -17px;
}

/* item3*/
.item3{
    position: relative;
}
.item3 .thum{
    position: absolute;
    top: 0px;
    left: 25px;
}
.item3 .thum a{
    text-align: center;
    width: 100px;
    height: 80px;
    padding: 3px;
    display: block;
    *zoom: 1.0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #222;
    border-top: #111 1px solid;
    border-right: #333 1px solid;
    border-left: #111 1px solid;
    border-bottom: #333 1px solid;
}
.item3 .thum a:hover{ background-color: #333;}
.item3 .thum a img{
    max-width: 100px;
    max-height: 80px;
    vertical-align:middle;
}
.item3 .dsc{
    padding-left: 142px;
    height: 80px;
    display: table-cell;
    *display:inline;
    *zoom: 1.0;
    vertical-align:middle;
}
.item3 .dsc a{
    color: #ccc;
    font-weight: bold;
}
.item3 .dsc a:hover{
    color: #fff;
}
.item3 .dsc span{
    background-color:  #fff;
    border:2px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.item3 .dsc .text {
    color: #ccc
}

/* item4*/
.item4{float:left;}
.item4 a{
    display: block;
    width: 140px;
    height: 160px;
    background: url(/images/common/bg/bg_treelink.png) no-repeat  1px 0;
    border: #DFDFDF solid 1px;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
    -moz-box-shadow:1px 1px 3px #ddd;
    -webkit-box-shadow:1px 1px 3px #ddd;
    text-decoration: none;
    color: #666;
}
.item4 a:hover{
    background-position:  -159px 0;
}
.item4 a span{
        margin: 0 auto;
}
.item4 .thum{
    width: 90px;
    height: 70px;
    margin: 3px auto;
}
.item4 a .thum img{
    max-width: 90px;
    max-height: 70px;
    vertical-align:middle;
}
.item4 a .dsc {
    font-size: 12px;
    line-height: 14px;
    height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.item4 a p.oyako{
    font-size: 11px;
    color: #ff6600;
}
.item4 a p.oyako span{
    color: #aaa;
    padding: 0 3px;
}

.height30 {
    height: 30px;
    display: inline-block;
    *display:inline;
    *zoom: 1.0;
    vertical-align:middle;
}
.height60 {
    height: 60px;
    display: inline-block;
    *display:inline;
    *zoom: 1.0;
    vertical-align:middle;
}
.height70 {
     height: 70px;
    display: inline-block;
    *display:inline;
    *zoom: 1.0;
    vertical-align:middle;
}
.height80 {
    height: 80px;
    display: inline-block;
    *display:inline;
    *zoom: 1.0;
    vertical-align:middle;
}



/*************************************
 * error
 *************************************/

.error-area {
    background-color: #EAEAEA;
    padding: 24px;
    text-align: center;
    margin: 0 0 15px 0;
}
p.error-msg{
    font-size: 180%;
    color: #666666;
    line-height: 140%;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
    margin: 30px auto;
}
p.sub-error-msg{
    font-size: 140%;
    color: #666666;
    line-height: 140%;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
    margin: 30px auto;
}
.error-area p.txt{
    padding: 10px;
}

.error-area .remain{
    width: 140px;
    height: 25px;
    line-height:25px;
    display:block;
    margin: 6px auto;
    padding: 0 12px 0 12px;
    background-color: #FFF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: -1px -1px 1px #ddd;
    -webkit-box-shadow: -1px -1px 1px #ddd;
    text-align: center;
    color: #8A5506;
    font-weight: normal;
}
.error-area .remain strong{font-size: 150%; padding-right: 0.1em; font-family: Arial;font-weight: bold;}

.error-area-white {
    background-color: #FFF;
    padding: 25px;
    text-align: center;
    margin: 0 0 15px 0;
}

.error-area-left {
    background-color: #FFF;
    padding: 25px;
    text-align: left;
    margin: 0 0 15px 0;
}

/*************************************
 * icon
 *************************************/

.ic_tree{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/images/common/sprite/sprite_icon.png) no-repeat 0 -319px;
    text-indent: -9999px;
}
.ic_cps{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/images/common/sprite/sprite_icon.png) no-repeat 0 -289px;
    text-indent: -9999px;
}

.ic_collabo{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/images/common/sprite/sprite_icon.png) no-repeat 0 -1120px;
    text-indent: -9999px;
}

.status_douga{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 0;
    text-indent: -9999px;
    margin-top: 3px;
}

.status_live{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 -47px;
    text-indent: -9999px;
    margin-top: 3px;
}

.status_commons{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 -15px;
    text-indent: -9999px;
    margin-top: 3px;
}
.status_seiga{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 -30px;
    text-indent: -9999px;
    margin-top: 3px;
}
.status_solid{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 -65px;
    text-indent: -9999px;
    margin-top: 3px;
}

.status_game{
    display: block;
    width: 72px;
    height: 10px;
    background: url(/images/common/sprite/sprite_status.png) no-repeat 0 -80px;
    text-indent: -9999px;
    margin-top: 3px;
}

/*************************************
 * トップバー
 *************************************/

#Topbar  {
    color: #978578;
    padding: 3px 0 2px;
    background: #000000 url(/images/common/header/bg_topbar.png) repeat-x left bottom;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:21px;
    z-index:10;
}

#Topbar .centerizer  {
    width: 960px;
    margin: 0px auto;
    text-align: left;
    /zoom: 1.0;
}

#Topbar .centerizer:after { content: ""; display: block; clear: both; }

#Topbar .topbar-menu li {
    float: left;
    white-space: nowrap;
    font-size: 12px;
    line-height: 20px;
}

#Topbar .topbar-menu li a {
    color: #978578;
    text-decoration: underline;
}
#Topbar .topbar-menu li a:hover {
    text-decoration:none;
}
#Topbar .topbar-menu li.topbar-popup {
    position: relative;
    z-index: 90;
}

#Topbar .topbar-menu a.topbar-popup-link:hover {
    text-shadow: none;
    border-radius: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
}

#Topbar .topbar-menu .topbar-popup-menu a{display: block;}
#Topbar .topbar-menu .topbar-popup-menu a:hover{background-color: #555555;}

#Topbar .topbar-menu .topbar-popup-menu {
    display: none;
    position: absolute;
    background: url(/images/common/bg/bg_dropdown.png) repeat-x 0 0;
    top: 18px;
    padding: 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index: 1000;
    /zoom: 1.0;
}
#Topbar .topbar-menu li.topbar-popup:hover .topbar-popup-menu {
    display: block;
}
#Topbar .topbar-menu .topbar-popup-menu:after { content: ""; display: block; clear: both; }
#Topbar .topbar-menu .topbar-popup-menu.left-align {
    left: 0px;
    width:20em;
}
#Topbar .topbar-menu .topbar-popup-menu.right-align {
    right: 0px;
}
#Topbar .topbar-menu .topbar-popup-menu-left {
    width: 10em;
    float: left;
}
#Topbar .topbar-menu .topbar-popup-menu-right {
    width: 10em;
    float:right;
}
#Topbar .topbar-menu .topbar-popup-menu li {
    float: none;
    line-height: 120%;
    white-space: nowrap;
    color: #fff;
}
#Topbar .topbar-menu .topbar-popup-menu li a {
    float: none;
    display: block;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    text-decoration: none;
    color: #efefef;
    padding: 2px 5px;
}
#Topbar .topbar-menu .topbar-popup-menu li strong{
    float: none;
    display: block;
    padding: 2px 5px;
}

#TopbarFamilies {
    float: left;
}

#TopbarSitenav {
    float: right;
}
#TopbarSitenavWelcome {
    margin-right: 12px;
}
#TopbarSitenavWelcome .username-login {
    font-weight: bold; !important
}

#Topbar #TopbarLogin a {
    color:#CC0033;
}

/* ヘッダー 右メニュー */

#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align {
    left: -10em;
    width:15em;
    font-weight: bold;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align strong{
    display: block;
    background-color: #0C0C0C;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li ul {
    font-weight: normal;
    padding-bottom: 3px;
}
#Topbar .topbar-menu  .headmenu .topbar-popup-menu-left {
    width: 15em;
    float: left;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li  a{
    padding: 3px 0 3px 24px;
    background: url(/images/common/sprite/sprite_icon.png) no-repeat 0 0;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li a:hover{
    text-decoration: underline;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.menu-cptop a{
    background-position: 3px  -150px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.menu-cplist a{
    background-position: 3px   -177px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.menu-cpmsg a{
    background-position: 3px -258px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.menu-libmy a{
    background-position: 3px  -230px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.mebnu-liblist a{
    background-position: 3px -204px;

}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.menu-nglist a{
    background-position: 3px -956px;
}
#Topbar .topbar-menu .headmenu .topbar-popup-menu.left-align li.logout a{
    background-image: none; !important
    color: #B02866; !important
    padding: 3px 0 3px 3px;
    margin-left: -20px;
}
#Topbar .topbar-menu .headmenu .topbar#Topbar .topbar-menu-popup-menu-left {
    width: 200px;
    float: left;
}