/*--------------------------------------
    Global
---------------------------------------*/
body {
    color: #555;
    text-align: center;
    background-color: #998675;
    background-image: url(../image/bg.gif);
    background-position: center 0;
}

h1 {
}

    #signature-home h1 {
        margin-bottom: 1px;
    }

h2 {
    margin-top: 30px;
}

h3 {
    font-weight: bold;
    color: #000;
}

h4 {
}

h5,
h6 {
}

strong {
    color: #000;
}

table,
caption {
}

a {
    color: #3465A4;
    text-decoration: underline;
}

a:link {
}

a:visited {
}

a:hover {
    text-decoration: none;
}

/*--------------------------------------
    Global Classes
---------------------------------------*/

dl.table-format {
    margin: 15px 0;
    border-top: 2px solid #ddd;
    border-bottom: 3px solid #ddd;
}

dl.table-format dt {
    width: 11em;
    float: left;
    color: #555;
    padding: 5px;
    border-top: 1px solid #ddd;
}

dl.table-format dd {
    margin-left: 12em;
    padding: 5px;
    border-top: 1px solid #ddd;
}

a.jump-to-top-anchor,
a:hover.jump-to-top-anchor {
    background-color: transparent;
    border-style: none;
}

.note {
    font-size: 0.8em;
    color: #999;
    line-height: 1.5em;
}

.thumbnail {
    clear: both;
    border: 5px solid #eee;
}

.input-error {
    margin: 0;
    padding: 0;
    color: #f00;
    font-weight: bold;
}

.input-example {
    color: #999;
    font-size: 0.7em;
}

.attention {
    color: #f00 !important;
}

div.attention {
    margin: 1em 0;
    padding: 15px;
    border: 3px solid #f00;
    background-color: #FCFADD;
}

    div.attention h2,
    div.attention p {
        margin: 0 !important;
        padding: 0 !important;
    }

    div.attention h2 {
        color: #f00 !important;
    }
    
    div.attention p,
    div.attention ul {
        color: #790000 !important;
    }
    
.announcement {
    margin: 0;
    padding: 0;
}

ul.top-column {
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
}

    ul.top-column li {
        float: left;
        margin-right: 1px;
    }
    
    ul.top-column li.top-column-end {
        margin: 0;
    }

.balloon {
    background-color: #f0f0f0;
    padding: 5px 15px 35px 15px;
    background-image: url(../image/bg_balloon.gif);
    background-position: center bottom;
    background-repeat: no-repeat;
}

    .balloon p {
        text-indent: 1em;
    }
/*--------------------------------------
    Font Changer
---------------------------------------*/
#font-changer {
    position: absolute;
    top: 15px;
    right: 0;
}

    #font-changer #font-changer-label {
        float: left;
        width: 84px;
        height: 18px;
        text-indent: -9999px;
        background-image: url(../image/label_change-font-size.gif);
        background-position: 0 50%;
        background-repeat: no-repeat;
    }

    #font-changer ul {
        display: inline;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #font-changer ul li {
        float:left;
    }
    
    #font-changer #font-changer-small,
    #font-changer #font-changer-medium,
    #font-changer #font-changer-large {
        width: 18px;
        height: 18px;
        margin: 0 2px;
        text-indent: -9999px;
        background-position: 0 0;
        background-repeat: no-repeat;
    }
    
    #font-changer #font-changer-small {
        background-image: url(../image/button_small-font-size.gif);
    }
    
    #font-changer #font-changer-small:hover,
    #font-changer .font-changer-on#font-changer-small {
        background-image: url(../image/button_small-font-size_on.gif);
    }
    
    #font-changer #font-changer-medium {
        background-image: url(../image/button_medium-font-size.gif);
    }
    
    #font-changer #font-changer-medium:hover,
    #font-changer .font-changer-on#font-changer-medium {
        background-image: url(../image/button_medium-font-size_on.gif);
    }
    
    #font-changer #font-changer-large {
        background-image: url(../image/button_large-font-size.gif);
    }
    
    #font-changer #font-changer-large:hover,
    #font-changer .font-changer-on#font-changer-large {
        background-image: url(../image/button_large-font-size_on.gif);
    }
    
/*--------------------------------------
    Wrapper
---------------------------------------*/
#wrapper {
    width: 780px;
    margin: 0 auto;
    padding: 0 45px;
    line-height: 1.7em;
    font-size: 0.8em;
    background-color: #fff;
    text-align: left;
    background-image: url(../image/bg_wrapper.gif);
    background-position: center 0;

}

