@charset "utf-8";

/* ==================================
list.css
================================== */

/* ==================================
for brand 
================================== */
.bg_black+ .bg_color #breadcrumbs {
  background:#000;
  border-bottom:1px solid #000;
}
.bg_black + .bg_color #breadcrumbs li,
.bg_black + .bg_color #breadcrumbs li a {
  color:#fff;
}

.bg_gray + .bg_color #breadcrumbs {
  background:#eee;
  border-bottom:1px solid #eee;
}
.bg_gray + .bg_color #breadcrumbs li,
.bg_gray + .bg_color #breadcrumbs li a {
  color:#424242;
}
#list #brand-category h1 {
	width:100%;
}

/* ==================================
brand
================================== */
#main-view {
  padding-top:35px;
  padding-bottom:35px;
  background:#fff;
  text-align:center;
}
/* brand_a */
.brand_a #main-view,
.bg_black + .bg_color #main-view {
  padding-top:0;
  background:#000;
}

/* brand_b */
.brand_b #main-view,
.bg_gray + .bg_color #main-view {
  padding-top:0;
  background:#eee;
}

/* ==================================
STAFF START
================================== */
#list #CoordinateList button,
#list #StaffList button {
  padding: 0;
  border: none;
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
#list #CoordinateList *,
#list #CoordinateList *::before,
#list #CoordinateList *::after,
#list #StaffList *,
#list #StaffList *::before,
#list #StaffList *::after {
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#list #CoordinateList a,
#list #StaffList a {
  transition: opacity .2s;
}
#list #CoordinateList h2 span,
#list #StaffList h2 span {
  margin-left: 15px;
  font-size: 15px;
  vertical-align: bottom;
}
#list #CoordinateList .thum-img,
#list #CoordinateList .list-thumb .review-staff .review-staff-img img,
#list #StaffList .thum-img {
  border: solid 1px #ddd;
  background: #fff;
  text-align: center;
}

#list #CoordinateList.box_section + .contents-inner {
  margin-top: 60px;
}

  /* CoordinateList */
#list #CoordinateList .list-thumb {
  display: block;
  padding: 20px 0;
}
#list #CoordinateList .slick-dotted.slick-slider {
  margin-bottom: 40px;
}
#list #CoordinateList .list-thumb .slick-slide a {
  display: block;
  width: 100%;
  padding: 0 15px;
}
#list #CoordinateList .list-thumb .review-staff {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
#list #CoordinateList .list-thumb .review-staff .review-staff-img {
  width: 25%;
}
#list #CoordinateList .list-thumb .review-staff .review-staff-img img {
  width: 100%;
  height: auto;
}
#list #CoordinateList .list-thumb .thum-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 176px;
}
#list #CoordinateList .list-thumb .thum-img img {
  max-width: 100%;
  max-height: 100%;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #list #CoordinateList .list-thumb .thum-img img {
    height: 225px;
  } /* IE11 */
}
#list #CoordinateList .list-thumb .review-staff .review-staff-txt {
  width: 75%;
  padding-left: 10px;
  overflow: hidden;
}
#list #CoordinateList .list-thumb .review-staff .review-staff-txt .thum-brand,
#list #CoordinateList .list-thumb .review-staff .review-staff-txt .thum-staff,
#list #CoordinateList .list-thumb .review-staff .review-staff-txt .thum-shop {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#list #CoordinateList .thum-date {
  margin-top: 4px;
  color: #999;
  font-size: 12px;
}
#list #CoordinateList .thum-txt {
  margin-top: 4px;
  font-size: 12px;
}
#list #CoordinateList .thum-txt.js-limitTxt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#list #CoordinateList .thum-txt + .thum-brand,
#list #CoordinateList .thum-txt + .thum-charge,
#list #CoordinateList .thum-brand + .thum-charge {
  margin-top: 4px;
}
#list #CoordinateList .slick-prev,
#list #CoordinateList .slick-next {
  top: 50%;
  transform: translateY(-50%);
}

