@CHARSET "UTF-8";

/* Defaults */
html,
body {
    margin: 0;
    padding: 0;
    color: #555555;
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

/* Class */
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

/* Header */
section#header {
    margin: 0;
    padding: 0;
    width: 290px;
    height: 104px;
    overflow: hidden;
}

section#header a {
    display: inline-block;
    white-space: nowrap;
    color: #555555;
    text-indent: 100%;
    text-decoration: none;
    background-image: url(img/header.png);
    background-repeat: no-repeat;
    overflow: hidden;
}

section#header > h1 {
    margin: 0;
    padding: 0;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
}
section#header > h1 > span {
    display: block;
    white-space: nowrap;
    float: left;
}
section#header > h1 > strong {
    display: block;
    margin: 0 0.5em;
    max-width: 132px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    float: left;
}
section#header > h1 > a {
    display: block;
    margin: 0 0 0 1.0em;
    white-space: nowrap;
    float: right;
}

/* Header Link - Login */
section#header > h1 > a.login {
    width: 48px;
    height: 20px;
    background-position: 0 top;
}
section#header > h1 > a.login:hover {
    background-position: 0 bottom;
}

/* Header Link - Logout */
section#header > h1 > a.logout {
    width: 58px;
    height: 20px;
    background-position: -56px top;
}
section#header > h1 > a.logout:hover {
    background-position: -56px bottom;
}

/* Header for Guest */
section#header > div.guest {
    margin: 0;
    padding: 0;
    height: 80px;
    border: 2px solid #EC8802;
    border-radius: 5px;
    overflow: hidden;
}

/* Header for Guest Link - Register */
section#header > div.guest > a.register {
    display: block;
    margin: 2px;
    width: 281px;
    height: 48px;
    background-position: -120px top;
}
section#header > div.guest > a.register:hover {
    background-position: -120px bottom;
}

/* Header for Guest Nav - Official Shop */
section#header > div.guest > nav {
    height: 27px;
    background: url(img/nav.png) 0 top repeat-x;
    border-top: 1px solid #CCCCCC;
}

/* Header for Guest Link - Official Shop */
section#header > div.guest > nav > a.official-shop {
    display: block;
    width: 143px;
    height: 27px;
    background-position: -408px top;
    float: left;
}
section#header > div.guest > nav > a.official-shop:hover {
    background-position: -408px bottom;
}

/* Header for Guest Link - Serial */
section#header > div.guest > nav > a.serial {
    display: block;
    width: 142px;
    height: 27px;
    background-position: -552px top;
    border-left: 1px solid #CCCCCC;
    float: left;
}
section#header > div.guest > nav > a.serial:hover {
    background-position: -552px bottom;
}

/* Header for Member */
section#header > div.member {
    margin: 0;
    padding: 0;
    height: 80px;
    background: url(img/bg.png) 0 0 no-repeat;
    border: 2px solid #D20212;
    border-radius: 5px;
    overflow: hidden;
}
section#header > div.member > div {
    margin: 4px 4px 0 113px;
    height: 53px;
}
section#header > div.member > div > div {
    margin: 0 0 0 58px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    text-align: right;
}
section#header > div.member > div > div > strong {
    margin: 0 0.25em 0 0;
}

section#header > div.member > div > nav {
    margin: 2px 0 0 0;
    height: 24px;
}

/* Header Link - Official Shop for Member */
section#header > div.member > div > nav > a.official-shop {
    display: block;
    width: 85px;
    height: 24px;
    background-position: -696px top;
    float: left;
}
section#header > div.member > div > nav > a.official-shop:hover {
    background-position: -696px bottom;
}

/* Header Link - Official Site for Member */
section#header > div.member > div > nav > a.official-site {
    display: block;
    width: 84px;
    height: 24px;
    background-position: -784px top;
    float: left;
}
section#header > div.member > div > nav > a.official-site:hover {
    background-position: -784px bottom;
}


section#header > div.member > nav {
    background: url(img/nav.png) 0 bottom repeat-x;
    border-top: 1px solid #CCCCCC;
    height: 22px;
}

/* Header Link - Button Cart for Member */
section#header > div.member > nav > a.cart {
    display: block;
    width: 89px;
    height: 22px;
    text-indent: 0;
    text-align: right;
    background-position: -872px top;
    border-right: 1px solid #CCCCCC;
    float: left;
}
section#header > div.member > nav > a.cart:hover {
    background-position: -872px bottom;
}

/* Header Link - Button Notification for Member */
section#header > div.member > nav > a.notification {
    display: block;
    width: 89px;
    height: 22px;
    text-indent: 0;
    text-align: right;
    background-position: -968px top;
    border-right: 1px solid #CCCCCC;
    float: left;
}
section#header > div.member > nav > a.notification:hover {
    background-position: -968px bottom;
}

section#header > div.member > nav > a.cart > strong,
section#header > div.member > nav > a.notification > strong {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
    text-align: center;
}
section#header > div.member > nav > a.cart > strong {
    margin: 0 5px 0 0;
}
section#header > div.member > nav > a.notification > strong {
    margin: 0 8px 0 0;
}



/* Header Link - Button Serial for Member */
section#header > div.member > nav > a.serial {
    display: block;
    width: 106px;
    height: 22px;
    background-position: -1064px top;
    float: left;
}
section#header > div.member > nav > a.serial:hover {
    background-position: -1064px bottom;
}