@charset "utf-8";

/*____________________________________________________________________________

SITE TITLE: LOCOCHOC
TITLE: PC ヘッダー

(1) ドロップダウンメニュー　共通設定
(2) ヘッダー上部
(3) グローバルナビ
(4) グローバルナビ ドロップダウン 
(5) 検索
(6) インフォメーションエリア

UPDATED:2015.04
UPDATED:2015.05 検索ボックス調整
____________________________________________________________________________*/

/*----------------------------------------------------------------------------
　(1)ドロップダウンメニュー　共通設定
----------------------------------------------------------------------------*/
.DropdownMenu .drop {
	position: absolute;
	visibility: hidden;
	z-index: 999;
	width: auto;
	padding: 15px 20px 15px;
}

.DropdownMenu .drop li a {
	width: auto;
}

.DropdownMenu li:hover .drop {
	visibility: visible;
	transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	background: #fbfbfd;
	box-shadow: 0 0 5px 2px rgba(195, 204, 217, 0.4);
	-webkit-box-shadow: 0 0 5px 2px rgba(195, 204, 217, 0.4);
	-moz-box-shadow: 0 0 5px 2px rgba195, 204, 217, 0.4);
	text-align: left;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#c3ccd9, direction=135, strength=3, enabled=true);
	border: 1px solid #cfd0d1;
	border-top: none;
}

.DropdownMenu li .drop:before {
	border: 10px solid transparent;
	border-bottom-color: #fbfbfd;
	border-top-width: 0;
	top: -9px;
	content: "";
	display: block;
	left: 20px;
	position: absolute;
	width: 0;
	z-index: 1;
}

.DropdownMenu li .drop:after {
	border: 10px solid transparent;
	border-bottom-color: #cfd0d1;
	border-top-width: 0;
	top: -10px;
	content: "";
	display: block;
	left: 20px;
	position: absolute;
	width: 0;
}

.DropdownMenu ul li a {
	font-weight: normal;
	text-decoration: none;
	display: block;
	height: auto;
}

/*----------------------------------------------------------------------------
　(2) ヘッダー上部
----------------------------------------------------------------------------*/
#header_top {
	width: 1000px;
	height: 107px;
	margin: 0 auto;
	overflow: hidden;
}

#site-id {
	float: left;
	margin: 42px 0 14px 0px;
}

#header_top.order #site-id {
	margin: 35px 0;
}

#header_menu {
	float: right;
	margin-top: 32px;
	margin-right: 0;
	text-align: right;
}

#header_menu ul {
	overflow: hidden;
}

#header_menu li {
	margin-right: 20px;
	display: inline;
	padding: 5px 0;
}

/* 名前 */
#header_menu li.user-name {
	display: block;
	margin-right: 0;
	margin-bottom: 8px;
}

.user-name span {
	font-weight: bold;
}

/* カート */
#header_cart {
	margin-right: 0 !important;
	border-left: 1px solid #dddddd;
	background: url(http://sc3.locondo.jp/contents/img-locochoc/pc/locochoc_header_icon_cart.png) no-repeat 17px center;
}

#header_menu #header_cart a {
	color: #ec6e09;
	padding: 0 0 0 52px;
}

#header_menu #header_cart a:hover {
	color: #ec6e09;
	text-decoration: underline;
}

/* ご利用ガイド */
#exlink a {
	background: url(http://sc3.locondo.jp/contents/img-locochoc/pc/locochoc_header_icon_exlink.png) no-repeat right center;
	padding-right: 15px;
}

/*----------------------------------------------------------------------------
　(3) グローバルナビ
----------------------------------------------------------------------------*/
#nav-container {
	background: #f5f5f5;
	margin: 0 auto 15px;
	height: 50px;
}

#nav-container .global-nav {
	width: 1000px;
	margin: 0 auto;
}

.global-nav .DropdownMenu {
	float: left;
	display: inline;
	width: 780px;
}

.global-nav li {
	float: left;
	display: block;
	text-align: center;
	padding-top: 16px;
	margin: 0 20px 5px 0;
	font-size: 13px;
}

.global-nav li a {
	color: #4a5873;
}

.global-nav li a:hover {
	color: #4a5873;
	text-decoration: none;
}

.global-nav li:hover a {
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	opacity: 0.6;
	text-decoration: none;
}

.global-nav li:hover .drop a {
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	opacity: 1.0;
}

.global-nav li .drop {
	padding: 18px 20px 10px;
	cursor: default;
}

li.nav-shoes a,
li.nav-bag a,
li.nav-apparel a,
li.nav-accessory a,
li.nav-outlet a {
	display: block;
	padding: 0 5px 15px 15px;
}

li.nav-shoes li a,
li.nav-bag li a,
li.nav-apparel li a,
li.nav-accessory li a,
li.nav-outlet li a {
	padding: 0;
}

.DropdownMenu li.nav-bag .drop:before {
	left: 1.7em;
}

.DropdownMenu li.nav-apparel .drop:before {
	left: 2.8em;
}

.DropdownMenu li.nav-accessory .drop:before {
	left: 1.7em;
}