/* StaffList */
#list #StaffList .m-selectList {
  margin-bottom: 20px;
  padding: 20px 0;
}
#list #StaffList .slick-dotted.slick-slider {
  margin-bottom: 0;
}
#list #StaffList .m-selectList a {
  display: block;
  padding: 0;
}
#list #StaffList .rec-ranking .thum-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 176px;
}
#list #StaffList .rec-ranking .thum-img img {
  max-width: 100%;
  max-height: 100%;
}
#list #StaffList .thum-txt {
  margin-top: 4px;
  font-size: 12px;
}
#list #StaffList .thum-brand {
  height: 19px;
}
#list #StaffList .thum-txt + .thum-brand,
#list #StaffList .thum-txt + .thum-charge,
#list #StaffList .thum-brand + .thum-charge {
  margin-top: 4px;
}
#list #StaffList .thum-brand,
#list #StaffList .thum-charge {
  color: #999;
  font-size: 12px;
}
#list #StaffList .slick-slide > div > li {
  padding: 0 15px;
}
#list #StaffList .m-selectList .m-staffType-02 {
  margin-top: 40px;
  font-size: 12px;
}
#list #StaffList .m-staffType-02 li {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
#list #StaffList .m-staffType-02 .type-ttl {
  width: 36%;
}
#list #StaffList .m-staffType-01 .type-spec,
#list #StaffList .m-staffType-02 .type-spec {
  padding: 2px 8px;
  background: #ddd;
}
/*#list #StaffList .m-btn-01 {
  border-radius: 3px;
  background: #000;
  color: #fff;
  text-align: center;
}
#list #StaffList .m-btn-nextpage {
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
}
#list #StaffList .m-btn-nextpage a {
  display: block;
  position: relative;
  padding: 14px 0 ;
  color: #fff;
}
#list #StaffList .m-btn-nextpage a:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  width: 7px;
  height: 13px;
  background: url(/ec/shop/hankyu-beauty/images/recommend/bt_list_arrow.svg) no-repeat;
  background-size: 7px 13px;
  content: "";
}*/
#list #StaffList .slick-dots {
  bottom: 0;
}

/* ==================================
main
================================== */
#list #main {
  float:right;
  width:760px;
  padding:50px 0 100px;
}
#list #main .item_shop_name {
  margin-top: -40px;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #d6d6d6;
  font-size: 140%;
  font-weight: normal;
}

/* ==================================
main / list-header
================================== */
#list #list-header {
  position:relative;
  padding-bottom:30px;
}
#list #list-header .item-count {
  font-size:16px;
  font-weight:normal;
}

/* item-sort */
#list #list-header .item-sort {
  position:absolute;
  top:-6px;
  right:80px;
}
#list #list-header .item-sort .sod_select {
  width:150px;
  border:none;
  padding:8px 22px 8px 15px;
  text-align:right;
}
#list #list-header .item-sort .sod_select:before {
  top:15px;
  right:13px;
}
#list #list-header .item-sort .sod_select .sod_list_wrapper {
  width:160px;
  border:1px solid #e6e6e6;
  border-radius:3px;
}
#list #list-header .item-sort .sod_list {
  text-align:left;
}

/* view-change */
#list #list-header .view-change {
  position:absolute;
  top:0;
  right:0;
  font-size:0;
}
#list #list-header .view-change li {
  display:inline-block;
  margin-left:20px;
  font-size:12px;
}
#list #list-header .view-change a,
#list #list-header .view-change span {
  display:block;
  width:22px;
  height:22px;
  background:url(../../images/icon/icon_view_change.png);
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#list #list-header .view-change .small a,
#list #list-header .view-change .small span {
  display:block;
  width:22px;
  height:22px;
  background-position:-30px 0;
}
#list #list-header .view-change a {
  opacity:.5;
}
#list #list-header .view-change a:hover {
  opacity:1;
}

