@charset "utf-8";

/* ===================================================================
css information

File Name  : header.css
Author     :
Style Info : ヘッダー
=================================================================== */

/*********************************************************************

#header-pc

*********************************************************************/

#header-pc { width:100%; position:fixed; top:0; left:0; z-index:100; }
#header-pc a { color: inherit !important; text-decoration:none; }
#header-pc img { width:100%; height:auto; }

#header-pc .header-main { position:relative; padding:0 15px; background:#fff; border-bottom:#ddd 1px solid; }
#header-pc .header-logo { bottom:3px; }
#header-pc .header-logo a { display:block;}
#header-pc .header-logo img { width:50px; }

/* header-content-nav */
#header-pc .header-content-nav { position:static;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
#header-pc .header-content-nav .nav-btn { position:relative; }
#header-pc .header-content-nav .nav-btn,
#header-pc .header-content-nav .nav-btn a { height:100%; }
#header-pc .header-content-nav .nav-btn > a { display:block; white-space:nowrap; }
#header-pc .header-content-nav .nav-btn > a:before,
#header-pc .header-content-nav .nav-btn > a span { display:inline-block; vertical-align:middle; }
#header-pc .header-content-nav .nav-btn > a:before { content:''; width:0; height:100%; }
#header-pc .header-content-nav .nav-btn.drop-arrow > a,
#header-pc .header-content-nav .nav-btn.search-arrow > a { position:relative; }
#header-pc .header-content-nav .nav-btn.drop-arrow > a:after,
#header-pc .header-content-nav .nav-btn.search-arrow > a:after { content:''; position:absolute; top:50%; right:0; background-repeat:no-repeat; background-position:center center; background-size:100% 100%; }
#header-pc .header-content-nav .nav-btn.drop-arrow > a { padding-right:20px; }
#header-pc .header-content-nav .nav-btn.drop-arrow > a:after { width:12px; height:7px; margin-top:-4px; background-image:url(/jp/ja/template/default/img/category_arrow@2x.png); }
#header-pc .header-content-nav .nav-btn.search-arrow > a { padding-right:20px; }
#header-pc .header-content-nav .nav-btn.search-arrow > a:after { width:14px; height:14px; margin-top:-7px; background-image:url(/jp/ja/template/default/img/h_search@2x.png); }
#header-pc .header-content-nav .nav-btn--drop-body { font-size:12px; min-width:260px; position:absolute; top:60px; left:0; background-color:rgba(255, 255, 255, 0.9); padding:10px 15px; border:#ddd 1px solid; z-index:101;
box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
#header-pc .header-content-nav .nav-btn--drop-body .hl-1 { border-bottom:#ddd 1px solid; padding:6px 0 10px; margin-bottom:10px; }
#header-pc .header-content-nav .nav-btn--drop-body .drop-body-row-1 { margin-left:-8px; margin-right:-8px; }
#header-pc .header-content-nav .nav-btn--drop-body .drop-body-col-1 { padding:0 8px; }
#header-pc .header-content-nav--lv-1 { height:60px; font-size:14px; line-height:1.3; }
#header-pc .header-content-nav--lv-1 > li { padding:0 10px; }
#header-pc .header-content-nav--lv-2 a { display:block; position:relative; padding:6px 0; }
#header-pc .header-content-nav--lv-2 .collapse-toggle { padding-right:25px; }
#header-pc .header-content-nav--lv-2 .collapse-toggle:after { content:''; position:absolute; top:50%; right:5px; width:12px; height:7px; margin-top:-4px; background:url(/jp/ja/template/default/img/category_arrow@2x.png) no-repeat center center; background-size:100% 100%;
-webkit-transition: -webkit-transform .3s ease;
transition: transform .3s ease;
}
#header-pc .header-content-nav--lv-2 .collapse-toggle.collapse-active:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#header-pc .header-content-nav--lv-3 a { padding-left:1em; }