.DropdownMenu li.nav-outlet .drop:before {
	left: 2.8em;
}

/*----------------------------------------------------------------------------
　(4) グローバルナビ ドロップダウン 
----------------------------------------------------------------------------*/
.global-nav li li {
	float: none;
	display: block;
	text-align: left;
	padding: 0;
	margin: 0 0;
	font-size: 12px;
	color: #4a5873;
	margin-bottom: 7px;
}

.global-nav li li a {
	color: #4a5873;
}

.drop dl ul {
	padding: 8px 0 0 0;
}

.drop ul li a {
	display: block;
	padding: 0;
	background: none;
	text-decoration: none;
	text-align: left;
}

.drop ul li a:hover,
.drop dl dt.listTitle a:hover {
	color: #4991c3;
	text-decoration: underline;
}

.drop dl {
	margin-right: 15px;
	margin-bottom: 3px;
}

.drop dl dd {
	margin-top: -2px;
}

.drop dl dt.listTitle a {
	font-size: 12px;
	padding: 0;
}

.drop dl dd {
	margin-left: 20px;
}

/*----------------------------------------------------------------------------
　(5) 検索
----------------------------------------------------------------------------*/
.search-container {
	width: 1000px;
	position: relative;
	margin: 0 auto;
	padding: 0;
	z-index: 99 !important;
}

#searchBox {
	position: absolute;
	right: 0px;
	width: 258px !important;
	display: inline;
	margin: 0;
}

#searchBox input#searchText {
	width: 214px;
	height: 12px;
	margin: 0;
	padding: 8px 30px 8px 12px;
	border: 1px solid #d9d9d9;
	font-size: 12px;
	line-height: 1.3em;
}

:root #searchBox input#searchText {
	padding-top: 8px \0/;
}

input.searchbutton {
	margin: 7px 10px;
	padding: 0;
	float: right;
	position: absolute;
	right: 0 !important;
}

.search_box {
	position: relative;
}

#searchBox .search_box .search-autocomplete {
	left: 13px !important;
	top: 21px !important;
	background-color: #fff;
	border: 1px solid #4d2212;
	width: 320px !important
}

#searchBox .search_box .search-autocomplete ul {
	background-color: #f9f5f0
}

#searchBox .search_box .search-autocomplete li {
	clear: left;
	text-align: left;
	border-bottom: 1px solid #4d2212;
	padding: 2px 3px 1px 3px;
	cursor: pointer;
	width: 300px !important;
	padding-right: 3px
}

#searchBox .search_box .search-autocomplete li .amount {
	float: right;
	font-weight: bold
}

#searchBox .search_box .search-autocomplete li.odd {
	background-color: #fff
}

#auto_complete_div {
	background-color: #fff;
	border: 1px solid #d2d2d2;
	padding: 10px 0 5px;
	width: 320px !important;
}

/*----------------------------------------------------------------------------
　(6) インフォメーションエリア
----------------------------------------------------------------------------*/
#info_box {
	width: 1000px;
	clear: both;
	margin: 0 auto;
}

#info_txt {
	text-align: left;
	color: #f00;
	line-height: 150%;
}

#info_txt a {
	text-decoration: underline;
}

#info_txt .orange {
	color: #ed6d0f;
}

/* オレンジ */
#info_txt .brown {
	color: #4d2405;
}

/* 茶色 */
#info_txt a.marketing {
	color: #2b2b2b;
	text-decoration: none;
}

#info_txt a.marketing:hover {
	color: #ed6d0f;
}

#info_txt .headword {
	font-weight: bold;
}

#info_txt .headword:after {
	content: "▸";
	font-size: 14px;
	padding: 0 2px;
}

#info_txt .underline {
	text-decoration: underline;
}

#yahoo_back {
	float: right;
	display: inline;
	padding: 6px 0 15px;
	text-align: right;
}

/*----------------------------------------------------------------------------
追加
----------------------------------------------------------------------------*/

.xmall__header {
	background: #181818;
	color: #fff;
}

#header_top {
	height: 60px;
	display: flex;
	align-content: center;
	align-items: center;
	margin-bottom: 30px;
}

#site-id {
	float: left;
	line-height: 60px;
	margin: 0;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Marcellus', serif;
	letter-spacing: .125em;
}

#site-id a {
	display: flex;
	align-items: center;
}

#site-id a small {
	font-family: noto sans-serif;
	font-size: 12px;
	letter-spacing: 0;
	padding-left: 10px;
}

#site-id a:hover {
	color: #fff;
	text-decoration: none;
}

#header_menu {
	margin: 0;
	margin-left: auto;
}

#header_menu ul {
	display: flex;
	align-items: center;
	align-content: center;
}

#header_menu li a {
	color: #fff !important;
	background: #321bdd;
	padding: 4px 16px;
	border-radius: 20px;
	display: inline-block;
	font-weight: bold;
}

#header_menu li a:hover {

	color: #fff;
	text-decoration: none;
	opacity: .8
}

#header_menu li.user-name {
	margin: 0 8px;
}