* 
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}
.wrapper .header { height:210px; }

.wrapper header {
	width:100%;
	height:210px !important;
	display:block;
	position:fixed;
	top:0;
	z-index:9999;
	background:#fff;
	box-sizing:border-box;
	padding:0 !important;
	font-size:14px;
}
#brandpage header {
	width:100%;
	height:160px !important;
	display:block;
	position:fixed;
	top:0;
	z-index:9999;
	background:#fff;
	box-sizing:border-box;
	padding:0 !important;
	font-size:14px;
}


#brandpage .header_online { display:none !important; }

#fs_Top .header_store { display:none; }

#headerarea {
	width:100%;
	max-width:1200px;
	margin:0 auto !important;
	padding:0 !important;
}
	#headerarea .logo {
		display:block;
		width:100%;
		height:110px;
		text-align:center;
		position:relative;
	}
		#headerarea .logo figure {
			width:15%;
			height:auto;
			position:absolute;
			top:50%;
			left:50%;
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		    transform: translate(-50%, -50%);
		}
		#headerarea .ico_menu {
			display:block;
			position:absolute;
			width:200px !important;
			height:auto !important;
			top:50%;
			right:10px;
		    -webkit-transform: translate(0%, -50%);
		    -ms-transform: translate(0%, -50%);
		    transform: translate(0%, -50%);
		}
		#headerarea .ico_menu > ul {
			display:flex;
			flex-wrap:nowrap;
			align-items:center;
			box-sizing:border-box;
		}
			#headerarea .ico_menu > ul > li {
				width:80px;
				margin:0 !important;
				padding:0 !important;
			}
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo {
				margin-top:-3px;
				text-align:center;
			}
			
		/*	#headerarea .ico_menu > ul > li.my > .fs-clientInfo .login,
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .logout {
				position:relative;
			} */
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .login img,
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .logout img {
				display:block;
				margin:0 auto;
			}
			
		/*	#headerarea .ico_menu > ul > li.my > .fs-clientInfo .login img:after {
				content:"\30ED\30B0\30A4\30F3";
			}
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .logout img:after {
				content:"\30ED\30B0\30A2\30A6\30C8";
			}
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .login img:after,
			#headerarea .ico_menu > ul > li.my > .fs-clientInfo .logout img:after {
				width:100%;
				width:5.0em;
				display:block;
				font-size:10px;
				position:absolute;
				top:101%;
				left:0%;
			    transform:scale(0.6);
			} */
			
			
	#headerarea .header_category,
	#headerarea .header_online {
		width:100vw;
		height:50px;
		text-align:center !important;
		margin-left: calc(((100vw - 100%) / 2) * -1) !important;
		margin-right: calc(((100vw - 100%) / 2) * -1) !important;
		display:block;
		align-items:center;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		background:#fff;
	}
	#headerarea .header_online {
		border-top: 0px solid #000;
		border-bottom: 1px solid #000;
	}
		#headerarea .header_category > ul,
		#headerarea .header_online ul.header_menu {
			width:100%;
			display:flex;
			flex-wrap:nowrap;
			justify-content:center;
			align-items:center;
			font-weight:bold;
			color:#fff;
			font-weight:bold;
		}
			#headerarea .header_category > ul > li {
				margin:0;
				box-sizing:border-box;
				padding:0 1.0em;
				vertical-align:middle;
			}
			#headerarea .header_online ul.header_menu > li {
				width:14.0em;
				box-sizing:border-box;
				vertical-align:middle;
			}
			#headerarea .header_category > ul > li > a,
			#headerarea .header_online ul.header_menu > li > a {
				display:inline-block;
				width:100%;
				line-height:48px;
				vertical-align:middle;
			}
			#headerarea .header_category > ul > li:hover {
				background:#eee;
			}
			
		.header_online ul.header_menu > li > a > span.under {
			position:absolute;
			top:45%;
		    -webkit-transform: translate(0%, -50%);
		    -ms-transform: translate(0%, -50%);
		    transform: translate(0%, -50%);
		}
		.header_online ul.header_menu > li > a > span.under:before {
			content:"";
			display: inline-block;
			width: 6px;
			height: 6px;
			border-bottom: 2px solid #000;
			border-right: 2px solid #000;
			transform: rotate(45deg);
			margin-left:1.0em;
		}
		.header_online ul.header_menu > li > a:hover > span.under {
			position:absolute;
			top:50%;
		    -webkit-transform: translate(0%, -50%);
		    -ms-transform: translate(0%, -50%);
		    transform: translate(0%, -50%);
		}
		.header_online ul.header_menu > li > a:hover > span.under:before {
			content:"";
			display: inline-block;
			width: 6px;
			height: 6px;
			border-left: 2px solid #000;
			border-top: 2px solid #000;
			border-bottom: 0px solid #000;
			border-right: 0px solid #000;
			transform: rotate(45deg);
			margin-left:1.0em;
		}
			
			#headerarea ul.categorylist li.category {
				font-size:16px;
				font-weight:bold;
				color:#fff;
				margin-bottom:20px;
				position:relative;
			}
			#headerarea ul.categorylist li.category > a {
				width:auto !important;
				box-sizing:border-box;
			}
			#headerarea ul.categorylist li.bag > a {
				padding-left:35px;
			}
			#headerarea ul.categorylist li.wallet > a {
				padding-left:40px;
			}
			#headerarea ul.categorylist li.other > a,
			#headerarea ul.categorylist li.acce > a {
				padding-left:30px;
			}
			#headerarea ul.categorylist li.category:before {
				content:"";
				display:inline-block;
				width:25px;
				height:25px;
				vertical-align:middle;
				padding-right:1.0em;
				position:absolute;
				left:0;
				top:50%;
			    -webkit-transform: translate(0%, -50%);
			    -ms-transform: translate(0%, -50%);
			    transform: translate(0%, -50%);
			}
			#headerarea ul.categorylist li.bag:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_bag.svg) no-repeat;
				background-size:contain;
			}
			#headerarea ul.categorylist li.wallet:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_wallet.svg) no-repeat;
				background-size:contain;
			}
			#headerarea ul.categorylist li.acce:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_accessory.svg) no-repeat;
				background-size:contain;
			}
			#headerarea ul.categorylist li.other:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_other.svg) no-repeat;
				background-size:contain;
			}

