@charset "UTF-8";

@media only screen and (min-width:769px){
	.top_brand {
		float: left;
		width: 432px;
		padding: 1.5vw 0vw;
		background-color: #f7f8f8;
	}
	.shop_title {
		margin: 40px 96px 40px;
	}
	.brand_box {
		margin: 0px 64px;
	}
	.brand_box li {
		margin-bottom: 25px;
	}
	.shop_item {
		float: left;
		width: 648px;
		padding: 1.5vw 0vw;
	}
	.shop_item ul {
		margin: 30px;
	}
	.shop_item .brand li {
		margin: 0px 0px 15px 0px;
	}
	.shop_item .brand .brand_item01 {
		margin: 0px 34px 15px;
	}
	.shop_item .item li {
		float: left;
		margin: 0px 15px 15px 0px;
	}
	.shop_item ul li:nth-child(3), .shop_item ul li:nth-child(5), .shop_item ul li:nth-child(8) {
		margin-right: 0px;
	}
	#logo {
		width: 140px!important;
	}
	#logo img {
		width: 100%!important;
	}
	#navi {
		float: right;
		width: 150px!important;
	}
}

@media only screen and (min-width:415px) and (max-width:768px){
    .top_brand {
		float: left;
		width: 40vw;
		padding: 1.5vw 0vw;
		background-color: #f7f8f8;
	}
	.shop_title {
		margin: 3.7vw 8.8vw 7.4vw;
	}
	.brand_box {
		margin: 0px 6vw;
	}
	.brand_box li {
		margin-bottom: 2.31vw;
	}
	.shop_item {
		float: left;
		width: 60vw;
		padding: 1.5vw 0vw;
	}
	.shop_item ul {
		margin: 2.7vw;
	}
	.shop_item .brand li {
		margin: 0px 0vw 1.38vw 0px;
	}
	.shop_item .brand .brand_item01 {
		margin: 0px 3.14vw 1.38vw;
	}
	.shop_item .brand li {
		float: left;
		margin: 0px 1.38vw 1.38vw 0px;
	}
	.shop_item ul li:nth-child(3), .shop_item ul li:nth-child(5), .shop_item ul li:nth-child(8) {
		margin-right: 0px;
	}
	#logo {
		width: 38vw!important;
	}
	#logo img {
		width: 100%!important;
	}
	#navi {
		float: right;
		width: 28vw!important;
	}
	img {
		width: 100%;
	}
}

@media only screen and (max-width:414px){
    .top_brand {
		width: 100%;
		padding: 4vw 0vw;
		background-color: #f7f8f8;
	}
	.shop_title {
		margin: 7.4vw 8.8vw 7.4vw;
	}
	.brand_box {
		margin: 0px 6vw;
	}
	.brand_box li {
		margin-bottom: 2.31vw;
	}
	.shop_item {
		width: 100%;
		padding: 4vw 0vw;
	}
	.shop_item ul {
		margin: 2.7vw;
	}
	.shop_item .brand li {
		width: 91vw;
		margin: 0px 2.6vw 2.6vw 0px;
	}
	.shop_item .item li {
		float: left;
		width: 43.59vw;
		margin: 0px 2.6vw 2.6vw 0px;
	}
	.shop_item ul li:nth-child(3) {
		margin-right: 43.59vw
	}
	.shop_item ul li:nth-child(2), .shop_item ul li:nth-child(5), .shop_item ul li:nth-child(7) {
		margin-right: 0px;
	}
	.shop_item ul li:nth-child(3), .shop_item ul li:nth-child(5) {
		margin-bottom: 10vw;
	}
	#logo {
		width: 38vw!important;
		padding-top: 10px;
	}
	#logo img {
		width: 100%!important;
	}

}

#service ul li{
    float:left;
    text-align: center;
}
#service ul li a{
    box-sizing:border-box;
    display: block;
    width:100%;
    background-color: #FFF;
    color:#000;
}

#service ul li a .icon,
.wrapimgBoxIn .icon{
    width:50px;
    height:50px;
    margin:10px auto 0px;
}
.wrapimgBoxIn h3{
    text-align:center;
    font-family: "Arial Black", sans-serif;
    font-weight:100;
}

