@charset "UTF-8";

/* Reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,em,strong,th {
	font-style: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

hr,legend {
	display: none;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

img,fieldset {
	border: 0;
	-webkit-backface-visibility: hidden;
}

li {
	list-style-type: none;
}

img {
	vertical-align: top;
}

/*IE6*/
* html img{
	vertical-align: bottom;
}
/*IE7*/
*:first-child+html img{
	vertical-align: bottom;
}

a{
	outline:none;	
}


/* clearfix
------------------------------------------------------------*/
.cf:after {	
	visibility: hidden;	
	display: block;	
	font-size: 0;	
	content: " ";	
	clear: both;	
	height: 0;	
}	

* html .cf { zoom: 1; } /* IE6 */	
*:first-child+html .cf { zoom: 1; } /* IE7 */	


.ani_none,
.ani_none > *,
.ani_none:before,
.ani_none:after{
	transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;	
}


/*------------ 初期設定 ------------*/
p {
	line-height: 1.7;	
}

/*------------ 全体 ------------*/
body,
html {
	width:100%;
	overflow-x:hidden;
}

._hover{
	opacity:1;
	transition: all 0.4s;
}

._hover:hover{
	opacity:0.6;
}


/*------------ WRAPPER ------------*/
#wrapper {
	width:950px;
	margin:0 auto;
}

/*------------ HEADER ------------*/
.home header {
	background-color: transparent;
}
.home header.active {
	background-color: #fff;
}
header{
	width:100%;
	height:60px;
	position:fixed;
	left:0;
	top:0;
	z-index:20;
	transition: all 0.4s;
	background: #fff;
}

header.active{
	background:#FFF; 
}

header .inner{
	width:960px;
	margin:0 auto;
	position:relative; 
}

header .inner h1{
	padding-top:16px;
}

header .inner ul{
	position:absolute;
	right:0;
	top:21px;
	display:flex;
}

header .inner ul li{
	margin-left:7px; 
}

header .inner ul li:last-child,
header .inner ul li.last{
	margin-right:0; 
}

header .inner ul li a{
	display:block;
	padding:1px 7px 0;
	height:18px;
	font-size:12px;
	color:#666666;
	text-decoration:none;
	font-weight:500;
	border-radius:4px;
	transition: all 0.4s;
	box-sizing:border-box;
	line-height:1.2;
}

header .inner ul li a:hover,
header .inner ul li a.active{
	background:#666666;
	color:#FFF; 
}

