@charset "euc-jp";
/* CSS Document */
/*2015.4.29 スマートビズ山田*/
/*--------------------------
お疲れ様です。
スマートビズです。
--------------------------*/


body{
	margin:0;
}

/*--------------------------------------------------------------------------
   固定インフォバーの設定 (ポイントアップ祭時など)
---------------------------------------------------------------------------*/
#info { /*インフォバーエリアの設定*/
	position:fixed;
	top:55px;
	left:0px;
	width:100%;
	height:40px;
	background-color:#D9213D;
	/*background-color:#0A3758;*/
	z-index:11;
}
#info img { /*画像の設定*/
	width:1042px;
	height:40px;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
#info-dummy{ /*インフォバーが入る分の高さを稼ぐダミー設定*/
	width:100%;
	height:20px;/*SPUバナーおよびmarathon_parts表示のため40→66pxに変更　2016.10.31*//*楽天SOYバナー高さ対応のため66→106pxに変更　2018.11.27*/
	
	display:block;
	/*background-color:#063B66;*//*SBネイビー(標準)*/
	background-color:#063B66;/**/
	/*background-color:#018AFE;*//*夏画像*/
	/*background-color:#C25656;秋画像*/
	
}



/*--------------------------------------------------------------------------
   看板エリア
---------------------------------------------------------------------------*/
#header{/*看板下の100%帯の制御*/

	/*-----帯の色を変えたいときはココ↓-----*/
	background-color:#063B66 !important;
	/*色例：　SBダークネイビー：#0A3758　SBネイビー(標準)：#063B66　SBウォーター：#3D7CEC　SBオーシャン：#0CABC1　SBサマー：#09B6F0　SBレッド：#E41F40　水色#59B2F4　*/

	/*-----帯に画像を使用したいときはココ↓-----*/
	/*background: url(https://www.rakuten.ne.jp/gold/hworks/whttps://hybridwork.itembox.design/item/header/header_bg_summer_1c.gif) center 0px;
	background-repeat: repeat-x;
	background-size: 1920px 100px;
	background-attachment: scroll;
	height: 100px;
	opacity: 1 !important;
	width:100% !important;*/
/*	height:100px;*/
}



/*--------------------------------------------------------------------------
   ヘッダーメニュー　エリアの設定
---------------------------------------------------------------------------*/
#menu { /*-----iframe(header_menu.html)の制御-----*/
	width:100%;
	height:600px; /*←イベントバナーなどでインフレの高さが変わるときはここ※通常時:550px*/
	background-color:transparent;
	margin-left:auto;
	margin-right:auto;
	display:block;
}