/* ==================================
main / item-list
================================== */
#list .item-list .item {
  color:#757575;
}
#list .item-list .item li {
  float:left;
}

#list .item-list .item li a {
  display:block;
  position:relative;
  text-decoration:none;
}
#list .item-list .item li span {
  display:block;
  margin-top:4px;
  font-size:12px;
/*  text-align:center;*/
  word-wrap:break-word;
}
#list .item-list .item li img {
	max-width:100%;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border:1px solid #e6e6e6;
}
#list .item-list .item li .item_img {
	margin:0;
}
#list .item-list .item li .item_status {
	display: block;
	width:100%;
	margin:0;
	text-align:left;
	font-size: 0;
}
#list .item-list .item li .item_status img {
	display:inline;
	width:auto;
	height: 18px;
	margin:2px 2px 0 0;
	border:none;
}

#list .item-list .item li .item_bland {
  margin-top:15px;
}
#list .item-list .item li .item_price {
  margin-bottom:10px;
  font-size:14px;
}
#list .item-list .item li .item_icon {
	margin:0;
}
#list .item-list .item li .item_icon img {
  display:inline;
  margin:2px 2px 0 0;
  border:none;
  vertical-align:middle;
  max-height:20px;
}


/* ==================================
main / item-list .item-large (3column)
================================== */
#list .item-list.item-large .item {
	background: url(/ec/shop/hankyu-beauty/images/border/border_line.gif) bottom repeat-x;
}
#list .item-list.item-large .item li {
  width:233px;
	padding: 0 0 30px 30px;
  margin:0 0 40px 0;
	border-bottom: solid 1px #e6e6e6;
}
#list .item-list.item-large .item li:nth-child(3n+1) {
  clear:both;
  padding-left:0;
}
#list .item-list.item-large .item li .item_icon {
  margin-bottom:10px;
}

/* ==================================
main / item-list .item-small (5column)
================================== */
#list .item-list.item-small .item {
	background: url(/ec/shop/hankyu-beauty/images/border/border_line.gif) bottom repeat-x;
}
#list .item-list.item-small .item li {
  width:136px;
	padding: 0 0 30px 20px;
  margin:0 0 40px 0;
	border-bottom: solid 1px #e6e6e6;
}
#list .item-list.item-small .item li:nth-child(5n+1) {
  clear:both;
  padding-left:0;
}
#list .item-list.item-small .item li .item_icon {
  margin-bottom:10px;
}

/* ==================================
main / pager
================================== */
#list .pager {
  position:relative;
  margin-top:20px;
  text-align:center;
  font-size:0;
}
#list .pager li {
  display:inline-block;
  font-size:14px;
  margin:0 5px;
  vertical-align:top;
}
#list .pager span,
#list .pager a {
  box-sizing:border-box;
  display:block;
  width:50px;
  height:50px;
  border-radius:4px;
  line-height:50px;
  color:#000;
}
#list .pager a {
  border:1px solid #e6e6e6;
}
#list .pager a:hover {
  background:#e6e6e6;
}
/*
#list .pager .current span {
  background:#000;
  color:#fff;
}
*/
#list .pager span.here {
  background:#000;
  color:#fff;
}
#list .pager .ellipsis,
#list .pager .ellipsis span {
  width:40px;
  margin:0;
}
#list .pager .prev {
  margin-right:15px;
}
#list .pager .next {
  margin-left:15px;
}
#list .pager .prev span,
#list .pager .next span,
#list .pager .prev a,
#list .pager .next a {
  position:relative;
  width:67px;
  background:#000;
  border:none;
  color:#fff;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#list .pager .prev a:hover,
#list .pager .next a:hover {
  background:#666;
}
#list .pager .prev span:after,
#list .pager .next span:after,
#list .pager .prev a:after,
#list .pager .next a:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:12px;
  height:24px;
  background:url(../../images/button/bt_pager.png) no-repeat;
}
#list .pager .next span:after,
#list .pager .next a:after {
  background-position:-20px 0;
}
#list .pager .prev.disabled span,
#list .pager .next.disabled span {
  background:#bfbfbf;
}

