@charset "utf-8";

#header{
    margin: 0 0 5px;
    font-family: "Meiryo","メイリオ","ＭＳ　Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
    border-bottom: 5px solid #f83f4c;
}
h1.header_title{
   float: left;
   height: 15px;
   margin: 0 auto;
   padding: 5px 0 10px;
   font-size: 11px;
   text-align: left;
   color: #666;
   max-width: 500px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.navi_area #logo{
    width: 170px;
    height: 45px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.navi_area #logo a{
    display: block;
}
.header_info {
    width: 100%;
    height: 28px;
    margin-bottom: 2px;
    background: #f3f0e6;
    border-bottom: 1px solid #aaa;
    position: fixed;
    top: 0;
    z-index: 100;
}
.header_info ul {
    float: right;
}
.header_info li {
    float: left;
    text-align: center;
}
.header_info a {
    display: block;
    color: #555;
}
.header_info .header_inner {
    width: 950px;
    margin: 0 auto;
    overflow: hidden;
}
.header_info a:hover {
    text-decoration: none;
}

/* 検索窓 */
.top_search{
    float: right;
    margin-top: 8px;
    overflow:hidden;
}
.top_search ul{
    float:left;
    overflow:hidden;
    padding:6px;
    background:#eaeaea;
    border-top: 1px solid #bebebe;
    border-left: 1px solid #bebebe;
    border-bottom: 1px solid #bebebe;
    border-radius: 5px 0 0 5px;
}
.top_search ul li{
    float:left;
}
.top_search ul li:first-child{
    margin:0 5px 0 0;
}
.top_search ul input{
    display:none;
}
.top_search ul label{
    border-radius:2px;
    padding:2px 0;
    display:block;
    width:55px;
    color:#36ae81;
    text-align:center;
    background:#fff;
    border:#36ae81 1px solid;
    box-shadow:0px 1px 0px 0px #b1b1b1;
}
.top_search input[type="radio"]:checked + label{
    color:#fff;
    background:#36ae81;
}
.top_search ul label:hover{
    transition: all 0.8s;
    background:#fff8d6;
}
.top_search ul .checked{
    color:#fff;
    background:#36ae81;
}
.top_search .searchbox{
    overflow:hidden;
}
.top_search .searchbox input{
    float: left;
    height: 38px;
    border:none;
    box-sizing: border-box;
    font-family:  "Meiryo","メイリオ","ＭＳＰゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@-moz-document url-prefix() {
    .top_search .searchbox input {
        height: 39px;
    }
}
.top_search .searchbox input[type="text"]{
    width: 230px;
    padding: 0 0 0 10px;
    border-top: 1px solid #bebebe;
    border-bottom: 1px solid #bebebe;
    border-radius:0px;
    outline: none;
}
.top_search .searchbox input[type="submit"]{
    width: 60px;
    background: #FF4B4E;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    color: #fff;
}
.top_search .searchbox input[type="submit"]:hover{
    transition: all 0.8s;
    background:#c6000c;
}
.header_txt{
    width: 950px;
    margin: 0 auto;
    overflow: hidden;
}
.header_sub{
    width: 950px;
    margin: 0 auto;
    padding-top: 35px;
    overflow: hidden;
}

/* ---------------------------------------メンバーナビ */

/* 共通 */
.header_info{
    width: 100%;
    height: 32px;
    margin-bottom: 2px;
    background: #4a4a4a;
    color:#fff;
    border-bottom: 2px solid #121212;
    position: fixed;
    top: 0;
    z-index: 100;
    font-size:12px;
}
.header_info ul{
    float: right;
}
.header_info li{
    float: left;
    text-align: center;
}
.header_info a{
    display: block;
    color: #555;
}
.header_info .header_inner{
    width: 950px;
    margin: 0 auto;
    overflow: hidden;
}
.header_info li a{
    color:#fff;
    text-decoration:none;
}