/* header-content-nav(category) */
#header-pc .nav-btn.header-content-nav--category { position:static !important; }
#header-pc .nav-btn.header-content-nav--category .nav-btn--drop-body { width:100% !important; padding-left:0; padding-right:0; padding-bottom:15px; border-left:0; border-right:0; }
#header-pc .nav-btn.header-content-nav--category .category-row-1 { margin:0 auto; padding-left:7px; padding-right:7px; }
#header-pc .nav-btn.header-content-nav--category .category-col-1 { width:220px; }
#header-pc .nav-btn.header-content-nav--category .frame { width:100%; overflow:hidden; }
#header-pc .nav-btn.header-content-nav--category .pages { text-align:center; line-height:1; margin-top:15px; }
#header-pc .nav-btn.header-content-nav--category .pages > *,
#header-pc .nav-btn.header-content-nav--category .pages li { display:inline-block; vertical-align:middle; }
#header-pc .nav-btn.header-content-nav--category .pages ul { padding:0 5px; }
#header-pc .nav-btn.header-content-nav--category .pages li { width:80px; height:7px; text-indent:-9999px; background:#ddd; margin:0 5px; cursor:pointer; overflow:hidden; vertical-align:baseline; }
#header-pc .nav-btn.header-content-nav--category .pages li.active { background:#f65275; }
#header-pc .nav-btn.header-content-nav--category .pages--prev,
#header-pc .nav-btn.header-content-nav--category .pages--next { width:30px; height:30px; background:URL(/jp/ja/template/default/img/more_arrow@2x.png) no-repeat center center; background-size:8px 14px; cursor:pointer;
-webkit-transition: opacity .3s ease, visibility .3s ease;
transition: opacity .3s ease, visibility .3s ease;
}
#header-pc .nav-btn.header-content-nav--category .pages--prev { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#header-pc .nav-btn.header-content-nav--category .pages--prev.disabled,
#header-pc .nav-btn.header-content-nav--category .pages--next.disabled { opacity:0; visibility:hidden; }

/* header-content-nav(topics) */
#header-pc .nav-btn.header-content-nav--topics .nav-btn--drop-body { width:260px; }

/* header-content-nav(about-us) */
#header-pc .nav-btn.header-content-nav--about-us .nav-btn--drop-body { width:380px; }

/* header-content-nav(search) */
#header-pc .nav-btn.header-content-nav--search { position:static !important; }
#header-pc .nav-btn.header-content-nav--search .nav-btn--drop-body { width:100% !important; padding-top:20px; padding-bottom:20px; border-left:0; border-right:0; }
#header-pc .nav-btn.header-content-nav--search .search-box { width:260px; position:relative; }
#header-pc .nav-btn.header-content-nav--search .search-box--input { width:100%; height:30px; background:#e3e3e3; padding-left:40px; font-size:14px; border:none; }
#header-pc .nav-btn.header-content-nav--search .search-box--btn { width:40px; height:30px; position:absolute; left:0; top:0; background: url(/jp/ja/template/default/img/h_search@2x.png) no-repeat center center; background-size:20px; border:none; cursor:pointer; }
#header-pc .nav-btn.header-content-nav--search .search-close { margin-top:-20px; padding-top:15px; padding-bottom:15px; cursor:pointer; }
#header-pc .nav-btn.header-content-nav--search .search-close img { width:16px; }
#header-pc .nav-btn.header-content-nav--search .search-hot-words--hl { position:relative; padding-left:14px; color:#f54a72; margin-bottom:6px; margin-left:3px; }
#header-pc .nav-btn.header-content-nav--search .search-hot-words--hl:before { content:''; position:absolute; width:8px; height:14px; top:50%; left:0; margin-top:-8px; background:url(/jp/ja/template/default/img/hotkeyword@2x.png) no-repeat center center; background-size:100% 100%; }
#header-pc .nav-btn.header-content-nav--search .search-hot-words--items { letter-spacing:-.4em; color:#fff; margin-bottom:-3px; }
#header-pc .nav-btn.header-content-nav--search .search-hot-words--items > * { display:inline-block; padding:3px 5px; margin:3px; background:#f54a72; letter-spacing:0; border-radius:2px; }