/* ==================================
side
================================== */
#list #side {
  float:left;
  width:180px;
  padding:0 0 100px;
}
#side .box {
  margin-top:30px;
}
#side .box .ttl {
  margin-bottom:5px;
  font-size:16px;
}
#side .box .ttl span {
  padding-left:5px;
  font-size:12px;
}

/* ==================================
side / target-securities
================================== */
#list #side .target-securities dl {
  min-height:115px;
  padding:10px;
  background:#000;
  color:#fff;
  text-align:center;
}
#list #side .target-securities dt {
  padding-top:20px;
  font-weight:bold;
}
#list #side .target-securities dd {
  padding-top:5px;
  font-size:34px;
}
#list #side .target-securities dd span {
  font-size:16px;
}
#list #side .target-securities li a {
  display:block;
  padding:12px 5px;
  color:#fff;
  background:#757575;
  text-align:center;
}
#list #side .target-securities li a:hover {
  background:#999;
}

/* ==================================
side / side-keyword
================================== */
#list #side-keyword input,
#list #side-keyword button {
  display:block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:none;
  border-radius:3px;
  padding:0;
}
#list #side-keyword input {
  box-sizing:border-box;
  width:100%;
  height:42px;
  padding:0 8px;
  border:1px solid #e0e0e0;
  font-size:11px;
  color:#666;
  line-height:40px;
  vertical-align:middle;
}
#list #side-keyword button {
  display:block;
  width:100%;
  margin-top:10px;
  background:#757575;
  font-size:14px;
  color:#fff;
  line-height:42px;
  text-align:center;
  text-indent:.5em;
  letter-spacing:.5em;
}
#list #side-keyword button:hover {
  background:#999;
  cursor:pointer;
}
#list #side-keyword .autocomplete table {
  z-index:10;
  top:40px;
  left:0;
  border:1px solid #e0e0e0;
}
#list #side-keyword .autocomplete td {
  padding:5px 10px;
}

/* ==================================
side / side-brand
================================== */
#list #side-brand .brand-select {
  position:relative;
}
#list #side-brand .btn {
  display:block;
  width:100%;
  background:#757575;
  color:#fff;
  line-height:42px;
  text-align:center;
  border-radius:3px;
  cursor:pointer;
}
#list #side-brand .btn:hover {
  background:#999;
  cursor:pointer;
}
#list #side-brand .btn.active {
  background:#000;
}

/* ==================================
side / side-brand mega-menu
================================== */
#list #side-brand .mega-menu {
  display:none;
  position:absolute;
  top:-118px;
  left:200px;
  width:800px;
  box-shadow: 2px 90px 180px -90px #000;
  z-index:9999;
}
#list #side-brand .mega-menu.active {
  display:block;
}
#list #side-brand .mega-menu:before {
  content:"";
  display:block;
  position:absolute;
  top:118px;
  left:-18px;
  width:0;
  height:0;
  border-style:solid;
  border-width:20px 20px 20px 0;
  border-color:transparent #000 transparent transparent;
}
#list #side-brand .mega-menu .bt-closed {
  display:none;
  position:absolute;
  top:-20px;
  right:-20px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  z-index:2;
  cursor:pointer;
}
#list #side-brand .mega-menu .bt-closed:after {
  content:"";
  box-sizing:border-box;
  display:block;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #666;
  background:#fff url(../../images/button/bt_closed.png) center no-repeat;
}
#list #side-brand .mega-menu .bt-closed:hover:after {
  opacity:.6;
}