.sp{
	display:none;
}
.anc{
	display:block;
	margin-top:-60px; 
	padding-top:60px;
	z-index:1;
	position:relative;
}
@media screen and (max-width: 800px) {
	.anc{
		margin-top:-13.3vw; 
		padding-top:13.3vw;
	}
	img{
		width:100%;
		height:auto; 
	}
	
	.sp{
		display:block;
	}
	
	.pc{
		display:none;	
	}
	
	body ,
	html{
		width:100%;
		min-width:100%;
		overflow-x:hidden;
	}	
	
	header{
		width:100%;
		height:13.3vw;
	}
	
	header:before{
		content:"";
		display:block;
		width:100%;
		height:100vh;
		background:#f4f4f6;
		position:fixed;
		left:0;
		top:0;
		z-index:1;
		opacity:0;
		visibility: hidden;
		transition: all 0.4s;
	}
	
	header.open:before{
		opacity:1;
		visibility: visible;
	}
	
	header .inner{
		width:100%;
		margin:0 auto;
		position:relative; 
		z-index:2;
	}
	
	header .inner h1{
		padding-top:4vw;
		margin-left:5.3vw;
		width:24vw;
	}
	
	header .inner ul{
		width:100%;
		position:absolute;
		right:0;
		top:13.3vw;
		flex-wrap:wrap;
		background:#f4f4f6;
		display:none;
	}
	
	header .inner ul li{
		margin-right:0;
		width:100%;
	}
	
	header .inner ul li.w50{
		width:50%; 
		box-sizing:border-box;
	}
	
	header .inner ul li.w50.l{
		border-right:solid 0.26vw #eceaed;
	}
	
	header .inner ul li:last-child{
		margin-right:0; 
	}
	
	header .inner ul li a,
	header .inner ul li div.search{
		display:block;
		padding:4vw 7.3vw 3.6vw;
		height:auto;
		font-size:3.2vw;
		border-radius:0;
		background:#f4f4f6;
		color:#666666;
		border-bottom:solid 0.26vw #eceaed;
	}
	
	header .inner ul li div.search{
		position:relative;
		left:auto;
		top:auto;
		background:#eceaed;
		border-bottom:solid 0.26vw #f4f4f6; 
	}
	
	header .inner ul li:last-child a{
		width:5.86vw;
		padding:0;
		display:inline-block; 
		margin-left:5.3vw;
	}
	
	header .inner ul li:last-child{
		padding:7.3vw 0 7.3vw 2.7vw; 
	}
	
	header .inner ul li a:hover{
		background:#f4f4f6;
		color:#666666; 
	}
	
	#btn_menu{
		position:absolute;
		top:4vw;
		right:5.3vw;
		width:6.4vw;
		height:5.2vw;
		display:block;
		cursor:pointer;
		z-index:11;
	}
	
	#btn_menu span {
		display: block;
		background: #666666;
		width:100%;
		height:0.66vw;
		position: absolute;
		left:0;
		transition: all 0.4s;
		border-radius:0.26vw
	}
	
	#btn_menu span:first-child {
		top: 0vw;
	}
	#btn_menu span:nth-child(2){
		top: 50%;
		transform:translateY(-50%);
	}
	#btn_menu span:last-child {
		bottom:0;
	}
	#btn_menu.active span:first-child {
		transform: translateY(-50%) rotate(45deg) ;
		top: 50%;
	}
	
	#btn_menu.active span:nth-child(2){
		opacity:0;
	}
	#btn_menu.active span:last-child {
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
	}
	header .inner ul li a.active{
		color:#666666;
	}
}

header.ec{
	background:#FFF; 
}

header.ec .inner{
	height:60px; 
}

header.ec .inner h1{
	padding-top:14px;
	width:80px;
}

header.ec nav ul{
	right:auto;
	left:125px;
	
} 

header.ec nav ul.color{
	left:340px; 
	top:23px;
}

header.ec nav ul.color li{
	margin-right:6px; 
}

header.ec nav ul.color li a{
	display:block;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#f27777;
	padding:0;
	box-sizing:border-box;
}

header.ec nav ul.color li:nth-child(2) a{
	background:#f2aabc; 
}
header.ec nav ul.color li:nth-child(3) a{
	background:#7fa8f5; 
}
header.ec nav ul.color li:nth-child(4) a{
	background:#fff799; 
}
header.ec nav ul.color li:nth-child(5) a{
	background:#f29b76; 
}
header.ec nav ul.color li:nth-child(6) a{
	background:#acd598; 
}
header.ec nav ul.color li:nth-child(7) a{
	background:#aa89bd; 
}
header.ec nav ul.color li:nth-child(8) a{
	background:#FFF;
	border:solid 1px #cdcdcd; 
}
header.ec nav ul.color li:nth-child(9) a{
	background:#b38c7b; 
}

header.ec .search{
	position:absolute;
	left:550px;
	top:15px;
}

header.ec .search span{
	font-size:12px;
	font-weight:500; 
}

header.ec .search label{
	position:relative; 
}

header.ec .search label input[type="text"]{
	display:inline-block; 
	border-radius: 6px;
	background-color: rgb(236, 234, 237);
	width: 160px;
	height: 30px;
	box-sizing:border-box;
	padding:0 33px 0 10px;
	box-sizing:border-box;
	border:none;
	margin-left:20px;
	outline:none;
}

header.ec .search label input[type="image"]{
	position:absolute;
	right:9px;
	top:50%;
	transform:translateY(-50%); 
}