@media only screen and (max-width: 1146px) {

			#headerarea ul.categorylist li.category {
				font-size:18px;
				font-weight:bold;
				color:#fff;
				margin-bottom:20px;
			}
			#headerarea ul.categorylist li.category:before {
				content:"";
				display:inline-block;
				width:20px;
				height:20px;
				vertical-align:middle;
			}
}


@media only screen and (max-width: 1037px) {

			#headerarea ul.categorylist li.category {
				font-size:16px;
				font-weight:bold;
				color:#fff;
				margin-bottom:20px;
			}
			#headerarea ul.categorylist li.category:before {
				content:"";
				display:inline-block;
				width:16px;
				height:16px;
				vertical-align:middle;
				padding-right:0.8em;
			}
}



/* ------------------------------------
	ヘッダー検索
-------------------------------------*/

#headerarea .ico_menu ul li.search #header_search_area * {
  box-sizing: border-box;
  border:none !important;
}

#headerarea .ico_menu ul li.search #header_search_area .inner {
  position: relative;
  height: 30px;
  margin: 0 auto;
  width: 30px;
  border:none !important;
}

#headerarea .ico_menu ul li.search #header_search_area .search-btn {
  background:url(https://sonne.itembox.design/item/images/asset/Icon_search.svg) no-repeat center center;
  background-size:contain;
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 100%;
  margin: 0 auto 0 auto;
  position: absolute;
  left:0;
  top: 5px;
  text-align: center;
}
/* #headerarea .ico_menu ul li.search #header_search_area .search-btn::before {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  width: 22px;
  height: 22px;
  content: "";
  border: 1px solid #ccc;
  border-radius: 100%;
  animation: circleBorder 1.5s infinite;
  z-index:0;
}*/
#headerarea .ico_menu ul li.search #header_search_area .search-btn::after {
  position:absolute;
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  left:15px;
  top:10px;
  border: 5px solid transparent;
  border-left-color: #fff;
  border-left: 0px;
  z-index:0;
}
@keyframes circleBorder {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5, 1.5);
  }
}


#headerarea .ico_menu ul li.search #header_search_area .search-btn i {
  /*color: #fff;*/
  margin: 0;
}


#headerarea .ico_menu ul li.search #header_search_area #searchform {
  height: 30px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 30px;
}

#headerarea .ico_menu ul li.search #header_search_area input[type="text"] {
  background: #fff;
  border: 1px solid #4d4d4d !important;
  border-radius: 5px;
  color: #4d4d4d;
  cursor: pointer;
  height: 30px;
  opacity: 0;
  outline: none;
  padding: 3px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.7s;
  width: 30px;
  z-index: 5;
}