/*--------------------------------------------------------------------------
   ヘッダーメニュー　バーの設定
---------------------------------------------------------------------------*/
.header_bg { /*ヘッダーメニュー下の100%黒帯の制御*/
	display:grid;
	background-color:#000 !important;
	-webkit-transition: height 0.2s ease-out, background-color 0.2s linear;
	transition: height 0.2s ease-out, background-color 0.2s linear;
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.8);
	/*opacity: 0.9 !important;*/
	width:100% !important;
	height:40px;
	z-index:5;
	margin-bottom:10px;
}
.header_top {
	width:1000px;
	max-height:40px;
	margin:0 auto;
	/*text-align: right;*/
	background-color: #000;
}
#HeadLeft {
	float: left;
}
#HeadList ul {
	overflow: hidden;
}
#HeadList ul li {
	border-left: 1px solid #FFFFFF;
	float: right;
	margin-right: 10px;
	padding-left: 10px;
	display: block;
	line-height: 0;
	font-size: 0;
}
#HeadList ul li.HeadListLast {
	margin-right: 0;
	border-right: 1px solid #FFFFFF;
	padding-right: 10px;
}
#HeadList {
	display: block !important;
	margin-top: 15px;
	margin-bottom: 10px;
}
.HeadMenu {
	float: left;
}
#HeadMenuTop,
#HeadMenuMens,
#HeadMenuKessai,
#HeadMenuCart,
#HeadMenuSpecial {
	height: 40px;
	position: relative;
	z-index: 1000;
}
#HeadMenuTop {
	width: 160px;
	background-image: url(https://hybridwork.itembox.design/item/header/black_space.jpg);
}
#HeadMenuMens {
	width: 150px;
	background-image: url(https://hybridwork.itembox.design/item/header/black_space.jpg);
}
#HeadMenuKessai {
	width: 149px;
	background-image: url(https://hybridwork.itembox.design/item/header/black_space.jpg);
}
#HeadMenuSpecial {
	width: 162px;
	background-image: url(https://hybridwork.itembox.design/item/header/black_space.jpg);
}
#HeadMenuCart {
	width: 147px;
	background-image: url(https://hybridwork.itembox.design/item/header/headmenu_5.png);
}
#HeadMenuTop img,
#HeadMenuMens img,
#HeadMenuKessai img,
#HeadMenuCart img,
#HeadMenuSpecial img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
#HeadMenuKessai img,
#HeadMenuCart img,
#HeadMenuSpecial img {
	left: -1px;
}
a:hover img.HoverImg{
	opacity:1.0 !important;
}
.HeadMenu .HeadMenuOpen {
	position: absolute;
	/*top: 285px;19.10.25ヘッダー最上部紹介文の設置に伴いコメントアウト*/
	top: 285px;
	left: 0;
	background-image: url(https://hybridwork.itembox.design/item/header/headmenu_bg.png);
	display: none;
	width: 100%;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #000;
	z-index: 900;
}
.HeadMenu .SpecialOpen {
	border-top: 2px solid #E41F40;
}
.HeadMenuOpenInner {
	color: #fff;
	font-size: 500%;
	text-align: left;
	padding: 30px 0px 10px 0px;
	width: 1000px;
	margin: auto;
}
.SpecialOpen h2 {
	height: 25px !important;
	margin-bottom: 20px;
}
.HeadMenuOpenInner ul {
	margin-left: -10px;
	overflow: hidden;
}
.HeadMenuOpenInner ul li {
	margin: 0 0 20px 21px;
	float: left;
	/*width: 90px;*/
}
.Wrap-r ul li {
	width: 215px;
}
.HeadMenuOpen ul li {
	position:relative;
}
.SpecialOpen div.Wrap-l {
	width: 450px;
	float: left;
	margin-left: 15px;
}
.SpecialOpen div.Wrap-r {
	width: 450px;
	float: left;
	margin-left: 70px;
}
.SpecialOpen div.Wrap-l ul,
.SpecialOpen div.Wrap-r ul {
	margin-left: -20px;
}
.SpecialOpen div.Wrap-l ul li,
.SpecialOpen div.Wrap-r ul li {
	margin: 0 0 20px 20px;
	float: left;
}
.HeadMenuPopUp ul {
position:absolute;
	background-image: url(https://hybridwork.itembox.design/item/header/headmenu_bg2.png);
	border: 1px solid #fff;
	color: #fff;
	top: 0px;
	left: 0;
	z-index: 900;
	font-size: 12px;
	display: none;
	padding: 10px;
	width: 70px;
	min-height: 100px;
	margin: 0 !important;
}
.HeadMenuPopUp ul li {
	margin: 0 0 4px 10px !important;
	padding: 0 !important;
	float: none !important;
	list-style-ty: disc;
}
.HeadMenuPopUp ul li a {
	color: #fff;
	display: block;
	zoom: 1;
}
.HeadMenuPopUp ul li a:hover {
	color: #ccc;
}
.HeadMenuCloseBt {
	text-align: right;
	clear: both;
	height:21px;
}
.SpecialOpen .HeadMenuCloseBt {
	margin-right: 30px;
}
.HeadMenuCloseBt img {
	margin-top: -20px;
	margin: 0;
}



/*--------------------------------------------------------------------------
   ヘッダーメニュー内検索ボックスHTMLの制御
---------------------------------------------------------------------------*/
iframe#search{
	width:220px;
	height:40px;
	background-color:transparent;
}
.input {
	float: left;
	margin: 6px 0 0 0 !important;
}
.input input.input_txt{
	width: 160px;
	height: 28px;
	color: #666;
	text-indent: 7px;
	border-radius: inherit;
	border: 2px solid #CCC;
	line-height: 25px;
}
.search_btn {
	margin-left: 0px;
	float: left;
	margin: 6px 0 0 0 !important;
}





/*--------------------------------------------------------------------------
   header_info_menu　の制御
---------------------------------------------------------------------------*/
div.header_info_menu{
	width:1042px;
	height:30px;
	margin:6px auto;
	border:2px solid #ebebeb;
}
/*ウェルカムメッセージパーツ*/
div.fs-l-header__welcomeMsg{
	float:left;
	width:49%;
	margin:3px 0 0 6px;
}
div.fs-p-welcomeMsg{
	float:left;
	margin-right:2%;
}
/*ヘッダーナビゲーションメニュー*/
nav.fs-p-headerUtilityMenu{
	float:right;
	width:49%;
	margin:5px 6px 0 0;
}