/*--------------------------------------
    Header
---------------------------------------*/
#header {
    position: relative;
    height: 85px;
}

    #header #logo {
        position: absolute;
        top: 15px;
        left: 0;
    }

    #header #description {
        display: none;
    }

    #header #sub-nav {
        position: absolute;
        top: 35px;
        right: 0;
    }

    ul.content-nav {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
    }
    
        ul.content-nav li.content-nav-previous {
            float: left;
        }
        
        ul.content-nav li.content-nav-next {
            float: right;
        }
/*--------------------------------------
    Global Navigation
---------------------------------------*/
ul#global-nav {
    margin: 0;
    padding: 0;
    list-style : none;
}

    ul#global-nav li {
        float: left;
        margin: 0;
        padding: 0;
    }
    
    #global-nav a:hover {
        background-color: transparent;
    }
    
    #global-nav li#global-nav-home a,
    #global-nav li#global-nav-promise a,
    #global-nav li#global-nav-product-list a,
    #global-nav li#global-nav-blog a,
    #global-nav li#global-nav-faq a,
    #global-nav li#global-nav-tidings a {
        display: block;
        overflow: hidden;
        width: 156px;
        height: 50px;
        background-repeat: no-repeat;
        text-indent: -9999px;
        text-decoration: none;
        border-style: none;
    }
    
    #global-nav li#global-nav-home a {
        background-image: url(../image/nav_home.gif);
    }
    
        #signature-home #global-nav-home a {
            background-image: url(../image/nav_home_on.gif) !important;
        }
        
        #global-nav li#global-nav-home a:hover {
            background-image: url(../image/nav_home_on.gif);
        }
    
    #global-nav li#global-nav-promise a {
        background-image: url(../image/nav_promise.gif);
    }
    
        #signature-promise #global-nav-promise a {
            background-image: url(../image/nav_promise_on.gif) !important;
        }
        
        #global-nav li#global-nav-promise a:hover {
            background-image: url(../image/nav_promise_on.gif);
        }
        
    #global-nav li#global-nav-product-list a {
        background-image: url(../image/nav_productlist.gif);
    }
    
        #signature-product #global-nav-product-list a {
            background-image: url(../image/nav_productlist_on.gif) !important;
        }
        
        #global-nav li#global-nav-product-list a:hover {
            background-image: url(../image/nav_productlist_on.gif);
        }
        
    #global-nav li#global-nav-blog a {
        background-image: url(../image/nav_blog.gif);
    }
    
        #signature-blog #global-nav-blog a {
            background-image: url(../image/nav_blog_on.gif) !important;
        }
        
        #global-nav li#global-nav-blog a:hover {
            background-image: url(../image/nav_blog_on.gif);
        }
        
    #global-nav li#global-nav-faq a {
        background-image: url(../image/nav_faq.gif);
    }
    
        #signature-faq #global-nav-faq a {
            background-image: url(../image/nav_faq_on.gif) !important;
        }
        
        #global-nav li#global-nav-faq a:hover {
            background-image: url(../image/nav_faq_on.gif);
        }
        
    #global-nav li#global-nav-tidings a {
        background-image: url(../image/nav_tidings.gif);
    }
    
        #signature-tidings #global-nav-tidings a {
            background-image: url(../image/nav_tidings_on.gif) !important;
        }
        
        #global-nav li#global-nav-tidings a:hover {
            background-image: url(../image/nav_tidings_on.gif);
        }

/*--------------------------------------
    Breadcrumbs
---------------------------------------*/
#breadcrumbs {
    font-size: 0.7em;
    padding: 3px 8px;
    background-image: url(../image/bg_breadcrumbs.gif);
    background-position: center 0;
}

html[xmlns] #breadcrumbs {
    font-size: 0.8em;
}

/*--------------------------------------
    Body
---------------------------------------*/
#body {
    clear: both;
    height: 100%;
    margin: 15px 0 60px 0;
    background-image: url(../image/vline-dot.gif);
    background-position: 570px 0;
    background-repeat: repeat-y;
}

