@charset "Shift_JIS";

/* ---------------------------------------
 ヘッダー
---------------------------------------- */
header { width: 100%; height: 100px; background: #F2F2F2;}
header.order-header_ { width: 100%; height: 45px; display: flex; justify-content: center; align-items: center;}
header.gift_head_ { height: auto;}

header#head02 .header_top_ { padding: 0 20px 15px; background: 0;}
/* ロゴ */
header#head02 #sitelogo { height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; position: static;}
header#head02 #sitelogo a { padding: 10px; line-height: 0; display: inline-block;}
header#head02 #sitelogo img { width: 188px;}

/* 検索BOX */
header#head02 #header_searchbox { top: 50px;}
header#head02 #header_searchbox form.search_form_ { width: 100%; height: 35px; display: table;}
header#head02 #header_searchbox form.search_form_ input.keyword_ { width: 100%; min-width: auto; max-width: 100%; min-height: auto; padding: 0 16px 0 37px; border-radius: 5px; transition: top .3s ease; top: 50px;}
header#head02 #header_searchbox form.search_form_ input.keyword_:focus { outline: none;}
header#head02 #header_searchbox form.search_form_ .search_wrap:before { background: none;}
header#head02 #header_searchbox form.search_form_ .search_button_ {
  width: 37px;
  height: 37px;
  border: none;
  border-radius: 4px 0 0 4px;
  text-indent: -2000%;
  background: url(../../img/usr/common/header/icon_search.png) no-repeat;
  background-size: 14px;
  background-position: center;
	position: absolute;
  top: 0;
	left: 0;
  transition: .3s ease;
}
header#head02 #header_searchbox.fixed_ { width: calc(100vw - 100px); z-index: 170; position: fixed; top: 15px; left: 20px; transition: .3s ease;}
header#head02 #header_searchbox.fixed_ form.search_form_ { width: 90%;}
header#head02 #header_searchbox.fixed_ .search_wrap_deletebtn {
  width: 12px;
  height: 12px;
  margin: auto 0;
  background: url(../../img/usr/sp/panelclosebtn.png) center center no-repeat;
  background-size: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  cursor: pointer;
}
header#head02 ul.list_search_.list_link { padding: 10px 0 5px; text-align: center; display: flex;}
header#head02 ul.list_search_.list_link li.search_item_ { width: 33%;}
header#head02 ul.list_search_.list_link li.search_item_:nth-child(2) { width: 33%; border-left: #fff 1px solid; border-right: #fff 1px solid;}
header#head02 ul.list_search_.list_link li.search_item_ a { font-size: 13px; text-decoration: none; color: #FFF;}

/* ページ毎の指定 */
.page-category header,
.page-genre header,
.page-search header { position: relative; z-index: 161;}
.page-category header.showSearchPanel,
.page-genre header.showSearchPanel,
.page-search header.showSearchPanel { position: static;}

/* ---------------------------------------
 グローバルメニュー
---------------------------------------- */
#globalmenu { width: 100%; display: flex; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index: 12; transition: .3s ease;}
#globalmenu.hide { bottom: -50px;}
#globalmenu li { width: 20%; text-align: center;}
#globalmenu li a,
#globalmenu #headerSearch,
#globalmenu #menuBtn { padding: 10px 0 4px; text-decoration: none; line-height: 0; display: block; position: relative;}

#globalmenu li.home img   { width: 24px;}
#globalmenu li.search img { width: 20px;}
#globalmenu li.login img  { width: 32px;}
#globalmenu li.mypage img { width: 40px;}
#globalmenu li.cart_ img  { width: 24px;}
#globalmenu li.menu img   { width: 32px; margin: 2px 0 0;}
#globalmenu #jscart_replace_ {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 15px;
  color: #FFF;
  background: #c00;
  position: absolute;
  top: 5px;
  right: 23%;
}