/* header-content-nav(header-shopping-nav) */
#header-pc .header-shopping-nav { padding-left:0; }
#header-pc .header-shopping-nav--lv-1 { height:60px; font-size:10px; text-align:center; line-height:1.3; }
#header-pc .header-shopping-nav--lv-1 li { margin-left:20px; }
#header-pc .header-shopping-nav--lv-1 li:first-child { margin-left:0; }
#header-pc .header-shopping-nav--lv-1 li a { display:block; }
#header-pc .header-shopping-nav--lv-1 li img { width:auto; height:23px; display:inline-block; margin-bottom:6px; }
#header-pc .header-shopping-nav--lv-1 li.user-name { font-size:11px; }
#header-pc .header-shopping-nav--lv-1 li.cart-btn { position:relative; }
#header-pc .header-shopping-nav--lv-1 li.cart-btn .cart-count { position:absolute; bottom:13px; right:-3px; background:#e64c79; height:16px; line-height:16px; text-align:center; padding:0 5px; font-size:11px; color:#fff; border-radius:8px; }

/* SP --------------------------------*/
@media (min-width:769px) {
#header-pc .header-content-nav .nav-btn--drop-body .hl-1 { cursor:default; }
#header-pc .header-content-nav--lv-2 { display:block !important; height:auto !important; }
}

/*********************************************************************

#header-sp

*********************************************************************/

#header-sp { position:relative; background:#fff; z-index:100; }
#header-sp .header-sp--top { width:100%; position:fixed; top:0; left:0; z-index:100; height:60px; border-bottom:1px solid #ddd; background:#fff; overflow:hidden; z-index:102; }
#header-sp .header-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
#header-sp .header-logo img { width:80px; }
#header-sp .header-sp--menu-btn { float:left; width:60px; height:60px; background:url(/jp/ja/template/default/img/h_menu@2x.png) no-repeat center center; background-size:28px 31px; cursor:pointer; }
#header-sp .header-sp--shopping-nav { float:right; letter-spacing:-.4em; padding-right:5px; }
#header-sp .header-sp--shopping-nav li { display:inline-block; width:44px; height:60px; line-height:60px; padding:; text-align:center; letter-spacing:0; }
#header-sp .header-sp--shopping-nav li a { display:block; }
#header-sp .header-sp--shopping-nav li img { width:auto; height:28px; }
#header-sp .header-sp--shopping-nav li.cart-btn { position:relative; }
#header-sp .header-sp--shopping-nav li.cart-btn .cart-count { position:absolute; bottom:9px; right:1px; background:#e64c79; height:16px; line-height:16px; text-align:center; padding:0 5px; font-size:11px; color:#fff; border-radius:8px; }

#header-sp .header-sp--shopping-nav p { display:none; }
#header-sp .header-sp--bottom { position:relative; padding-top:60px; z-index:101; }
#header-sp .header-sp--bottom--nav { display:table; width:100%; height:36px; border-bottom:1px solid #ddd; position:relative; }
#header-sp .header-sp--bottom--nav a { color:#333; text-decoration:none; }
#header-sp .header-sp--bottom--nav > li { display:table-cell; width:33.333%; text-align:center; }
#header-sp .header-sp--bottom--nav > li a { display:block; }
#header-sp .header-sp--bottom--nav > .drop-arrow span { position:relative; padding-right:16px; line-height:36px; }
#header-sp .header-sp--bottom--nav > .drop-arrow span:before { content: ''; position:absolute; width:10px; height:6px; top:50%; right:0; margin-top: -3px; background:url(/jp/ja/template/default/img/category_arrow@2x.png) no-repeat center center; background-size:100% 100%; }
#header-sp .header-sp--bottom--nav .dropdown-item { position:absolute; width:100%; top:36px; left:0; background:rgba(247, 162, 186, 0.9); color:#fff; text-align:left; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); }
#header-sp .header-sp--bottom--nav .dropdown-item .category-row-1 { width:100% !important; margin:10px 0; }
#header-sp .header-sp--bottom--nav .dropdown-item a { color:#fff; }
#header-sp .header-sp--bottom--nav .dropdown-item .hl-1 { position:relative; padding-top:10px; padding-bottom:10px; }
#header-sp .header-sp--bottom--nav .dropdown-item .hl-1:before { content: ''; position:absolute; width:14px; height:8px; top:50%; right:0; margin-top: -4px; background:url(/jp/ja/template/default/img/arrow_w@2x.png) no-repeat center center; background-size:100% 100%;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease; }
#header-sp .header-sp--bottom--nav .dropdown-item .hl-1.collapse-active:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#header-sp .header-sp--bottom--nav .dropdown-item .header-content-nav--lv-2 a { padding: 6px 0 6px 1em; line-height:1.3; }

