@charset "utf-8";
/* CSS Document */

.manualItemList ul.manualThumbnail .Price {font-weight: bold;}

body#color_exchange .cg_btn, body#top .cg_btn, body#cat-b2b .cg_btn {text-align: center;}
body#color_exchange .cg_btn div a, body#top .cg_btn div a, body#cat-b2b .cg_btn div a {
	background: #e4d2a2;
	border: solid 1px #c6b78c;
	border-radius: 5px;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	height: 51px;
	max-width: 300px;
	line-height: 1.2;
	position: relative;
	transition: background .4s, transform .4s;
}
body#color_exchange .cg_btn div a::before, body#top .cg_btn div a::before, body#cat-b2b .cg_btn div a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 22px;
	margin: auto;
	width: 6px;
	height: 6px;
	z-index: 2;
	border-top: solid 2px #e4d2a2;
	border-right: solid 2px #e4d2a2;
	transform: rotate(45deg);
	transition: border-color .4s;
}
body#color_exchange .cg_btn div a::after, body#top .cg_btn div a::after, body#cat-b2b .cg_btn div a::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	z-index: 1;
	transition: background .4s;
}
body#color_exchange .cg_btn div a:hover, body#top .cg_btn div a:hover, body#cat-b2b .cg_btn div a:hover {
  transform: translateY(1px);
  opacity: 1;
  background: #fff;
}
	