/* mega-header */
#list #side-brand .mega-header {
  min-height:190px;
  padding:40px 40px 30px;
  background:#000;
}
#list #side-brand .tab-list {
  display:table;
  width:100%;
  border:1px solid #424242;
}
#list #side-brand .tab-list li {
  display:table-cell;
  width:50%;
}
#list #side-brand .tab-list a {
  display:block;
  background:#000;
  color:#fff;
  font-size:18px;
  text-align:center;
  line-height:65px;
  cursor:pointer;
}
#list #side-brand .tab-list a:hover {
  background:#212121;
}
#list #side-brand .tab-list li.active a {
  display:block;
  background:#424242;
}
#list #side-brand .tab-box {
  display:none;
  margin-top:15px;
}
#list #side-brand .tab-box:first-child {
  display:block;
}
#list #side-brand .tab-box ul {
  font-size:0;
}
#list #side-brand .tab-box li {
  display:inline-block;
  margin:10px 10px 0 0;
  font-size:16px;
}
#list #side-brand .tab-box li a,
#list #side-brand .tab-box li span {
  display:block;
  width:35px;
  line-height:35px;
  border:1px solid #fff;
  text-align:center;
  background:#000;
  color:#fff;
}
#list #side-brand .tab-box li span {
  opacity:.5;
}
#list #side-brand .tab-box li a:hover {
  background:#666; 
}
#list #side-brand .tab-box li:last-child a,
#list #side-brand .tab-box li:last-child span {
  width:83px;
}
#list #side-brand #tab-kana ul {
  width:290px;
}
#list #side-brand #tab-alphabet li:nth-child(14),
#list #side-brand #tab-alphabet li:nth-child(28) {
  margin-right:0;
}
#list #side-brand #tab-alphabet li:last-child {
  width:82px;
}

/* mega-body */
#list #side-brand .mega-body {
  height:300px;
  background:#fff;
  overflow:auto;
}
#list #side-brand .mega-body .inner {
  display:none;
  padding:0 40px 25px 40px;
}
#list #side-brand .mega-body .inner:first-child {
  display:block;
}
#list #side-brand .mega-body .mega-ttl {
  margin:20px 0;
  border-bottom:1px solid #bdbdbd;
}
#list #side-brand .mega-body .mega-ttl span {
  padding-right:5px;
  font-size:40px;
}
#list #side-brand .mega-body li {
  float:left;
  width:230px;
  margin-left:5px;
  padding:4px 0;
  font-size:12px;
  word-wrap:break-word;
}
#list #side-brand .mega-body li:nth-child(3n+1) {
  clear:both;
  margin-left:0;
}
#list #side-brand .mega-body ul a {
  display:block;
  position:relative;
  color:#000;
  padding-left:1em;
}
#list #side-brand .mega-body ul a:hover {
  color:#666;
}
#list #side-brand .mega-body ul a:before {
  content:"・";
  display:block;
  position:absolute;
  left:0;
  top:0;
}

#list #side .bt-closed {
	word-wrap:break-word;
}

#list #side-brand .btn.bt-closed {
	position:relative;
	width:140px;
	padding:9px 30px 9px 10px;
	line-height:1.2;
	text-align:left;
}

#list #side-brand .bt-closed:after {
  content:"";
  display:block;
  position:absolute;
  color:#424242;
  top:0;
  bottom:0;
  right:7px;
  width:20px;
  height:20px;
  margin:auto;
  background:url(../../images/icon/icon_delete.png);
}

/* ==================================
side / side-item
================================== */
#list #side .side-nav {
  border-bottom:1px solid #bdbdbd;
}
#list #side .side-nav a,
#list #side .side-nav span {
  display:block;
  position:relative;
  padding:9px 35px 9px 18px;
  border-top:1px solid #bdbdbd;
  background:#f6f6f6;
  font-size:11px;
  cursor:pointer;
}

