@charset 'utf-8';

/* static sub
-------------------------------------------- */
#static .sub{
	/*background-color: #000;*/
}
#static .sub-box{
	background-color: #000;
	border: 1px solid #000;
	border-radius: 5px;
	overflow: hidden;
	color: #fff;
}

#static .event-info {
	background-color: #000;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background-color: #000;
	padding: 8% 0;
	display: block;
	text-align: center;
	width: 100%;
	overflow: hidden;
	border-radius: 5px;
}

#static .sub-price__input__inr:before{
	color: #333;
}
#static .sub-nav > li.is-active > a.sub-nav__inr:hover,
#static .sub-nav > li .is-current > a.sub-nav__inr{
	color: #fff !important;
}

/*追加*/

#static .sub-nav > p.sub-nav-memu:hover,
#static .sub-nav > ul.navi-open > li > p:hover,
#static .sub-nav > ul.navi-open > li > p > a:hover,
#static .sub-nav > ul.navi-open > li > p > a:active,
#static .sub-nav > ul.navi-open > li > p > a:focus,
#static .sub-nav > ul.navi-open > li.selected > p,
#static .sub-nav-child > li > .sub-nav__inr,
#static .sub-nav-grand-child > li > .sub-nav__inr,
#static .selected { 
	background: #000;
	opacity: 1;
}

#static .sub-nav > p.sub-nav-memu:hover,
#static .sub-nav > ul.navi-open > li > p:hover,
#static .sub-nav > ul.navi-open > li > p > a:hover,
#static .sub-nav > ul.navi-open > li > p > a:active,
#static .sub-nav > ul.navi-open > li > p > a:focus { 
	background: #000;
	opacity: 1;
	border-radius: 0 0 5px 5px;
}

#static .sub-nav > ul.navi-open > li.selected > ul.navi-open_inr > li.here,
#static .sub-nav > ul.navi-open > li.here > p:hover,
#static .sub-nav > ul.navi-open > li.here > p > a:hover
{
	background:#d9f5ed;
}

#static .sub-nav > ul.navi-open > li.selected > ul.navi-open_inr > li
{ 
	background: #f7f7f7;
	color: #000;
}

#static .sub-nav > ul.navi-open > li.here > p > a,
#static .sub-nav > ul.navi-open > li.selected > ul.navi-open_inr > li > a
{ 
	color: #000;
}

#static .sub-nav > ul.navi-open > li > p > a{
	color: #fff;
}

#static .sub-nav > ul.navi-open > li > p > a:hover,
#static .sub-nav > ul.navi-open > li.selected > ul.navi-open_inr > li > a:hover,
#static .sub-box ul.sub-nav-child li > a:hover
{ 
	opacity: .7;
}

#static .sub-box ul.navi-open li > p:before,
#static .sub-box ul.navi-open00 li > p:before,
#static .sub-box ul.sub-nav-child li > a:before{
	position: absolute;
	content: "";
	top: 11px;
	left: 20px;
	width: 4px;
	height: 1px;
	background: #999;
}

#static .sub-box p.sub-nav-memu:after{
	background: url("https://www.cosme.com/img/pc/arrow01_down_w.png") no-repeat ;
}

#static .sub-box p.sub-nav-memu.selected:after{
	background: url("https://www.cosme.com/img/pc/arrow01_up_w.png") no-repeat ;
}

#static .sub-box ul.navi-open li:not(:first-child) > p:after{
	background-image: url("https://www.cosme.com/img/pc/arrow_down_w.png");
}

#static .sub-box ul.navi-open li:not(:first-child).selected > p:after{
	background-image: url("https://www.cosme.com/img/pc/arrow_up_w.png");
}

#static .sub-nav > li.is-active > a.sub-nav__inrr,
#static .sub-nav > li > a.sub-nav__inr:hover,
#static .sub-nav > li > a.sub-nav__inr:active,
#static .sub-nav > li > a.sub-nav__inr:focus{
	color:#fff !important;
	background-color: #000 !important;
}

#static .sub-nav-child > li.is-current > .sub-nav__inr, .sub-nav-grand-child > li.is-current > .sub-nav__inr{
	color: #fff !important;
	background:#333 !important;
}

#static .sub-nav > li.is-current > .sub-nav__inr{
	background:#333;
	color: inherit;
	opacity: 1;
}