header.ec .mypage,
header.ec .cart{
	font-size:9px;
	color:#666666;
	display:inline-block;
	text-decoration:none;
	position:absolute;
	right:0;
	top:13px;
	height:33px;
	padding-top:22px; 
	font-weight:500;
	box-sizing:border-box;
}

header.ec .mypage{
	right:48px; 
}

header.ec .mypage:after,
header.ec .cart:after{
	content:"";
	display:block;
	background:url(../images/ec_common/header_icon_cart.png) no-repeat left top;
	background-size:100% auto;
	width:23px;
	height:20px;
	top:0;
	left:-2px;
	position:absolute;
}

header.ec .mypage:after{
	background:url(../images/ec_common/header_icon_mypage.png) no-repeat left top;
	background-size:100% auto;
	width:20px;
	height:20px;
	top:0;
	left:12px;
}

header.ec .sub_menu{
	background:rgba(236,234,237,0.9);
	padding-bottom:30px;
	position:absolute;
	left:0;
	width:100%;
	top:60px;
	display:none;
}

header.ec .sub_menu .inner{
	width:960px;
	margin:0 auto;
	height:auto;
}

header.ec .sub_menu .inner ul{
	position:relative;
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	left:auto;
	top:auto;
}

header.ec .sub_menu .inner ul li{
	width:192px;
	padding-top:30px;
	margin-right:0;
}

header.ec .sub_menu .inner ul li a{
	height:auto;
	position:relative;
	background:none;
	border-radius:0;
	color:#666666;
	font-weight:400;
}

header.ec .sub_menu .inner ul li a span{
	line-height: 1.6;
	display:block;
	position:absolute;
	left:68px;
	top:50%;
	transform:translateY(-50%); 
}