/* ユーザー情報 */
.header_info .user_name span{
    position:relative;
    top:6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:inline-block;
    max-width:150px;
    margin:0 5px 1px 0;
    padding:1px 0 0 0;
}
.header_info .user_pt{
    max-width:140px;
}
.header_info .user_pt a{
    border-right: 1px solid #121212;
    padding: 5px 10px 5px 20px;
    color: #fff260;
    background:url(../../img/10/icon/ico-pt.png) 5px 9px no-repeat;
    font-size:14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header_info .user_pt a:hover{
    transition: all 0.8s;
    background-color:#000;
}

/*あと何ポイント*/
.header_info li.pt_bar {
    border-right: 1px solid #121212;
    padding: 6px 8px;
}
.header_info li.pt_bar .until span{
    font-weight:bold;
    color: #fff260;
}

/* メニューアイコン */
.header_info li a{
    display:block;
    padding: 7px 9px 6px 33px;
    border-right: 1px solid #121212;
}
.header_info li.change a{
    background: url(../../img/10/base/header/icon_change.png) 7px 6px no-repeat;
}
.header_info li.webmail a{
    background: url(../../img/10/base/header/icon_mail.png) 8px 5px no-repeat;
}
.header_info li.pt_history a{
    background: url(../../img/10/base/header/icon_passbook.png) 6px 5px no-repeat;
}
.header_info li.info a{
    background: url(../../img/10/base/header/icon_info.png) 6px 5px no-repeat;
}
.header_info li.mypage a{
    background: url(../../img/10/base/header/icon_mypage.png) 8px 5px no-repeat;
}
.header_info li.help a{
    background: url(../../img/10/base/header/icon_help.png) 3px 5px no-repeat;
}
.header_info li.beginner a{
    background: url(../../img/10/base/header/icon_beginner.png) 8px 6px no-repeat;
}
.header_info li.favorite a{
    background: url("../../img/10/base/header/icon_favorite.png") 8px 6px no-repeat;
}
.header_info li.change a:hover,
.header_info li.change a:hover,
.header_info li.webmail a:hover,
.header_info li.pt_history a:hover,
.header_info li.info a:hover,
.header_info li.mypage a:hover,
.header_info li.help a:hover,
.header_info li.beginner a:hover{
    transition: all 0.8s;
    background-color:#000;
}
/* お知らせアイコン */
.header_info li.info a .new_info{
    display:inline-block;
    width:20px;
    margin:0 0 0 5px;
    border-radius:50px;
    color:#fff;
    background:#fc4752;
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* 会員登録・ログイン */
.header_info li.register a,
.header_info li.login a {
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    width: 200px;
    height: 28px;
    padding:5px 0 0;
}
.header_info li.register a{
    background: #0b9d00;
}
.header_info li.login a{
    background: #fc4752;
}
.header_info li.register a:hover{
    transition: all 0.8s;
    background:#086c00;
}
.header_info li.login a:hover{
    transition: all 0.8s;
    background:#ba2932;
}
.header_info li.register em {
    color: #ff0;
    font-weight: bold;
}

/* ---------------------------------------グローバルナビ */
.navi_area {
    width: 950px;
    margin: 0 auto;
    position: relative;
    height: 65px;
}

#global_navi{
    width: 740px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #C1C1C1;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#global_navi ul li{
    float:left;
    display:inline;
}
#global_navi ul li#gnav_top{
    width: 60px;
    height: 45px;
}
#global_navi ul li{
    width: 185px;
    position:relative;
    margin: auto;
}
#global_navi ul li a{
    display: block;
    padding: 10px 0;
    border-right: 1px solid #C1C1C1;
    font-size: 16px;
    color: #5A3E19;
    font-weight: bold;
    text-decoration: none;
}
#global_navi ul li:first-child a:hover{
    border-top-left-radius: 5px;
}
#global_navi ul li:last-child a:hover{
    border-top-right-radius: 5px;
}
#global_navi ul li a:hover{
    background: #FEF1C2;
}
#global_navi ul li a:hover{
    background: #FEF1C2;
}
#global_navi ul li a span{
    color: #EE5F32;
    font-size: 12px;
}
#global_navi ul li:last-child a{
    border-right: none;
}