#static .sub-nav > li > a.sub-nav__inr:before{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggMjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDI2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLjMsMS43bDIzLDI0YzAuMiwwLjIsMC40LDAuMywwLjcsMC4zaDBjMC4zLDAsMC41LTAuMSwwLjctMC4zbDIzLTI0YzAuNC0wLjQsMC40LTEsMC0xLjQNCglDNDcuNSwwLjEsNDcuMiwwLDQ3LDBjLTAuMywwLTAuNSwwLjEtMC43LDAuM0wyNCwyMy42TDEuNywwLjNjLTAuNC0wLjQtMS0wLjQtMS40LDBDLTAuMSwwLjctMC4xLDEuMywwLjMsMS43eiIvPg0KPC9zdmc+DQo=);
}

#static .sub-nav > li > a.sub-nav__inr:hover:before,
#static .sub-nav > li > a.sub-nav__inr:focus:before{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggMjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDI2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLjMsMS43bDIzLDI0YzAuMiwwLjIsMC40LDAuMywwLjcsMC4zaDBjMC4zLDAsMC41LTAuMSwwLjctMC4zbDIzLTI0YzAuNC0wLjQsMC40LTEsMC0xLjQNCglDNDcuNSwwLjEsNDcuMiwwLDQ3LDBjLTAuMywwLTAuNSwwLjEtMC43LDAuM0wyNCwyMy42TDEuNywwLjNjLTAuNC0wLjQtMS0wLjQtMS40LDBDLTAuMSwwLjctMC4xLDEuMywwLjMsMS43eiIvPg0KPC9zdmc+DQo=);

}

#static .sub-nav > li.is-active > a.sub-nav__inr:before{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggMjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDI2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLjMsMS43bDIzLDI0YzAuMiwwLjIsMC40LDAuMywwLjcsMC4zaDBjMC4zLDAsMC41LTAuMSwwLjctMC4zbDIzLTI0YzAuNC0wLjQsMC40LTEsMC0xLjQNCglDNDcuNSwwLjEsNDcuMiwwLDQ3LDBjLTAuMywwLTAuNSwwLjEtMC43LDAuM0wyNCwyMy42TDEuNywwLjNjLTAuNC0wLjQtMS0wLjQtMS40LDBDLTAuMSwwLjctMC4xLDEuMywwLjMsMS43eiIvPg0KPC9zdmc+DQo=);
	transform: rotateX(180deg);
}

#static .sub-nav-child > li > a.sub-nav__inr:before{
	background-color: #333;
}
/*追加ここまで*/



h1{margin-bottom: 20px;}
.section{margin-bottom: 30px;}

/* static-ttl-page
-------------------------------------------- */
#static .static-ttl-page{float: left;width: 353px; margin-bottom: 20px; border: 1px solid #ccc;}
#static .static-wrap-ttl-page a{text-decoration: none;}
#static .static-wrap-ttl-page span{display: block;width: 100%;line-height: 3em;text-align: center;background: #000; color: #fff;}
#static .static-ttl-page-right{float: right;width: 353px; margin-bottom: 20px; border: 1px solid #ccc;}
#static .static-ttl-page img,#static .static-ttl-page-right img{width: calc(355px - 2px);}
.static-wrap-ttl-page:after,
.static-mini-image:after{display: block; clear: both; content: ""; height: 0.01px;}


/* static-image
-------------------------------------------- */
#static .static-main-image{margin-bottom: 20px;}

#static .static-mini-image > li{float: left;width: 216px;}
#static .static-mini-image > li:nth-child(2){margin:0 36px 20px 36px;}
#static .static-mini-image > li p{font-size:13px; text-align: center;}
#static .static-mini-image > li img{width: 216px;margin-bottom: 5px;border: solid 1px #ccc;}
#static .static-mini-image > li a{display: block;font-size: 11px;font-size: 1.1rem;text-decoration: none;}

#static .static-bottom-image{margin-bottom: 20px;}

/* brand-info
-------------------------------------------- */
#static .brand-info{display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
#static .brand-info .left-img{width: 230px;}
#static .brand-info .left-img img{width: 100%;}
#static .brand-info .right-txt{width: 490px; padding-left: 20px;}
#static .brand-info .right-txt p{margin-bottom: 10px;} 

/* clearfix
-------------------------------------------- */
.static-mini-image:after{display: block; clear: both; content: ""; height: 0.01px;}

/*best selles
-------------------------------------------- */
#static .bestselles {
	text-align: center;
	margin-bottom: 20px;
}