@media screen and (max-width: 800px) {
	header.ec{
		background:#FFF; 
	}
	
	header.ec .inner .sp_navi{
		display:block;
		width:100%;
		height:calc(100vh - 13.3vw);
		overflow-y:scroll;
		position:absolute;
		left:0;
		top:13.3vw;
		display:none;
	}
	
	header.ec .inner{
		height:13.3vw; 
	}
	
	header.ec .inner h1{
		padding-top:2.4vw;
		width:21.3vw;
	}
	
	header.ec nav ul{
		right:auto;
		left:0;
		display:flex;
		width:100%;
		position:relative;
		top:0;
	}
	
	header.ec nav > ul > li:nth-child(1),
	header.ec nav > ul > li:nth-child(2),
	header.ec nav > ul > li:nth-child(3),
	header.ec nav > ul > li:nth-child(4),
	header.ec nav > ul > li:nth-child(5){ 
		background:#eceaed;
		border-bottom:solid 0.26vw #f4f4f6;
		
	}
	
	header.ec nav > ul > li:nth-child(1) > a,
	header.ec nav > ul > li:nth-child(2) > a,
	header.ec nav > ul > li:nth-child(3) > a,
	header.ec nav > ul > li:nth-child(4) > a,
	header.ec nav > ul > li:nth-child(5) > a{ 
		border-bottom:none;
		background:none;
		position:relative;
	}
	
	header.ec nav > ul > li:nth-child(3) > a:after,
	header.ec nav > ul > li:nth-child(4) >	a:after{
		content:"";
		display:block;
		background:url(../images/ec_common/icon_btm.png) no-repeat left top;
		background-size:100% auto;
		width:4.8vw;
		height:2.6vw;
		position:absolute;
		right:8vw;
		top:4.3vw;
		transition: all 0.4s;
	}
	
	header.ec nav > ul > li:nth-child(3) > a.active:after,
	header.ec nav > ul > li:nth-child(4) > a.active:after{
		transform:rotate(180deg);
	}
	
	header.ec nav ul li .sp_category_list_area{
		display:none; 
	}
	
	header.ec nav ul li .sp_category_list{
		width:84vw;
		margin:5.3vw auto 0;
		position:relative;
		left:auto;
		top:auto;
		display:flex;
		justify-content:space-between;
		background:#eceaed;
	}
	
	header.ec nav ul li .sp_category_list li{
		width:40vw;
		background:#eceaed;
		margin-bottom:8vw;
		padding:0 !important;
	}
	
	header.ec nav ul li .sp_category_list li a{
		background:none;
		position:relative;
		text-align:left;
		padding:0 !important;
		width:100%;
	}
	
	header.ec nav ul li .sp_category_list li:last-child a{
		margin-left:0; 
	}
	
	header.ec nav ul li .sp_category_list li a span{
		position:absolute;
		left:17.3vw;
		top:50%;
		transform:translateY(-50%);
		font-size:2.93vw;
		line-height: 1.6; 
		font-weight:400;
	}
	
	header.ec nav ul li .sp_category_list li a img{
		width:15.46vw; 
	}
	
	
	header.ec nav ul li .sp_category_list.color{
		justify-content:flex-start; 
	}
	
	header.ec nav ul li .sp_category_list.color li{
		width:12vw;
		margin-right:6vw;
	}
	
	header.ec nav ul li .sp_category_list.color li:nth-child(5n){
		margin-right:0; 
	}
	
	header.ec nav ul li .sp_category_list.color li a{
		text-align:center;
		width:100%;
		height:auto;
		background:none;
		border:none;
		border-radius:0;
	}
	
	header.ec nav ul li .sp_category_list.color li a span.color_block{
		display:inline-block;
		width:11.2vw;
		height:11.2vw;
		border-radius:50%;
		position:relative;
		left:auto;
		top:auto;
		padding:0;
		transform:none;
	}
	
	header.ec nav ul li .sp_category_list.color li:nth-child(1) a span.color_block{
		background:#f27777; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(2) a span.color_block{
		background:#f2aabc; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(3) a span.color_block{
		background:#7fa8f5; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(4) a span.color_block{
		background:#fff799; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(5) a span.color_block{
		background:#f29b76; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(6) a span.color_block{
		background:#acd598; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(7) a span.color_block{
		background:#aa89bd; 
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(8) a span.color_block{
		background:#ffffff;
		border:solid 0.13vw #cdcdcd;
	}
	header.ec nav ul li .sp_category_list.color li:nth-child(9) a span.color_block{
		background:#b38c7b; 
	}
	
	header.ec nav ul li .sp_category_list.color li a span.txt{
		display:inline-block;
		width:100%;
		position:relative;
		text-align:center;
		left:auto;
		top:auto;
		transform:none;
		margin-top:1vw;
	}
	
	header.ec nav ul li .sp_category_list.color li a img{
		width:100%;
		height:auto;
		vertical-align:inherit;
	}
	
	header .inner ul li div.search form{
		position:relative;
		
	} 
	
	header .inner ul li div.search input[type="text"]{
		display:block;
		margin:0; 
		width:100%;
		height:10.6vw;
		border-radius:0.8vw;
		box-sizing:border-box;
		padding:0 8vw 0 2.6vw;
		box-sizing:border-box;
		border:none;
		margin-top:2.6vw;		
	}
	
	header .inner ul li div.search input[type="image"]{
		width:4.53vw;
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		right:2.6vw; 
	}
}

/*------------ FOOTER ------------*/

.pnkz{
	width:960px;
	margin:0 auto 50px;
	display:flex;
}

.pnkz li,
.pnkz li a{
	font-size:12px;
	color:#666666;
	text-decoration:none;
}

.pnkz li span{
	display:inline-block;
	margin:0 10px; 
}

footer{
	background:#f4f4f4;
	padding:25px 0 35px;
}

footer .logo{
	text-align:center; 
}

footer .sns,
footer .link{
	display:flex;
	margin:28px 0 0;
	justify-content:center; 
}

footer .sns li:nth-child(1){
	margin-right:24px; 
}

footer .link li{
	margin-right:28px; 
}

footer .link li:last-child{
	margin-right:0; 
}

footer .link li a{
	font-size:12px;
	color:#666666;
	text-decoration:none; 
}

footer small{
	display:block;
	margin-top:23px;
	text-align:center;
	font-size:12px;
	color:#666666;
}

@media screen and (max-width: 800px) {
	.pnkz{
		width:89.3vw;
		margin:0 auto 4.5vw;
		display:flex;
	}
	
	.pnkz li,
	.pnkz li a{
		font-size:2.6vw;
	}
	
	.pnkz li span{
		display:inline-block;
		margin:0 1.86vw; 
	}
	
	footer{
		background:#f4f4f4;
		padding:15.3vw 0 8vw;
	}
	
	footer .logo{
		width:35.2vw;
		margin:6vw auto 0; 
	}
	
	footer .sns,
	footer .link{
		display:flex;
		margin:0 0 0;
		justify-content:center; 
	}
	
	footer .sns li{
		width:5.86vw; 
	}
	
	footer .link{
		display:none; 
	}
	
	footer .sns li:nth-child(1){
		margin-right:5.3vw; 
	}
	
	footer small{
		display:none;
	}
}

/*-------- text_right --------*/
.t_right {
	text-align: right;
}

/*-------- text_left --------*/
.t_left {
	text-align: left;
}

/*-------- center --------*/
.t_center {
	text-align: center;
}

/*-------- left --------*/
.left {
	float: left;
}

/*-------- right --------*/
.right {
	float: right;
}

/*-------- ClearBoth --------*/
.cb {
	clear: both;
}

/*-------- COLOR --------*/

.red{
	color:#FF0000;
}

.orange{
	color:#FF6600;
}

.blue{
	color:#0097B2;
}

/*-------- FONT --------*/

.bold{
	font-weight:700;
}

.f10{
	font-size:10px;
}

.f14{
	font-size:14px;
}

/*-------- WIDTH --------*/

.w149{
	width:149px;	
}

.w180{
	width:180px;	
}

.w287{
	width:287px;
}

.w380{
	width:380px;
}

.w304{
	width:304px;
}

/*-------- HEIGHT --------*/

.h350{
	height:350px;	
}

.h375{
	height:375px;	
}

.h500{
	height:420px;	
}

.h600{
	height:470px;	
}

/*-------- MARGIN --------*/

.ml3{
	margin:0 0 0 3px;
}

.ml10{
	margin:0 0 0 10px;
}

.ml30{
	margin:0 0 0 30px;
}

.ml40{
	margin:0 0 0 40px;
}

.ml60{
	margin:0 0 0 60px;
}

.ml70{
	margin:0 0 0 70px;
}

.mb10{
	margin:0 0 10px 0;
}

.mb15{
	margin:0 0 15px 0;
}

.mt3{
	margin:3px 0 0 0;
}

.mt10{
	margin:10px 0 0 0;
}


.mt20{
	margin:20px 0 0 0;
}

.mt30{
	margin:30px 0 0 0;
}

/*-------- PADDING --------*/

.pt5{
	padding-top:5px;
}

.pt10{
	padding-top:10px;
}

.pt15{
	padding-top:15px;
}

.pt20{
	padding-top:20px;
}

.pt25{
	padding-top:25px;
}

.pt30{
	padding-top:30px;
}

.pt40{
	padding-top:40px;
}

.pt60{
	padding-top:60px;
}

.pl10{
	padding-left:10px;	
}

.pl12{
	padding-left:12px;	
}

.pl15{
	padding-left:15px;	
}

.pl20{
	padding-left:20px;	
}

.pl30{
	padding-left:30px;	
}

.pl40{
	padding-left:40px;	
}

.pl50{
	padding-left:50px;	
}

.pl60{
	padding-left:60px;	
}

.pl70{
	padding-left:70px;	
}

.pl80{
	padding-left:80px;	
}

.pl100{
	padding-left:100px;	
}

.pr100{
	padding-right:100px;	
}


.pb20{
	padding-bottom:20px;	
}

/*-------- COMMON --------*/

.pic{
	padding:2px;
	display:block;
	border:1px solid #CCCCCC;
}

.hidden{
	overflow:hidden;
}

.abs{
	position:absolute;
}

.ondes{
	color:#999999;
}