/*--------------------------------------
    Content
---------------------------------------*/
#content {
    float: left;
    width: 550px;
    margin-top: -15px;
}

    #content h1 {
        margin: 30px 0 45px 0;
    }

    #signature-product #content h1,
    #signature-tidings #content h1 {
        margin: 15px 0;
        padding: 5px 0;
        border-bottom: 1px solid #000;
        font-weight: bold;
        color: #000;
        font-size: 1.1em;
    }
       
    #content h2 {
        clear: both;
        font-size: 1.1em;
        font-weight: bold;
        color: #8c6239;
    }
    
    #signature-home #content h2 {
    }
    
    #signature-product #content h2 {
        margin-top: 45px;
    }
    
    #content .wrapper-manager-voice {
        margin-bottom: 15px;
        padding-bottom: 15px;
        background-image: url(../image/bg_manager-voice.gif);
        background-position: 0 bottom;
        background-repeat: no-repeat;
    }
    
        #content .wrapper-manager-voice h2 {
                margin: 0 !important;
                border-bottom: 3px solid #ec008c;
        }    
        
            #content .wrapper-manager-voice .manager-voice {
                border-style: solid solid none solid;
                border-width: 1px;
                border-color: #ddd;
                padding: 15px 15px 0 15px;
            }
            
                
                #content .wrapper-manager-voice .manager-voice .manager-detail {
                    float: left;
                    width: 82px;
                    font-size: 0.8em;
                    line-height: 1.5em;
                    text-align: center;
                }
                
                #content .wrapper-manager-voice .manager-voice .manager-content {
                    margin-left: 120px;
                }
                
                #content .wrapper-manager-voice .manager-voice .manager-face {
                    border: 1px solid #ddd;
                }
    

    #content .wrapper-order-form {
        clear: both;
        margin: 90px 0 0 0;
        padding: 18px 0 0 0;
        background-image: url(../image/bg_breadcrumbs.gif);
        background-position: 0 top;
        background-repeat: repeat-x;
    }
    
        #content .wrapper-order-form .order-form {
            background-image: url(../image/vline-dot.gif);
            background-position: 265px 0;
            background-repeat: repeat-y;
        }
        
            #content .order-form .rollover {
                margin: 10px 0 0 0;
            }
            
            #content .order-form .order-detail {
                margin-left: 280px;
            }
            
            #content .order-form .product-name {
                font-weight: bold;
            }
            
            #content .order-form .product-price {
                font-weight: bold;
                color: #a40000;
            }
            
            #content .order-form .product-stock {
                font-weight: bold;
                color: #a40000;
            }
            
            #content .order-form .product-recital {
                font-weight: bold;
                color: #a40000;
            }

            #content .order-form h2 {
                clear: none;
                margin-top: 0 !important;
                font-size: 1em;
                font-weight: normal;
                line-height: 1.7em;
                color: #555;
            }
            
            #content .order-form dl {
                margin: 15px 0;
                padding: 5px 15px;
                border: 3px solid #c9c0b1;
                background-color: #f1ede6;
            }
        
                #content .order-form dl ul { 
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                
            #content .order-form dt {
                float: left;
                width: 5em;
                padding: 0;
                color: #000;
            }
        
            #content .order-form dd {
                margin-left: 5em;
                padding: 0;
            }

            #content .order-form select {
                width: 4em;
            }
            
                #content .order-form select.option {
                    width: 10em;
                }
            
    #content ul#order-attention,
    #content ul#review-attention {
        margin: 15px 0;
        padding: 0;
        font-size: 0.8em;
        background-color: #fafafa;
        border-style: solid none;
        border-width: 1px;
        border-color: #ddd;
    }
    
        #content ul#order-attention li,
        #content ul#review-attention li {
            margin: 0 0 0 3em;
        }
    
        #content #order-attention strong,
        #content #review-attention strong {
            color: #f00 !important;    
        }

    #content .wrapper-product {
        clear: both;
        margin: 0 0 15px 0;
    }
    
        #content .wrapper-product .product-odd {
            float: left;
            width: 49%;
        }
        
        #content .wrapper-product .product-even {
            float: right;
            width: 49%;
        }
        
        #content .wrapper-product .product-odd h3,
        #content .wrapper-product .product-even h3 {
            margin: 0 0 0 75px;
            padding: 0 0 5px 0;
            border-bottom: 1px solid #ddd;
            font-size: 1em;
            font-weight: bold;
            line-height: 1.2em;
        }
        
        #content .wrapper-product .product-odd p,
        #content .wrapper-product .product-even p {
            margin: 5px 0 0 75px;
            font-size: 0.7em;
            line-height: 1.7em;
        }

        /* Firefox、Mozilla、Safari、Opera */
        html[xmlns] #content .wrapper-product .product-odd p,
        html[xmlns] #content .wrapper-product .product-even p {
            font-size: 0.8em;
        }
        
        #content .wrapper-product .product-odd p.img-left,
        #content .wrapper-product .product-even p.img-left {
            margin-left: 0;
        }