#service ul li a:hover{
    text-decoration: none;
    color:#FFF;
}
#service ul li a p{
    text-align:center;
    font-family: "Arial Black", sans-serif;
    font-weight:100;
}
/*#service ul li:nth-child(1) a,*/
#inline-content01{
    border:4px solid #248baa;
}
#service ul li:nth-child(1) a .icon,
#inline-content01 .icon{
    background:url("../image/icons.png") left top no-repeat;
}
#service ul li:nth-child(1) a:hover{
    background-color: #248baa;
}
#service ul li:nth-child(1) a:hover .icon{
    background:url("../image/icons.png") left top -50px no-repeat;
}
/*#service ul li:nth-child(2) a,*/
#inline-content02{
    border:4px solid #9f583e;
}
#service ul li:nth-child(2) a .icon,
#inline-content02 .icon{
    background:url("../image/icons.png") left -50px top no-repeat;
}
#service ul li:nth-child(2) a:hover{
    background-color: #9f583e;
}
#service ul li:nth-child(2) a:hover .icon{
    background:url("../image/icons.png") left -50px top -50px no-repeat;
}
/*#service ul li:nth-child(3) a,*/
#inline-content03{
    border:4px solid #646a58;
}
#service ul li:nth-child(3) a .icon,
#inline-content03 .icon{
    background:url("../image/icons.png") left -100px top no-repeat;
}
#service ul li:nth-child(3) a:hover{
    background-color: #646a58;
}
#service ul li:nth-child(3) a:hover .icon{
    background:url("../image/icons.png") left -100px top -50px no-repeat;
}
/*#service ul li:nth-child(4) a,*/
#inline-content04{
    border:4px solid #ffc716;
}
#service ul li:nth-child(4) a .icon,
#inline-content04 .icon{
    background:url("../image/icons.png") left -150px top no-repeat;
}
#service ul li:nth-child(4) a:hover{
    background-color: #ffc716;
}
#service ul li:nth-child(4) a:hover .icon{
    background:url("../image/icons.png") left -150px top -50px no-repeat;
}
/*#service ul li:nth-child(5) a,*/
#inline-content05{
    border:4px solid #6d3c82;
}
#service ul li:nth-child(5) a .icon,
#inline-content05 .icon{
    background:url("../image/icons.png") left -200px top no-repeat;
}
#service ul li:nth-child(5) a:hover{
    background-color: #6d3c82;
}
#service ul li:nth-child(5) a:hover .icon{
    background:url("../image/icons.png") left -200px top -50px no-repeat;
}
/*#service ul li:nth-child(6) a,*/
#inline-content06{
    border:4px solid #f75c2f;
}
#service ul li:nth-child(6) a .icon,
#inline-content06 .icon{
    background:url("../image/icons.png") left -250px top no-repeat;
}
#service ul li:nth-child(6) a:hover{
    background-color: #f75c2f;
}
#service ul li:nth-child(6) a:hover .icon{
    background:url("../image/icons.png") left -250px top -50px no-repeat;
}
/*#service ul li:nth-child(7) a,*/
#inline-content07{
    border:4px solid #113985;
}
#service ul li:nth-child(7) a .icon,
#inline-content07 .icon{
    background:url("../image/icons.png") left -300px top no-repeat;
}
#service ul li:nth-child(7) a:hover{
    background-color: #113985;
}
#service ul li:nth-child(7) a:hover .icon{
    background:url("../image/icons.png") left -300px top -50px no-repeat;
}
/*#service ul li:nth-child(8) a,*/
#inline-content08{
    border:4px solid #e16b8c;
}
#service ul li:nth-child(8) a .icon,
#inline-content08 .icon{
    background:url("../image/icons.png") left -350px top no-repeat;
}
#service ul li:nth-child(8) a:hover{
    background-color: #e16b8c;
}
#service ul li:nth-child(8) a:hover .icon{
    background:url("../image/icons.png") left -350px top -50px no-repeat;
}

#fancybox-overlay {
    background-color: rgb(0,0,0)!important;
    opacity: 0.7!important;
}
#fancybox-left-ico, #fancybox-right-ico {
    width: 20px;
    height: 30px;
}
#fancybox-left-ico {
    background-image: url('../image/fancybox/ctrl.png');
    background-position: 0px 0px;
    left: 20px;
}
#fancybox-right-ico {
    background-image: url('../image/fancybox/ctrl.png');
    background-position: -20px 0px;
    left: auto;
    right: 20px;
}
#fancybox-close {
    bottom: -30px;
    right: 0px;
    left:auto;
    width: 23px;
    height: 23px;
    background: 
    transparent url('../image/fancybox/ctrl.png') -40px 0px;
}
#wrapimgBox {
    display:none;
}

#fancybox-content div{
    text-align:center;
}

#shop {
	background: #f7f8f8!important;
}
.shop_item {
	background: #fff;
}
.inner {
	padding: 0vw!important;
}
.float {
	clear: both;
}