#headerarea .ico_menu ul li.search #header_search_area input[type="submit"] {
  display: none;
}

#headerarea .ico_menu ul li.search #header_search_area input[type="text"]:focus {
  cursor: text;
  opacity: 1;
  width: 200px;
}
#headerarea .ico_menu ul li.search #header_search_area input[type="text"]:hover {
  cursor: text;
  opacity: 1;
  width: 200px;
}




@media only screen and (max-width: 767px) {


/* ------------------------------------
	SP header
-------------------------------------*/

.wrapper header {
	width:100%;
	height:110px !important;
	display:block;
	position:fixed;
	top:0;
	z-index:999;
	background:#fff;
	box-sizing:border-box;
	padding:0 !important;
	font-size:14px;
}
#brandpage header {
	width:100%;
	height:60px !important;
	display:block;
	position:fixed;
	top:0;
	z-index:99999;
	background:#fff;
	box-sizing:border-box;
	padding:0 !important;
	font-size:14px;
}

#headerarea_sp {
	height:60px;
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	position:fixed;
	z-index:99;
	top:0%;
}
	#headerarea_sp .spnav {
		position:absolute;
		top:50%;
	    -webkit-transform: translate(0%, -50%);
	    -ms-transform: translate(0%, -50%);
	    transform: translate(0%, -50%);
	}
	#headerarea_sp .spnav #sp_menu {
		width:100%;
		width:95vw;
		display:flex;
		flex-wrap:nowrap;
		justify-content:space-between;
		align-items:center;
	}
	#headerarea_sp .spnav #sp_menu li {
		min-width:30px;
		margin:0 0.5em;
	}
	#headerarea_sp .spnav #sp_menu li:hover {
		opacity:0.6;
	}
	#headerarea_sp .spnav #sp_menu li:nth-child(1),
	#headerarea_sp .spnav #sp_menu li:nth-child(2),
	#headerarea_sp .spnav #sp_menu li:nth-child(4),
	#headerarea_sp .spnav #sp_menu li:nth-child(5) {
		width:30px;
	}
	#headerarea_sp .spnav #sp_menu li:nth-child(3) {
		width:auto;
		box-sizing:border-box;
	}
		#headerarea_sp .spnav #sp_menu li:nth-child(3) img {
			max-width:50%;
			height:auto;
			display:block;
			margin:-10px auto 0 auto;
		}



	.header_online {
		width:100vw;
		height:50px !important;
		line-height:50px;
		text-align:center !important;
		margin-left: calc(((100vw - 100%) / 2) * -1) !important;
		margin-right: calc(((100vw - 100%) / 2) * -1) !important;
		display:block;
		align-items:center;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		position:fixed;
		top:60px;
		z-index:1 !important;
		background:#fff;
	}
	.header_online .header_menu {
		display:flex;
		flex-wrap:nowrap;
		justify-content:space-between;
		align-items:center;
		height:50px !important;
		line-height:50px;
	}
	.header_online .header_menu > li {
		width:33%;
		height:50px;
		line-height:50px;
	    text-align:center;
	    vertical-align:middle;
		border-right: 1px solid #ccc;
	    font-size:14px !important;
	}
	.header_online .header_menu > li:nth-child(1) {
		width:28%;
	}
	.header_online .header_menu > li:nth-child(2) {
		width:39%;
	}
	.header_online .header_menu > li:nth-child(3) {
		width:32%;
	}
	.header_online .header_menu > li > a {
		width:100%;
		height:100%;
		line-height:48px;
		display:block;
	    text-align:center;
	    vertical-align:middle;
	    margin:auto;
	    position:relative;
	    font-size:14px !important;
	}
		.header_online .header_menu > li > a:hover {
			background:#000;
			color:#fff;
		}
	.header_online .header_menu > li > a > p {
		position:absolute;
		top:50%;
	    left:50%;
	    -webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	}
	.header_online .header_menu > li:nth-child(4) {
		border-right: 0;
	}
		.header_category > ul,
		.header_online ul {
			width:100%;
			display:flex;
			flex-wrap:nowrap;
			justify-content:center;
			align-items:flex-start;
		}
			.header_category > ul > li {
				margin:0 0.5em;
				box-sizing:border-box;
				padding:1.0em 0.5em;
				font-weight:bold;
				height:100%;
			}
			.header_online ul > li {
				width:auto;
				margin:0 0em;
				box-sizing:border-box;
				padding:1.0em 0.5em;
				font-weight:bold;
				height:100%;
			}
			.header_online ul.header_menu > li:nth-child(4) {
				width:80px;
			}
		.header_online ul.header_menu > li > a > span.under {
			position:absolute;
			top:45%;
		    -webkit-transform: translate(0%, -50%);
		    -ms-transform: translate(0%, -50%);
		    transform: translate(0%, -50%);
		}
		.header_online ul.header_menu > li > a:hover > span.under:before {
			content:"";
			display: inline-block;
			width: 6px;
			height: 6px;
			border-left: 2px solid #fff;
			border-top: 2px solid #fff;
			border-bottom: 0px solid #fff;
			border-right: 0px solid #fff;
			transform: rotate(45deg);
			margin-left:1.0em;
		}

			.header_online .categorylist_wrap > ul > li.category {
				font-size:14px;
				font-weight:bold;
				color:#fff;
				margin-bottom:15px;
				display:block;
			}
			.header_online .categorylist_wrap > ul > li.category > a {
				width:auto !important;
				display:inline-block !important;
			}
			.header_online .categorylist_wrap > ul > li.category:before {
				content:"";
				display:inline-block;
				width:20px;
				height:20px;
				vertical-align:middle;
				padding-right:0.7em;
			}
			.header_online ul.categorylist li.bag:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_bag.svg) no-repeat;
				background-size:contain;
			}
			.header_online ul.categorylist li.wallet:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_wallet.svg) no-repeat;
				background-size:contain;
			}
			.header_online ul.categorylist li.acce:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_accessory.svg) no-repeat;
				background-size:contain;
			}
			.header_online ul.categorylist li.other:before {
				background:url(https://sonne.itembox.design/item/images/asset/icon_other.svg) no-repeat;
				background-size:contain;
			}


/* ------------------------------------
	SP menu
-------------------------------------*/
label.menu_toggle {
	display:block;
	width:40px;
	height:40px;
	position:fixed;
	top:0px;
	left:0%;
	z-index: 99999 !important;
	transition: all 500ms 0s ease;
}
	#spmenu_btn {
		display:block;
		color:#000;
		position:absolute;
		top:0;
		left:50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}