/*********************************************************************

#header-sp-drawer

*********************************************************************/

/* noScroll */
html.header-sp-drawer-open { height:100% !important; overflow:hidden !important; }

#header-sp-drawer--overlay { width:100%; height:100%; position:fixed; top:0; left:0; z-index:103; background:rgba(0,0,0,0.6); opacity:0; visibility:hidden;
-webkit-transition: opacity .3s ease, visibility .3s ease;
transition: opacity .3s ease, visibility .3s ease;
}
#header-sp-drawer--overlay:before { content:''; width: 22px; height: 22px; background:url(/jp/ja/template/default/img/modal-close-1.png) no-repeat center center; background-size:100%; vertical-align:middle; position: absolute; top:10px; left:290px; cursor: pointer; }

#header-sp-drawer { width:280px; height:100%; position:fixed; top:0; left:-280px; z-index:104; background:#fff;
-webkit-transition: left .3s ease;
transition: left .3s ease;
}
#header-sp-drawer a { display:block; text-decoration:none; color:#333; }
#header-sp-drawer .header-sp-drawer--frame { padding:0 15px; height:100%; overflow:auto; }
#header-sp-drawer .header-sp-drawer--shopping-nav { font-size:10px; text-align:center; margin-bottom:15px; overflow:hidden; padding-top:15px; }
#header-sp-drawer .header-sp-drawer--shopping-nav > * { float:left; width:25%; }
#header-sp-drawer .header-sp-drawer--shopping-nav > * img { width:auto; height:30px; padding-bottom:3px; }
#header-sp-drawer .header-sp-drawer--search .search-box { width:100%; position:relative; margin-bottom:15px; }
#header-sp-drawer .header-sp-drawer--search .search-box--input { width:100%; position:relative; height:40px; border:1px solid #999 !important; padding-left:28px; font-size:13px; border:none; background:url(/jp/ja/template/default/img/h_search@2x.png) no-repeat 7px center; background-size:17px; border-radius:0; }
#header-sp-drawer .header-sp-drawer--search .search-box--input:before { content:''; position:absolute; width:18px; height:18px; top:50%; left:0; margin-top:-9px; background:url(/jp/ja/template/default/img/h_search@2x.png) no-repeat center center; background-size:100% 100%; }
#header-sp-drawer .header-sp-drawer--search .search-box--btn { width:24px; height:40px; position:absolute; right:0; top:0; background:#999 url(/jp/ja/template/default/img/more_w@2x.png) no-repeat center center; background-size:7px 11px; border:none; cursor:pointer; border-radius:0; }
#header-sp-drawer .header-sp-drawer--search .search-hot-words { margin-bottom:15px; }
#header-sp-drawer .header-sp-drawer--search .search-hot-words--hl { position:relative; padding-left:14px; color:#f54a72; margin-bottom:4px; margin-left:3px; }
#header-sp-drawer .header-sp-drawer--search .search-hot-words--hl:before { content:''; position:absolute; width:8px; height:14px; top:50%; left:0; margin-top:-8px; background:url(/jp/ja/template/default/img/hotkeyword@3x.png) no-repeat center center; background-size:100% 100%; }
#header-sp-drawer .header-sp-drawer--search .search-hot-words--items { letter-spacing:-.4em; margin-bottom:-3px; font-size:12px; }
#header-sp-drawer .header-sp-drawer--search .search-hot-words--items > * { display:inline-block; padding:3px 8px; margin:0 5px 5px 0; background:#f54a72; color:#fff; letter-spacing:0; border-radius:3px; }

