/* =====================================================================
*
*    3. Yahoo UI Library Fonts CSS
*    http://developer.yahoo.com/yui/fonts/
*    *Copyright (c) 2006, Yahoo! Inc. All rights reserved.
*    *http://developer.yahoo.com/yui/license.txt
*    
*    Font-size Adjustment
*    
*     77% = 10px    |   122% = 16px |   167% = 22px 
*     85% = 11px    |   129% = 17px |   174% = 23px
*     93% = 12px    |   136% = 18px |   182% = 24px
*    100% = 13px    |   144% = 19px |   189% = 25px
*    107% = 14px    |   152% = 20px |   197% = 26px
*    114% = 15px    |   159% = 21px |   204% = 27px
*    212% = 28px    |   159% = 29px |   197% = 30px
*
* =================================================================== */

body {
    font-size: 13px;
    *font-size: small;
    *font: x-small;
}

table {
    font-size: inherit;
    font: 100%;
}
 
select, input, textarea {
    font-size: 99%;
}

/* =====================================================================
*
*    フォント
*
* =================================================================== */

/* ---------------------------------
*    Font Family
*/

body {
    font-family: 'icon','ヒラギノ角ゴ ProN W3','helvetica','arial','verdana','sans-serif';
}

/* ---------------------------------
*    Font Size
*/

.xx-large  { font-size: 200%; line-height: 1.8em; }
.mid-large { font-size: 182%; line-height: 1.4em; }
.x-large   { font-size: 164%; line-height: 1.8em; }
.large     { font-size: 144%; }
.mid       { font-size: 122%; }
.regular   { font-size: 107%; }
.small     { font-size:  92%; }
.mid-small { font-size:  85%; letter-spacing: 1px; }
.x-small   { font-size:  77%; letter-spacing: 1px; }


/* =====================================================================
*
*    リンク
*
* =================================================================== */

/* \*/ a { outline:none; overflow:hidden; } /**/
/* \*/ a:focus { outline:none; overflow:hidden; } /**/