.bar {
	display: block;
	background-color: #000;
	width: 25px;
	height: 3px;
	border-radius: 5px;
	margin: 5px auto;
	transition: background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;
}

#slide_menu {
	background: #fff;
	color:#000;
	position: fixed;
	top:45px;
	left: -105%;
	width:60%;
	height: auto;
	transition: all 500ms 0s ease;
	z-index: 999999 !important;
}
#slide_menu .menu_toggle {
	cursor: pointer;
}
#slide_menu .menu_toggle:hover {
}
#spmenu_open {
	display: none;
}
#headerarea_sp input[type="checkbox"] {
	display: none;
}
#headerarea_sp input[type="checkbox"]:checked ~ #slide_menu_wrap {
	position: fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	width:100vw;
	height:100vh;
/*	background:#000;
	opacity:0.5; */
	z-index: 9999 !important;
	transition: all 500ms 0s ease;
}
#headerarea_sp input[type="checkbox"]:checked ~ #slide_menu {
	left: 0%;
	transition: all 500ms 0s ease;
	z-index:999999 !important;
	background:#fff;
	overflow:hidden;
}

#headerarea_sp input[type="checkbox"]:checked ~ label.menu_toggle .bar {
  background-color: #000;
}

#headerarea_sp input[type="checkbox"]:checked ~ label.menu_toggle .top {
  -webkit-transform: translateY(10px) rotateZ(45deg);
  -moz-transform: translateY(10px) rotateZ(45deg);
  -ms-transform: translateY(10px) rotateZ(45deg);
  -o-transform: translateY(10px) rotateZ(45deg);
  transform: translateY(10px) rotateZ(45deg);
}

#headerarea_sp input[type="checkbox"]:checked ~ label.menu_toggle .bottom {
  -webkit-transform: translateY(-5px) rotateZ(-45deg);
  -moz-transform: translateY(-5px) rotateZ(-45deg);
  -ms-transform: translateY(-5px) rotateZ(-45deg);
  -o-transform: translateY(-5px) rotateZ(-45deg);
  transform: translateY(-5px) rotateZ(-45deg);
}

#headerarea_sp input[type="checkbox"]:checked ~ label.menu_toggle .middle {
  width: 0;
}