.font_st1, .font_st1 a {color: #da4636;}
.font_st1 a {text-decoration: underline;}
.font_st1 a:hover {text-decoration: none;}	
.ttl_st {border: 1px solid #d6d6d6; padding: 10px; font-size: 16px; font-weight: bold; border-radius: 5px; text-align: center; margin-bottom: 5%;}
.ttl_cat {font-size: 15px; border-left: 8px solid #e4d2a2; padding-left: 8px; margin-bottom: 2%;}
.sysItemCategoryPankuzu {margin-top: 10px;}

body#color_exchange .sideopen_menu, body#top .sideopen_menu, body#cat-b2b .sideopen_menu, body#sysItemDetail .sideopen_menu {position: absolute!important;}
body#color_exchange .sideopen_menu .top_menu,
body#color_exchange .sideopen_menu .bottom_menu,
body#color_exchange .drop_menu .sns_wrap,
body#top .sideopen_menu .top_menu,
body#top .sideopen_menu .bottom_menu,
body#top .drop_menu .sns_wrap,
body#cat-b2b .sideopen_menu .top_menu,
body#cat-b2b .sideopen_menu .bottom_menu,
body#cat-b2b .drop_menu .sns_wrap {display: none!important;}

body#color_exchange .drop_menu .site_menu, body#top .drop_menu .site_menu, body#cat-b2b .drop_menu .site_menu {display: none!important;}

body#color_exchange .drop_menu #switch:checked ~ label + #NavWrap,
body#top .drop_menu #switch:checked ~ label + #NavWrap,
body#cat-b2b .drop_menu #switch:checked ~ label + #NavWrap {max-height: 110px!important;}

body#color_exchange .drop_menu .user_menu #log_point,
body#top .drop_menu .user_menu #log_point,
body#cat-b2b .drop_menu .user_menu #log_point {display: none!important;}

body#color_exchange .drop_menu .user_menu .btns, body#top .drop_menu .user_menu .btns, body#cat-b2b .drop_menu .user_menu .btns {margin-top: 20px;}
body#color_exchange .drop_menu #NavWrap, body#top .drop_menu #NavWrap, body#cat-b2b .drop_menu #NavWrap {height: 110px!important;}

body#sysItemDetail .sideopen_menu .top_menu, body#sysItemDetail .sideopen_menu .bottom_menu, body#sysItemDetail .drop_menu .sns_wrap {display: none!important;}
body#sysItemDetail .drop_menu .site_menu, body#sysItemDetail:not(.fixedMenu) .header_wrap {}
body#sysItemDetail .drop_menu #switch:checked ~ label + #NavWrap {max-height: 110px!important;}
body#sysItemDetail .drop_menu .user_menu #log_point {display: none!important}
body#sysItemDetail .drop_menu .user_menu .btns {margin-top: 20px;}
body#sysItemDetail .drop_menu #NavWrap {height: 110px!important;}

/*================================================
 *  PC向けデザイン
 ================================================*/
@media print, screen and (min-width:1121px) {
	.b2b_header {width: 100%; margin: auto; border-bottom: 1px solid #ccc; height: 55px;}
	.b2b_header .h_inner {width: 1100px; margin: 10px auto 0;}
	.b2b_header .logo_all {width: 580px; height: 54px; float: left;}
	
	body#color_exchange .header_wrap,
	body#top .header_wrap,
	body#cat-b2b .header_wrap,
	body#sysItemDetail .header_wrap	{
		height: auto;
		background-color: transparent;
		border-bottom: none;
		position: absolute!important;
		width: 1100px;
		margin: auto;
	}
	
	body#color_exchange .header_wrap_inner, body#top .header_wrap_inner, body#cat-b2b .header_wrap_inner, body#sysItemDetail .header_wrap_inner {position: absolute; top: 0; right: 5px;}
	.b2b_mainimg {width: 100%;}
	.b2b_mainimg section {width: 1100px; margin: 20px auto 10px;}
	
	body#color_exchange p, body#top p, body#cat-b2b p {font-size: 14px;}
	.cg_btn {margin: 30px 0 25px; padding-bottom: 2%;}
	body#color_exchange #free_area h1, body#top #free_area h1, body#cat-b2b #free_area h1 {margin-bottom: 30px;}
	.b2b_items li {
		display: inline-block;
		float: none;
		vertical-align: top;
		letter-spacing: normal;
		width: 25%;
		padding: 8px;
		text-align: left;
	}
	.manualItemList ul.manualThumbnail {letter-spacing: -.4em; margin-bottom: 8%;}
	.disp_Mb {display: none!important}
	
	body#color_exchange div#sysAside, body#top div#sysAside, body#cat-b2b div#sysAside, body#sysItemDetail div#sysAside {margin-top: 15px;}
	body#color_exchange .sysFuncMemberLogin ul li:first-child,
	body#top .sysFuncMemberLogin ul li:first-child,
	body#cat-b2b .sysFuncMemberLogin ul li:first-child,
	body#sysItemDetail .sysFuncMemberLogin ul li:first-child {display: none;}
	.Mb_left {text-align: center;}
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (min-width:768px) and (max-width:1120px) {
	body#color_exchange div#sysAll, body#top div#sysAll, body#cat-b2b div#sysAll, body#sysItemDetail div#sysAll {margin-top: 10px!important;}
	body#color_exchange .head_info, body#top .head_info, body#cat-b2b .head_info, body#sysItemDetail .head_info {position: absolute!important;}
	.b2b_header {width: 100%; margin: auto; border-bottom: 1px solid #ccc; height: 55px;}
	.b2b_header .h_inner {width: 100%; margin: 0 auto;}
	.b2b_header .logo_all {padding-left: 10px;}
	body#color_exchange .header_wrap, body#top .header_wrap, body#cat-b2b .header_wrap, body#sysItemDetail .header_wrap {
		height: auto;
		background-color: transparent;
		border-bottom: none;
		position: absolute!important;
		width: 1100px;
		margin: auto;
	}
	body#color_exchange:not(.fixedMenu) .header_wrap,
	body#top:not(.fixedMenu) .header_wrap,
	body#cat-b2b:not(.fixedMenu) .header_wrap {display: none!important;}
	
	body#color_exchange .header_wrap_inner,
	body#top .header_wrap_inner,
	body#cat-b2b .header_wrap_inner,
	body#sysItemDetail .header_wrap_inner {position: absolute; top: 23px; right: 5px;}
	
	div.page_title h1 {font-size: 16px; margin-bottom: 25px!important;}
	body#color_exchange p, body#top p, body#cat-b2b p {font-size: 14px;}
	.cg_btn {margin: 30px auto;}
	.ttl_st {width: 96%; margin: 0 auto 3%;}
	.ttl_cat {margin: 0 2% 3%;}
	.b2b_items {padding: 0 2%; margin-bottom: 8%;}
	.b2b_items li {
		display: inline-block;
		float: none;
		vertical-align: top;
		letter-spacing: normal;
		width: 24.4%;
		padding: 5px;
		text-align: left;
	}
	.disp_Mb {display: none!important;}
	.Mb_left {text-align: center;}
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	body#color_exchange div#sysAll, body#top div#sysAll, body#cat-b2b div#sysAll, body#sysItemDetail div#sysAll {margin-top: 0;}
	body#color_exchange .head_info, body#top .head_info, body#cat-b2b .head_info, body#sysItemDetail .head_info {position: static;}
	.b2b_header {width: 100%; margin: auto; border-bottom: 1px solid #ccc; height: 46px;}
	.b2b_header .h_inner {width: 100%; margin: 0 auto;}
	.b2b_header .logo_all {padding-left: 5px; padding-top: 5px;}
	
	body#color_exchange:not(.fixedMenu) .header_wrap,
	body#top:not(.fixedMenu) .header_wrap,
	body#cat-b2b:not(.fixedMenu) .header_wrap {display: none!important;}
	body#color_exchange .logo img, body#top .logo img, body#cat-b2b .logo img, body#sysItemDetail .logo img {width: 155px; margin-right: 12px; float: left;}
	
	body#sysItemDetail .drop_menu #switch ~ label {position: absolute;}
	body#sysItemDetail #sysAll .sysCategoryPankuzu {line-height: 0!important;}
	
	body#color_exchange p.head_title, body#top p.head_title, body#cat-b2b p.head_title, body#sysItemDetail p.head_title {font-size: 10px; line-height: 1.5;}
	div.page_title h1 {font-size: 14px; margin-bottom: 25px!important;}
	
	body#color_exchange p, body#top p, body#cat-b2b p {font-size: 13px; padding: 0 6%;}
	.cg_btn {margin: 30px auto;}
	.ttl_st {width: 96%; margin: 0 auto 3%; font-size: 14px;}
	.ttl_cat {margin: 6% 2% 4%; font-size: 13px;}
	.b2b_items {padding: 0 2%; margin-bottom: 8%;}
	.b2b_items li {
		display: inline-block;
		float: none;
		vertical-align: top;
		letter-spacing: normal;
		width: 49.3%;
		padding: 1%;
		text-align: left;
		margin-bottom: 5%;
	}
	.mb_none {display: none!important;}
	.Mb_left {text-align: left;}
	.sysItemCategoryPankuzu {padding-left: 5px;}
}

/*================================================
 *  汎用
 ================================================*/
.mb10p {margin-bottom: 10%!important;}