/*
    #content ul.product-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
        #content ul.product-list li {
            float: left;
            width: 25%;
            text-align: center;
        }
        
        #content ul.product-list img {
            border: 1px solid #ddd;
        }
*/

    #content .product-list ul{
        clear: both;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
        #content .product-list ul li {
            float: left;
            margin-left: 5px;
            margin-right: 5px;
            width: 265px;
        }
        
        #content .product-list .product-image {
            float: left;
            margin: 0 15px 0 0;
        }
        
        #content .product-list .product-name {
            margin: 0 0 0 75px;
            padding: 0 0 5px 0;
            border-bottom: 1px solid #ddd;
            font-size: 1em;
            font-weight: bold;
            line-height: 1.2em;
        }
        
        #content .product-list .product-description {
            margin: 5px 0 0 75px;
            font-size: 0.7em;
            line-height: 1.7em;
        }
        
        /* Firefox、Mozilla、Safari、Opera */
        html[xmlns] #content .product-list .product-description {
            font-size: 0.8em;
        }
        
    
    #content .message {
        clear: both;
        padding: 30px 0 15px 0;
        text-align: center;
    }
    
    #content .content-left {
        float: left;
        width: 340px;
    }
    
    #content .content-right {
        float: right;
        width: 340px;
    }
    
    #content .item-list {
        clear: both;
    }
    
    
        #content .item-list h2 {
            font-weight: bold;
            color: #729FCF;
        }
        
        #content .item-list ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #content .item-list ul li {
            float: left;
            margin: 5px;
            width: 43%;
            padding: 15px;
            border: 1px solid #ddd;
        }
        
        #content .item-list ul li p {
            margin: 0;
        }
        
        #content .item-list ul li .thumbnail {
            float: left;
            padding: 0 15px 15px 0;
        }

    #content .review-content {
        margin: 0;
        background-color: #fafafa;
    }
    
/*--------------------------------------
    Side Bar
---------------------------------------*/
#sidebar {
    float: right;
    width: 190px;
    margin-top: -15px;
}
    #sidebar a {
        text-decoration: none;
    }
    
    #sidebar h2 {
        margin-bottom: 0;
        padding: 0;
    }
    
    #sidebar ul {
        margin-left:0;
        margin-right:0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #ddd;
    }
    
        #sidebar ul li {
            display: block;
            height: 100%;
            border-top: 1px solid #ddd;
        }
        
        #sidebar ul li a {
            display: block;
            height: 100%;
            padding: 8px 8px 8px 15px;
            border-style: none;
            color: #444;
            background-image: url(../image/arrow_circle.gif);
            background-position: 0 1.1em;
            background-repeat: no-repeat;
        }
        
        #sidebar ul li a:hover {
            color: #000;
            background-color: transparent;
            background-image: url(../image/arrow_circle_on.gif);
        }
        
        #sidebar ul#information li a {
            display: inline;
            color: #3465A4;
            padding: 0;
            background-image: none;
            text-decoration: underline;
        }
        
        #sidebar ul#information li a:hover {
            text-decoration: none;
        }
        
    #sidebar #tel {
        margin-top: 30px;
    }

    #sidebar #ssl-certificate {
        border: 1px solid #ddd;
        background-color: #fafafa;
    }
    
        #sidebar #ssl-certificate #ssl-certificate-image {
            text-align: center;
        }
        
        #sidebar #ssl-certificate #ssl-certificate-description {
            padding: 0 15px;
            font-size: 0.8em;
            line-height: 1.5em;
        }
   
    #sidebar #campaign,
    #sidebar #campaign * {
        padding: 0;
        border-style: none;
        background-image: none;
    }
            
        #sidebar #campaign li {
            padding-bottom: 5px;
        }
   
/*--------------------------------------
    Footer
---------------------------------------*/
#footer {
    position:relative;
    clear: both;
    margin: 15px 0 0 0;
    padding: 0 0 90px 0;
    border-top: 5px solid #000;
}

    #footer ul {
        margin: 5px 0 0 0;
        padding: 0;
        list-style: none;
    }

    #footer ul li {
        float: left;
        padding: 0 15px 0 0;
    }
    
    #footer .copyright {
        clear: both;
        position:absolute;
        top: 30px;
    }

    #footer .catch {
        position:absolute;
        top: 30px;
        right: 0;
    }
/*--------------------------------------
    Clearfix
---------------------------------------*/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1%; }
.clearfix { display:block; }
/* end MacIE5 */