/* ---------------------------------------
 グローバルメニュー - 検索
---------------------------------------- */
#searchPanel { width: 100%; height: 100vh; display: none; background-color: #FFF; position: fixed; top: 0; z-index: 160; transition: .3s ease; overflow-y: auto;}
#searchPanel .search_area { padding: 15px 0 15px 20px; text-align: right;}
#searchPanel .search_area .search_wrap { width: 100%;}
#searchPanel .close { width: 60px; height: 36px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center;}
#searchPanel .close img { width: 60px;}
#searchPanel div.bl_npSuggestContainerSp { width: 110%; position: static;}
#searchPanel div.bl_npSuggestContainerSp_searchboxComponent { margin: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList { border-bottom: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_header { padding: 7px 20px; font-size: 12px;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_body { padding: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_item { height: 50px; padding-right: 20px;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_keyword { font-size: 14px; color: #005FE2;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_label { width: 20px; margin: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestHistoryList_label > *:first-child { margin-left: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_header { padding: 7px 20px; font-size: 12px;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_body { padding: 0;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_item { padding: 4px 20px 3px 15px; position: relative;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_item:after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: #666 1px solid;
  border-bottom: #666 1px solid;
  position: absolute;
  top: 21px;
  right: 28px;
  transform: rotate(-45deg);
}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_icon { font-size: 14px; font-weight: normal; color: #333;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_label { margin-right: 10px;}
#searchPanel div.bl_npSuggestContainerSp .bl_npSuggestRankingList_keyword { font-size: 14px;}
#searchPanel div.bl_npSuggestContainerSp .el_npSuggestCrossBtn { width: 18px; height: 18px; padding: 0;}
#searchPanel div.bl_npSuggestContainerSp .el_npSuggestCrossBtn::before,
#searchPanel div.bl_npSuggestContainerSp .el_npSuggestCrossBtn::after { background-color: #FFF;}
#searchPanel div.bl_npSuggestContainerSp .el_npSuggestCrownIcon { font-size: 14px; font-weight: normal; color: #333;}

/* ---------------------------------------
 グローバルメニュー - メニュー内容
---------------------------------------- */
body > div[data-menuwrap="mask"] { opacity: 0.5!important;}
#menuWrap { width: calc(100% - 40px); display: none; position: fixed; top: 0; bottom: 0;}
#menuWrap #menuBtnClose { width: 60px; height: 86px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #FFF; position: absolute; top: 0; right: 0; z-index: 1;}
#menuWrap #menuBtnClose img { width: 19px; margin: auto auto 10px;}
#menuWrap #menuBtnClose::after { content: '閉じる'; width: 100%; margin: 0 0 auto 0; font-size: 12px; font-weight: 400; text-align: center; display: block;}
#menuWrap .inner { height: 100%; background: #FFF; position: relative; overflow-y: auto;}
#menuWrap .inner nav { padding-bottom: 15px; font-size: 14px;}
#menuWrap .inner nav .nav_list .headline { padding: 20px; font-size: 16px; font-weight: 500; line-height: 1.0; background: #F2F2F2;}
#menuWrap .inner nav ul li + li { border-top: #D8D8DB 1px solid;}
#menuWrap .inner nav ul li.point { height: 86px; padding: 0 60px 0 23px; display: flex; flex-wrap: wrap; align-items: center;}
#menuWrap .inner nav ul li.point p.point_current_ { width: 100%; margin: auto 0 5px 0; font-size: 14px; font-weight: 400;}
#menuWrap .inner nav ul li.point p.point_current_ span { margin: 0 2px 0 10px; font-size: 20px; font-weight: 500; letter-spacing: 1px;}
#menuWrap .inner nav ul li.point p.point_limited_ { width: 100%; margin: 0 0 auto 0; font-size: 14px; font-weight: 400;}
#menuWrap .inner nav ul li.point p.point_limited_ span.limited { margin: 0 2px; font-size: 12px; font-weight: 400;}
#menuWrap .inner nav ul li#nav_search_store ul { display: none;}
#menuWrap .inner nav ul li#nav_search_store li { border: 0; padding-left: 28px;}
#menuWrap .inner nav ul li a,
#menuWrap .inner nav ul li span.btn_search_store {
	min-height: 60px;
	padding: 10px 32px;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	color: #333;
	display: flex;
	align-items: center;
	position: relative;
}
#menuWrap .inner nav ul li a:after { 
	content: '';
	width: 8px;
	height: 8px;
	margin: auto;
	border-right: #1A1A1C 1px solid;
	border-bottom: #1A1A1C 1px solid;
	display: block;
	position: absolute;
	top: calc(50% - 4px);
	right: 20px;
	transform: rotate(-45deg);
}
#menuWrap .inner nav ul li span.btn_search_store:before,
#menuWrap .inner nav ul li span.btn_search_store:after { content: ''; width: 11px; border-top: #1A1A1C 1px solid; position: absolute; top: calc(50% - 0.5px); right: 18px; transition: 0.2s;}
#menuWrap .inner nav ul li span.btn_search_store:after { transform: rotate(90deg);}
#menuWrap .inner nav ul li span.btn_search_store.open:after { transform: rotate(0deg);}
#menuWrap .inner nav .nav_store { width: 100%; height: 100%; background: #FFF; position: fixed; top: 0; left: -100%; z-index: 200; transition: .3s ease;}
#menuWrap .inner nav .nav_store.show { left: 0;}
#menuWrap .inner nav .nav_store .head { border-bottom: #DDD 1px solid;}
#menuWrap .inner nav .nav_store .head .back_main { padding: 18px 32px 15px; position: relative;}
#menuWrap .inner nav .nav_store .head .back_main:before {
  content: '';
  width: 6px;
  height: 6px;
  margin: auto;
  border-right: #1A1A1C 1px solid;
  border-bottom: #1A1A1C 1px solid;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  transform: rotate(135deg);
}
#menuWrap .inner nav ul li.mypage     { padding-left: 40px; background: url(../../img/usr/sp/menu/nav02.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.history01  { padding-left: 40px; background: url(../../img/usr/sp/menu/nav06.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.bookmark   { padding-left: 40px; background: url(../../img/usr/sp/menu/nav17.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.netshop    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav01.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.gift       { padding-left: 40px; background: url(../../img/usr/sp/menu/nav13.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.stamp      { padding-left: 40px; background: url(../../img/usr/sp/menu/nav10.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.drug       { padding-left: 40px; background: url(../../img/usr/sp/menu/nav12.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.goodsstore { padding-left: 40px; background: url(../../img/usr/sp/menu/nav14.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.history    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav06.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.ranking    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav05.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.other01    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav15.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.other02    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav16.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.other03    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav01.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.guide      { padding-left: 40px; background: url(../../img/usr/sp/menu/nav08.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.contact    { padding-left: 40px; background: url(../../img/usr/sp/menu/nav09.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.rule       { padding-left: 40px; background: url(../../img/usr/sp/menu/nav03.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.shop       { padding-left: 40px; background: url(../../img/usr/sp/menu/nav07.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.logout     { padding-left: 40px; background: url(../../img/usr/sp/menu/nav11.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .inner nav ul li.calendar   { padding-left: 40px; background: url(../../img/usr/sp/menu/nav16.png) no-repeat 5px 10px; background-size: 30px;}
#menuWrap .shop .inner { display: none;}
#menuWrap .cus_menu { padding: 5px 0; display: flex;}
#menuWrap .cus_menu div { width: 32%; height: 30px; padding: 12px 0 0 0; margin: 5px 1%; border-radius: 3px; font-size: 12px; text-align: center; vertical-align: middle; color: #FFF; background: #232f3e;}
#menuWrap .cus_menu div a { text-decoration: none; color: #FFF;}

/* 未ログイン時 */
#menuWrap.guest_menu_ #menuBtnClose { height: 50px; background: #F2F2F2;}
#menuWrap.guest_menu_ #menuBtnClose img { width: 12px; margin: auto auto 5px;}
#menuWrap.guest_menu_ .inner nav ul li.point { height: 50px; padding: 0 60px 0 32px; background: #F2F2F2;}

/* 「カートに戻りますか？」のダイアログ表示 */
#head02 { 
	position: relative;
}
#head02 .header-dialog {
  width: calc(100vw - 32px);
  border: #DDD 1px solid;
  border-radius: 12px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform:translate(-50%,100%);
  bottom: 30px;
  display: none;
}
#head02 .header-dialog_inner { 
	padding: 16px;
	box-sizing: border-box;
}
#head02 .header-dialog_headding {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
#head02 .header-dialog_body {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	column-gap: 10px;
}
#head02 .header-dialog_btn {
  width: 115px;
  height: 56px;
  border: #333 1px solid;
  border-radius: 56px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
  transition: 0.3s ease-in-out;
}
#head02 .header-dialog_btn.-yellow {
  width: 174px;
  border-color: #CC0000;
	color: #FFF;
  background: #CC0000;
}