/* 大カテゴリ */
#list #side .side-nav .cat-large.current + ul {
  display:block;
}
#list #side .side-nav .cat-large {
  padding:9px 10px;
  background:#757575;
  color:#fff;
}
#list #side .side-nav .cat-large:hover {
  background:#000;
}
#list #side .side-nav .cat-large:after {
  content:"";
  display:block;
  position:absolute;
  top:14px;
  right:13px;
  width:14px;
  height:8px;
  background:url(../../images/icon/icon_middle_arrow.png) -20px 0;
  color:#424242;
}
#list #side .side-nav > li > .bt-closed:after {
  top:7px;
  right:7px;
  width:20px;
  height:20px;
  background:url(../../images/icon/icon_delete.png);
}

/* 中カテゴリ */
#list #side .side-nav .cat-middle > li > a,
#list #side .side-nav .cat-middle .ttl-middle {
  background:#e0e0e0;
  color:#424242;
}
#list #side .side-nav .cat-middle > li > a:hover,
#list #side .side-nav .cat-middle .ttl-middle:hover {
  background:#bbb;
}
#list #side .side-nav .cat-middle > li > a:after,
#list #side .side-nav .cat-middle .ttl-middle:after,
#list #side .side-nav .cat-small .bt-closed:after {
  content:"";
  display:block;
  position:absolute;
  top:14px;
  right:13px;
  width:14px;
  height:8px;
  background:url(../../images/icon/icon_middle_arrow.png);
  color:#424242;
}
#list #side .side-nav .cat-middle .ttl-middle.bt-closed:after,
#list #side .side-nav .cat-small .bt-closed:after {
  top:7px;
  right:7px;
  width:20px;
  height:20px;
  background:url(../../images/icon/icon_delete.png);
}

/* 小カテゴリ */
#list #side .side-nav .cat-small a {
  padding:9px 18px;
}
#list #side .side-nav .cat-small > li > a:before {
  content:"・";
}
#list #side .side-nav .cat-small > li > a:hover,
#list #side .side-nav .cat-small > li.current a {
  background:#fff;
  color:#424242;
}

/* ==================================
side / side-price
================================== */
#side #side-price ul {
  border-bottom:1px solid #bdbdbd;
}
#side #side-price ul a {
  display:block;
  padding:8px 10px;
  border-top:1px solid #bdbdbd;
  font-size:12px;
}

/* ==================================
side / side-icon
================================== */
#side #side-icon ul {
  border-bottom:1px solid #bdbdbd;
}
#side #side-icon ul a {
  display:block;
  padding:8px 10px;
  border-top:1px solid #bdbdbd;
  font-size:12px;
}

/* ==================================
side / side-stock
================================== */
#side #side-stock ul {
  border-bottom:1px solid #bdbdbd;
}
#side #side-stock ul a {
  display:block;
  padding:8px 10px;
  border-top:1px solid #bdbdbd;
  font-size:12px;
}

/* ==================================
keyword
================================== */

#d_no-result { padding:90px 0; color:#4d4d4d; font-size:25px; text-align:center; }
#d_suggest-tags { padding-top: 10px;
}
#d_suggest-tags dl dt {
  font-size: 11px;
  color: #1c1c1c;
  text-align: center;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 12px 5px;
  position: relative;
}
#d_suggest-tags dl dt:before, #d_suggest-tags dl dt:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#d_suggest-tags dl dt:before {
  border-color: rgba(212, 212, 212, 0);
  border-top-color: #d4d4d4;
  border-width: 11px;
  margin-left: -11px;
}
#d_suggest-tags dl dt:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
#d_suggest-tags dl dd ul {
  padding-top: 15px;
}
#d_suggest-tags dl dd ul li {
  display: inline-block;
}
#d_suggest-tags dl dd ul li a {
  display: inline-block;
  font-size: 12px;
  color: #1c1c1c;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 2px;
  padding: 10px 12px;
  margin-bottom: 5px;
  text-decoration: none;
}


/* ==================================
clearfix
================================== */
#list .item-list ul:after,
#list #side-brand .mega-body ul:after {
  content:"";
  clear:both;
  display:block;
}