#headerarea_sp input[type="checkbox"]:checked ~ label.menu_toggle {
	display:block;
	width:50px;
	height:50px;
	background:#fff;
	position:fixed;
	top:0;
	right:0%;
	z-index: 999999 !important;
	transition: all 500ms 0s ease;
}

.middle {
  margin: 0 auto;
}

#slide_menu .menulist {
	width:100%;
	padding:0 0 40px 0;
	margin:0;
	border: 0px solid #ccc;
}
#slide_menu .menulist ul {
	width:100%;
	box-sizing:border-box;
	padding:20px;
}
	#slide_menu .menulist ul li {
		width:100%;
		text-align:left;
		font-weight:bold;
	}
	#slide_menu .menulist ul li > a {
		display:block;
		width:100%;
		padding:10px 1.0em;
	}
	#slide_menu .menulist ul li > a:hover {
		background:#ccc;
		color:#fff;
	}




/* ------------------------------------
	スマホ用検索メニュー
-------------------------------------*/
#sp_slide_search label.search_toggle {
	display:block;
	width:40px;
	height:40px;
	position:fixed;
	top:calc(60px + 2%);
	right:10px;
	z-index: 99999 !important;
	transition: all 500ms 0s ease;
}
	#sp_slide_search #spsearch_btn {
		display:block;
		color:#000;
	/*	position:absolute;
		top:0;
		left:50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%); */
	}
#sp_slide_search .bar {
	display:none;
}

#sp_slide_search #search_slide {
	background: #fff;
	color:#000;
	position: fixed;
	top:110px;
	right: -105%;
	width:100%;
	height: calc(100% - 150px);
	transition: all 500ms 0s ease;
	z-index: 999999 !important;
}
#sp_slide_search #search_slide .search_toggle {
	cursor: pointer;
}
#sp_slide_search #search_slide .search_toggle:hover {
}
#sp_slide_search #spmenu_open {
	display: none;
}
#sp_slide_search input[type="checkbox"] {
	display: none;
}
#sp_slide_search input[type="checkbox"]:checked ~ #search_menu_wrap {
	position: fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	width:100vw;
	height:100vh;
/*	background:#000;
	opacity:0.5; */
	z-index: 9999 !important;
	transition: all 500ms 0s ease;
}
#sp_slide_search input[type="checkbox"]:checked ~ #search_slide {
	right: 0%;
	transition: all 500ms 0s ease;
	z-index:999999 !important;
	background:#fff;
	overflow-y:scroll;
	border-bottom: 1px solid #ccc;
}

#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle .bar {
	display:block;
	background-color: #000;
	width: 25px;
	height: 3px;
	border-radius: 5px;
	margin: 5px auto;
	transition: background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;
}

#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle .top {
  -webkit-transform: translateY(10px) rotateZ(45deg);
  -moz-transform: translateY(10px) rotateZ(45deg);
  -ms-transform: translateY(10px) rotateZ(45deg);
  -o-transform: translateY(10px) rotateZ(45deg);
  transform: translateY(10px) rotateZ(45deg);
}

#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle .bottom {
  -webkit-transform: translateY(-5px) rotateZ(-45deg);
  -moz-transform: translateY(-5px) rotateZ(-45deg);
  -ms-transform: translateY(-5px) rotateZ(-45deg);
  -o-transform: translateY(-5px) rotateZ(-45deg);
  transform: translateY(-5px) rotateZ(-45deg);
}

#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle .middle {
  width: 0;
}
#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle img {
	display:none;
	transition: all 500ms 0s ease;
}
#sp_slide_search input[type="checkbox"]:checked ~ label.search_toggle {
	display:block;
	width:50px;
	height:50px;
	position:fixed;
	top:calc(60px + 1%);
	right:10px;
	z-index: 999999 !important;
	transition: all 500ms 0s ease;
}

#sp_slide_search .middle {
  margin: 0 auto;
}

#search_slide .menulist {
	width:100%;
	padding:0 0 40px 0;
	margin:0;
	border: 0px solid #ccc;
}
#search_slide .menulist ul {
	width:100%;
	box-sizing:border-box;
	padding:20px;
}
	#search_slide .menulist ul li {
		width:100%;
		text-align:left;
		font-weight:bold;
	}
	#search_slide .menulist ul li > a {
		display:block;
		width:100%;
		padding:10px 1.0em;
	}
	#search_slide .menulist ul li > a:hover {
		background:#ccc;
		color:#fff;
	}

}