/*  NEW新着アイコン */
#global_navi ul li p img{
    position:absolute;
    top: -14px;
    left: 21px;
}
#global_navi ul li .newly_arrived{
    position:absolute;
    padding: 1px 0;
    top: -13px;
    left: 53px;
    width: 75px;
    background-color: #3DBA8F;
    border-radius: 3px;
    text-align: center;
    border-radius: 10px;
}
#global_navi ul li .newly_arrived:before{
    content: "";
    position: absolute;
    bottom: -4px;
    left: 40px;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-top: 6px solid #3DBA8F;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
#global_navi ul li .newly_arrived p{
    color:#FFF;
}
#global_navi ul li .newly_arrived p span{
    color:#FF0;
    font-weight:bold;
}

/* ---------------------------------------グローバルナビ下 */
#headbottom {
    width: 950px;
    height: 16px;
    margin: 0 auto;
    padding: 4px 0 4px;
    border-bottom: 1px dotted #ccc;
}

#headbottom #pr {
    float: left;
    height: 16px;
    padding: 0 0 0 4px;
}

#headbottom #pr .to-dtl {
    background:url("../../img/10/top/icon-list.gif") no-repeat scroll 0 -256px transparent;
    margin:0 0 0 3px;
    padding:0 0 0 11px;
    position:relative;
    white-space:nowrap;
}

/* ---------------------------------------パンクズリスト */
#headbottom #breadcrumb-list {
    float: left;
    height: 16px;
    padding: 0 0 0 4px;
}

#headbottom #breadcrumb-list li {
    float: left;
    margin-left: 5px;
    padding-right: 10px;
    font-size: 100%;
    height: 14px;
}

#headbottom #breadcrumb-list li.crumb-yaji {
    background: transparent url(../../img/10/icon/gt.gif) no-repeat scroll right 1px;
}

*:first-child+html #headbottom #breadcrumb-list li.crumb-yaji {
    background: transparent url(../../img/10/icon/gt.gif) no-repeat scroll right top;
}

#headbottom #breadcrumb-list li h2 {
    display: inline;
}

/* ---------------------------------------ヘルプ・サイトマップ・はじめて */
#headbottom #snav {
    float: right;
    height: 18px;
    padding: 0;
}

#headbottom #snav ul {
    float: right;
    height: 16px;
}

#headbottom #snav ul li {
    float: left;
    height: 16px;
    margin: 0 0 0 10px;
}

#headbottom #snav ul #help {
    background: url(../../img/10/top/icon-headnavi.gif) 0 0 no-repeat;
}

#headbottom #snav ul #sitemap {
    background: url(../../img/10/top/icon-headnavi.gif) 0 -20px no-repeat;
}

#headbottom #snav ul #beginner {
    background: url(../../img/10/top/icon-headnavi.gif) 0 -40px no-repeat;
}

#headbottom #snav ul li a {
    padding: 0 0 0 18px;
}

/* ------------------------------サイドメニュー共通------------------------------ */

#aside .top_mypage_side li a:hover{
    background-color: #fff8d6;
    transition: all 0.4s;
}
#aside .top_mypage_side .point,
#aside #adbanner .comment .point{
    color:#ff5555;
    font-weight:bold;
    font-size:18px;
}

/* --------------------ブランドバナー */
#aside #adbanner {
    width: 300px;
    margin: 0 0 20px;
    overflow:hidden;
}
#aside #adbanner .banner {
    width: 300px;
    margin: 0 auto 5px;
    text-align: center;
    padding: 0;
    background-color: #eee;
}
#aside #adbanner .banner:hover {
    background-color: #e5f5f5;
}
#aside #adbanner .comment {
    width: 300px;
    text-align: center;
}
#aside #adbanner .comment .point {
    padding: 0 0 0 16px;
    font-size:14px;
    background: url(../../img/10/top/icon-list.gif) 0 1px no-repeat;
}
#aside #adbanner .condition {
    margin: 2px 0 0;
    position: relative;
    left: 50%;
    float: left;
}
#aside #adbanner .condition .adding {
    padding: 0px;
    color: #929292;
    float: left;
    position: relative;
    left: -50%;
}
#aside #adbanner .condition .to-dtl {
    float: left;
    margin:0 0 0 10px;
    padding: 0 0 0 11px;
    background: url("../../img/10/top/icon-list.gif") no-repeat 0 -256px;
    white-space: nowrap;
    position: relative;
    left: -50%;
}
/* --------------------サイドバナー */