a:link        { color: #000000; text-decoration: none; }
a:visited     { color: #000000; text-decoration: none; }
a:hover       { color: #000000; text-decoration: none; }
a:active      { color: #000000; text-decoration: none; }


/* =====================================================================
*
*    共通
*
* =================================================================== */

/* ---------------------------------
*    clearfix
*/

.clearfix { min-height: 1%; }

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from Mac IE \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Hides from Mac IE */

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

.line-through { text-decoration: line-through !important; }
.unit { margin-bottom: 1.5em; clear: both; }
.underline { text-decoration: underline !important; }

/* ---------------------------------
*    ボタン
*/

.btn {
    text-align: center;
    display: block;
    text-decoration: none !important;
}

/* ---------------------------------
*    タイトル
*/

.unit h3 {
    padding: 1em;
    background-color: #ccc;
    font-size: 14px;
}

/* ---------------------------------
*    グローバルナビ
*/

/* 1列 */
.global-nav-1 li {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.global-nav-1 li:first-child { border-top: 1px solid #eee; }

.global-nav-1 li a {
    display: block;
    padding: 1em;
}

/* 2列 */
.global-nav-2 li {
    display: inline-table;
    width: 50%;
    float: left;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.global-nav-2 li:first-child, .global-nav-2 li:nth-child(2) { border-top: 1px solid #eee; }
.global-nav-2 li:nth-child(even) {
    border-right: none;
}

.global-nav-2 li a {
    display: table-cell;
    padding: 0 .5em;
    height: 60px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ---------------------------------
*    商品一覧表示
*/

.product-price { line-height: 1.3; }
.product-price .special { color: #f00; }
.product-price .line-through {
    display: block;
    color: #000;
    /*margin-bottom: .3em;*/
}

.product-name .icon { line-height: 0; }
.product-name .icon img {
    height: 20px;
    margin: 0 1px 1px 0;
    vertical-align: middle;
}

/* 2列 */

.product-list-2 li {
    float: left;
    position: relative;
    width: 49.999%;
    margin-bottom: 1.5em;
}

.product-list-2 li div {
    width: 90%;
    margin: 0 auto;
}

.product-list-2 li div p { margin-bottom: .3em; }

.product-list-2 .product-image { position: relative; }
.product-list-2 .product-image img {
    width: 100%;
    height: auto;
}

.product-list-2 .product-name {
    line-height: 1.3;
    padding: .3em 0;
}

.product-list-2 .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}

/* 3列 */
.product-list-3 {
    margin-top: 1.5em;
}

.product-list-3 li {
    float: left;
    position: relative;
    width: 33.333%;
    margin-bottom: 1.5em;
}

.product-list-3 li div {
    width: 90%;
    margin: 0 auto;
}

.product-list-3 .product-image { position: relative; }
.product-list-3 .product-image img {
    width: 100%;
    height: auto;
}

.product-list-3 .rank {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #000;
}

.product-list-3 .rank1 { background-color: #FFB100; }
.product-list-3 .rank2 { background-color: #B6B6B6; }
.product-list-3 .rank3 { background-color: #AA6D44; }

.product-list-3 .product-name span {
    line-height: 1.6;
    padding: .3em 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-list-3 .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}


/* 1列（商品一覧リスト型） */

.product-list-2 .product-image-variation { display: none; }

.product-list li {
    position: relative;
    width: 96%;
    padding: 4% 2%;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.product-list .product-image {
    position: relative;
    float: left;
    width: 140px;
}

.product-list .product-image img {
    width: 140px;
}

.product-list .product-name,
.product-list .product-price,
.product-list .product-set-promotion,
.product-list .product-image-variation {
    float: right;
    width: 50%;
    margin-bottom: .3em;
    line-height: 1.3;
}

.product-list .product-image-variation { clear: both; }
.product-list .product-image-variation img { width: 45px; }

.product-list .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}

/* もっと見るボタン */

.unit .view-more a {
    width: 70%;
    background-color: #000;
    color: #fff;
    padding: 1em 0;
    margin: 0 auto;
}

/* 領収書出力関連　*/
.receipt-download-unit {
  margin-bottom: 2em;
}
.receipt-download-unit h2 {
  padding: .5em;
  background-color: #CCC;
  font-size: 15px;
}
.receipt-download-unit .msg {
  padding: .5em;
  line-height: 1.5;
  text-align: center;
  font-size: 12px;
  color: #ff0000;
}
.receipt-download-unit .button {
  padding: 1em;
}
.receipt-download-unit .button-next .btn {
  padding: 1.5em 0;
  background-color: #000;
  color: #fff;
}

/* ---------------------------------
*    ページトップ
*/

.page-top a {
    background-color: #333;
    color: #fff;
    padding: 1em 0;
}

/* ---------------------------------
*    エラーページ/Error
*/

.error-unit {
    margin-bottom: 2em;
}

.error-unit h2 {
    padding: .5em;
    background-color: #CCC;
    font-size: 15px;
}

.error-unit .msg {
    padding: .5em;
    line-height: 1.5;
    font-size: 12px;
}

.error-unit .button {
    padding: 1em;
}

.error-unit .button-next .btn {
    padding: 1.5em 0;
    background-color: #000;
    color: #fff;
}

.error-unit .button-prev .btn {
    padding: 1.5em 0;
    background-color: #ccc;
}

.msg-alert {
    padding: 1em;
    text-align: center;
}

/* ---------------------------------
*    パンくず/ページャー
*/

.breadcrumbs {
    font-size: 11px;
    line-height: 1.5;
    padding: .5em;
    background-color: #eee;
}

.pager-wrap {
    background-color: #333;
}

.below .total { display: none; }

.pager-wrap .pager {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.pager-wrap .pager li {
    display: table-cell;
    text-align: center;
    color: #fff;
    padding: .7em 0;
}

.pager-wrap .pager li a {
    display: block;
    color: #fff;
}

.above .pager-nums { display: none; }
.below .page-now { display: none; }

.pager-wrap .pager-nums {
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 2px;
}

.pager-wrap .pager-nums a {
    display: inline !important;
    color: #fff;
    text-decoration: underline;
}


/* =====================================================================
*
*    ヘッダー
*
* =================================================================== */

.header {
    background: #000;
    height: 40px;
}

.header .logo-main {
    float: left;
}

/* ロゴがテキストの場合 */

.header .logo-main h1 a {
    color: #fff;
    line-height: 40px;
    margin-left: 10px;
    font-size: 13px;
}

/* ヘッダーグローバルナビ */

.header nav {
    float: right;
    height: 40px;
}

.header ul li {
    display: inline-block;
}

.header ul li a {
    display: block;
}

.header ul li a.active {
    background-color: #fafafa;
}

.header ul li a {
    text-indent: -999em;
    display: block;
    width: 40px;
    height: 40px;
    background-position: 0 0;
    background-size: 40px 40px;
}

.header ul li a#toggle-search { background-image: url('../Contents/ImagePkg/common/icon-search.png'); }
.header ul li a#toggle-search.active { background-image: url('../Contents/ImagePkg/common/icon-search_active.png'); }

.header ul li a#toggle-global-menu { background-image: url('../Contents/ImagePkg/common/icon-bar.png'); }
.header ul li a#toggle-global-menu.active { background-image: url('../Contents/ImagePkg/common/icon-bar_active.png'); }


/* ---------------------------------
*    ヘッダーユーザーナビ
*/

.header-user-nav ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.header-user-nav ul li {
    display: table-cell;
    width: 50%;
}

.header-user-nav ul li.is-login {
    font-size: 11px;
    padding: .5em;
}

.header-user-nav ul li.point {
    text-align: right;
}

.header-user-nav ul li .btn {
    width: 96%;
    margin: 2%;
    padding: 1em 0;
    background-color: #000;
    color: #fff;
}

/* ---------------------------------
*    ヘッダーグローバルナビ
*/

.header-toggle {
    display: none;
    background-color: #fafafa;
}

.header-toggle .button {
    padding: 1em 0;
    background-color: #000;
}

.header-toggle .button .close {
    width: 60%;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #fff;
    color: #000;
}

/* ミニカート */

.minicart-table {
    width: 95%;
    padding-top: 2px;
    margin: 10px;
}

.minicart-table td:nth-child(1) {
    width: 75px;
    vertical-align: top;
    margin-left: 5px;
}

.minicart-table td {
    line-height: 1.5em;
}

.minicart-table tr {
   border-top: 5px solid transparent;
}

.delete-product {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
    background-color: #eee;
}

.delete-product a {
    padding: 10px 0;
    background-color: #333;
    color: #fff;
}

.minicart .inner {
    margin: 1em 0;
}

.minicart .total {
    text-align: center;
    margin-bottom: 1em;
}

.minicart .view-cart .btn {
    width: 80%;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #000;
    color: #fff;
}

.minicart .empty {
    text-align: center;
}

/* =====================================================================
*
*    フッター
*
* =================================================================== */

.footer-wrap { background-color: #fafafa; }

.all-products a {
    background-color: #000;
    color: #fff;
    padding: 1.5em 0;
}

.footer-wrap .footer-menu {
    background-color: #666;
    font-size: 11px;
    padding: 1em;
}

.footer-wrap .footer-menu ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.footer-wrap .footer-menu ul li {
    display: table-cell;
}

.footer-wrap .footer-menu ul li a { color: #fff; }

footer small {
    display: block;
    clear: both;
    padding: 1em 0;
    text-align: center;
    color: #fff;
}

footer .switch-view {
    text-align: center;
    padding: .3em 0;
    color: #fff;
}

footer .switch-view a {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------
*    お問い合わせ
*/

footer {
    background-color: #000;
    padding: 1em 0;
}

footer .inner {
    width: 90%;
    margin: 0 auto;
}

.contact-form {
    float: left;
    width: 45%;
    background-color: #fff;
}

.contact-form .btn {
    padding: 1.3em 0;
}

.contact-info {
    float: right;
    width: 50%;
    color: #fff;
    font-size: 12px;
}

.contact-info dl dt {
    width: 50px;
    padding: .2em;
    float: left;
    clear: left;
}

.contact-info dl dd {
    padding: .2em;
    margin-left: 60px;
    word-wrap: break-word;
}
.contact-info dl dd a { color: #fff; }