.header-sp-drawer--category { border-top:1px solid #ddd; margin-bottom:10px; }
.header-sp-drawer--category li { border-bottom:1px solid #ddd; }
.header-sp-drawer--category li a { display:block; padding:8px 16px; }
.header-sp-drawer--category li .categorytree-next { position:relative; background:#f1f1f1; }
.header-sp-drawer--category li .categorytree-next:before { content: ''; position:absolute; width:6px; height:11px; top:50%; right:15px; margin-top: -5px; background:url(/jp/ja/template/default/img/more_arrow@2x.png) no-repeat center center; background-size:100% 100%; }
#header-sp-drawer .categorytree-child { position:fixed; top:0; left:-280px; width:280px; height:100%; background:#fff;
-webkit-transition: left .3s ease;
transition: left .3s ease;
}
#header-sp-drawer .categorytree-child--frame { overflow:auto; height:100%; }
#header-sp-drawer .categorytree-child--prev { position:relative; border-bottom:1px solid #ddd; height:56px; line-height:56px; padding-left:30px; color:#f54a72; cursor:pointer; }
#header-sp-drawer .categorytree-child--prev:before { content: ''; position:absolute; width:6px; height:11px; top:50%; left:15px; margin-top: -5px; background:url(/jp/ja/template/default/img/more_arrow@2x.png) no-repeat center center; background-size:100% 100%; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#header-sp-drawer .categorytree-child--items { padding-bottom:20px; }
#header-sp-drawer .categorytree-child--items li { border-bottom:1px solid #ddd; }
#header-sp-drawer .categorytree-child--items li a { display:block; padding:8px 16px; }
#header-sp-drawer .categorytree-child--items .categorytree-next { position:relative; background:#f1f1f1; }
#header-sp-drawer .categorytree-child--items .categorytree-next:before { content: ''; position:absolute; width:6px; height:11px; top:50%; right:15px; margin-top: -5px; background:url(/jp/ja/template/default/img/more_arrow@2x.png) no-repeat center center; background-size:100% 100%; }
.header-sp-drawer--content-nav { padding-bottom:20px; }
.header-sp-drawer--content-nav > li a { padding:8px 0; line-height:1.3; }
.header-sp-drawer--content-nav > li .collapse-toggle { position:relative; padding-right:18px; }
.header-sp-drawer--content-nav > li .collapse-toggle:before { content: ''; position:absolute; width:10px; height:6px; top:50%; right:0; margin-top: -3px; background:url(/jp/ja/template/default/img/category_arrow@2x.png) no-repeat center center; background-size:100% 100%;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
}
.header-sp-drawer--content-nav > li .collapse-toggle.collapse-active:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.header-sp-drawer--content-nav--lv-1 { padding-left:1em; }
.header-sp-drawer--content-nav--lv-1 .hl-1 { padding:5px 0; margin-bottom:4px; border-bottom:1px solid #999; }
.header-sp-drawer--content-nav--lv-2 { margin-bottom:8px; }
.header-sp-drawer-open #header-sp-drawer--overlay { opacity:1; visibility:visible; }
.header-sp-drawer-open #header-sp-drawer { left:0; }
.header-sp-drawer-open #header-sp-drawer .categorytree-child.enter { left:0; }

/* nicescroll */
.nicescroll-rails.drawer-rails-hide { opacity:0 !Important; visibility:hidden !Important; }
#header-sp-drawer .nicescroll-rails-vr { left: auto !important; right: 0 !important; }


/*********************************************************************

.header-attention

*********************************************************************/

.header-attention { width:100%; height:30px; position:relative; font-size:10px; background:#eee; height:30px; text-align:center; overflow: hidden; }
.header-attention .close-btn { position:absolute; width:14px; height:13px; top:50%; right:10px; margin-top:-7px; line-height:1; cursor:pointer; }
.header-attention-list .item { height: 30px; }
.header-attention-list .item-inner { height: 100%; }
.header-attention-inner,
.header-attention-list .item { overflow: hidden; }
.header-attention-inner { padding:0 45px 0 15px; }
.header-attention-list .item-text { height: auto; line-height: 1.1; }
.header-attention-list .item-text a { color: inherit; text-decoration: none; }

/* attention-hide */
.header-attention-closed .header-attention,
.header-attention-hide .header-attention { display:none; }
#header-sp .header-sp--top { top: 30px; }
.header-attention-hide #header-sp .header-sp--top,
.header-attention-closed #header-sp .header-sp--top { top: 0px; }