#aside .top_mypage_side {
    width: 298px;
    margin:0 0 20px;
    font-family: "Meiryo","メイリオ","ＭＳ　Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
}
#aside .top_mypage_side li{
    border:#cccccc 1px solid;
    border-radius:2px;
    overflow:hidden;
    margin:0 0 10px;
}
#aside .top_mypage_side li a{
    display:block;
    text-decoration:none;
    color:#4d4d4d;
    padding:15px 0 0;
}
#aside .top_mypage_side li h3{
    font-size:15px;
    font-weight:bold;
    line-height:18px;
    margin:0 10px 10px;
}
#aside .top_mypage_side li .box{
    overflow:hidden;
    padding:0 10px;
    margin:0 0 10px;
}
#aside .top_mypage_side li .left_box,
#aside .top_mypage_side li .right_box{
    float:left;
}
#aside .top_mypage_side li .right_box{
    width: 138px;
    margin:0 0 0 8px;
}
#aside .top_mypage_side li .right_box .point{
    padding:0 0 0 17px;
    color:#ff5555;
    font-weight:bold;
    font-size:17px;
    background:url("../../img/icon/ico-pt.gif") 0 7px no-repeat;
}
#aside .top_mypage_side li .right_box .condition p{
    font-size:12px;
    color:#929292;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#aside .top_mypage_side li .comment{
    background:#f6f6f6;
    color:#4d4d4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:10px;
}

/* ---------------------------------------フッター要素 */
#footer {
    width: 950px;
    height: 300px;
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    padding-top: 15px;
    border-top: 1px dotted #ccc;
    background: url(../../img/10/base/footer.jpg) 0 bottom no-repeat;
}

#footer .footer_ad {
    width: 728px;
    margin: 0 auto 20px;
}

#footer #company {
    width: 950px;
    margin: 0 0 23px;
}

#footer #company ul {
    padding: 0 0 2px;
    text-align: center;
}

#footer #company ul li {
    display: inline;
    margin: 0 0 0 9px;
    padding: 0 9px 0 0;
    border-right: 1px solid #555;
}

#footer #company ul .first {
    margin: 0;
    padding: 0 9px;
    border-right: 1px solid #555;
    border-left: 1px solid #555;
}

#footer #copyright {
    width: 950px;
}

#footer #copyright p {
    line-height: 130%;
    text-align: center;
}

a {
    color: #04c;
}

a:visited {
    color: #639;
}

a:hover {
    color: #6cf;
}

/* -------------------------------------フローティングバナー */
#floating {
    bottom: 0;
    clear: both;
    display: block;
    position: fixed;
    width: 100%;
    text-align: center;
    /*z-index: 1100;*/
}
#floating .btn {
    bottom: 0;
    height: 29px;
    margin: 0 auto;
    text-align: right;
    width: 100%;
    position: absolute;
    top: -29px;
    right:0;
}
#floating .btn img {
    cursor: pointer;
    height: 30px;
    margin: 0 15px 0 0;
    width: 97px;
}
#floating .content {
    background: url("../../img/10/floating/floating_bg.png") repeat scroll 0 0 transparent;
    border-top: 1px solid #ea2323;
    height: 98px;
    margin: 0 auto;
    padding: 6px 0;
    text-align: center;
    width: 100%;
}
#floating .content a {
    background-color: #ffffff;
    display: block;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
    padding: 4px;
    width: 728px;
}