@charset "utf-8";

/*************************************************
CSS
/common/css/global.css

12.7.20
*************************************************/

/* ------------------------- TOC
 ------------------------- */

/* ============================================================ setting */
html { height: 100%; }
body { line-height: 1.4; height: 100%; -webkit-text-size-adjust: none; color: #666666; background: #ffffff; font-size: 16px; font-family: Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

a { color: #000000; }
/*
a:link,
a:visited { color: #666666; text-decoration: none; }
a:hover,
a:active { color: #171717; text-decoration: none; }
*/
a img, a:link img, a:visited img, a:hover img, a:active img { border: none; text-decoration: none; }

ul { list-style: none; }
ol { padding-left: 24px; }

.emphasis { color: #8C6446; }

/* ============================================================ header */
#header {
}

#header_inner {
	height: 98px;
	padding: 0 0px;
}

@media screen and (max-width: 680px) {
	#header_inner {
		height: 49px;
	}
}

#header .hd_logo {
	height: 86px;
	background-color: #e9e5e6;
	text-align: center;
	vertical-align: middle;
}

#header .hd_logo img{
	margin-top: 16px;
}

@media screen and (max-width: 680px) {
	#header .hd_logo {
		height: 43px;
	}

	#header .hd_logo img{
		width: 111px;
		height: auto;
		margin-top: 8px;
	}
}

#header .hd_logo a {
	display: block;
	height: 86px;
}

@media screen and (max-width: 680px) {
	#header .hd_logo a {
	}
}

#header .hd_menu {
	float: right;
	width: 86px;
}

#header .hd_menu img{
	width: 100%;
	border-radius: 3px;
}

@media screen and (max-width: 680px) {
	#header .hd_menu{
		width: 41px;
	}
}

#header .hd_menu a { 
}

#hd_gnav{
	float: right;
	margin-top: 2px;
}


/* ============================================================ modal */
#modal {
	font-size: 12px;
	display: none;
	padding-top: 8px;
	width: 98%;
	margin: 0 0 0 1%;
	position: absolute;
	top: 98px;
	z-index: 100;
}

@media screen and (max-width: 680px) {
	#modal {
		top: 49px;
	}
}

#modal_inner { padding: 8px; background: url(../img/bg_modal.png) 0 0 repeat;
border-radius: 4px;
-webkit-border-radius: 4px;
}

#modal .close { position: relative; text-align: right; }
#modal .close span.arrow { top: -15px; right: 25px; width: 8px; height: 7px; position: absolute; background: url(../img/bg_modal_arrow.png) 0 0 no-repeat;
background-size: 8px 7px;
-webkit-background-size: 8px 7px;
}
#modal .close a { color: #ffffff; }

#modal .menu { margin-top: 4px; padding: 4px 0 8px 0; background: #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
}
#modal .menu .mnav a { display: block; border-bottom: 1px solid #969696; padding: 10px 10% 10px 18px; background: url(../img/bullet_link_01.png) 95% 50% no-repeat;
background-size: 8px 8px;
-webkit-background-size: 8px 8px;
}

#modal .menu .snav { padding-top: 10px;
opacity: 0.60;
}
#modal .menu .snav li { display: inline-block; width: 50%; }
#modal .menu .snav a { padding: 10px 10px 10px 30px; background: url(../img/bullet_link_01.png) 18px 50% no-repeat; display: block;
background-size: 8px 8px;
-webkit-background-size: 8px 8px;
}




/* ============================================================ contents */


/* ============================================================ main_contents */


/* ============================================================ nav_products */
#nav_products { margin-top: 40px; border-top: 1px solid #dfd8d6; }
#nav_products_inner { padding: 0 15px; margin-top: 15px; }
#nav_products_inner ul li { background: #efeceb; }
#nav_products_inner ul li a { display: block; padding: 15px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ddd4ce;
background: url(../img/nav_products_link.png) 100% 50% no-repeat;
background-size: 36px 70px;
-webkit-background-size: 36px 70px;
}
#nav_products_inner > ul > li:first-of-type,
#nav_products_inner > ul > li:first-of-type a {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}

#nav_products_inner > ul > li:last-of-type,
#nav_products_inner > ul > li:last-of-type a {
border-radius:  0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-bottom: none;
}

#nav_products_inner ul li.open .snav { display: block; }
#nav_products_inner ul li.close .snav { display: none; }

#nav_products_inner ul li.open a {
background: #efeceb url(../img/nav_products_open.png) 100% 50% no-repeat;
background-size: 36px 70px;
-webkit-background-size: 36px 70px;
}
#nav_products_inner ul li.close a {
background: #efeceb url(../img/nav_products_close.png) 100% 50% no-repeat;
background-size: 36px 70px;
-webkit-background-size: 36px 70px;
}

#nav_products_inner ul li .snav { opacity: 0.7; }
#nav_products_inner ul li .snav ul { display: table; width: 100%; background: #f0f0f0; }
#nav_products_inner ul li .snav li { display: table-cell; width: 50%; font-size: 12px; }
#nav_products_inner ul li .snav li a { border: none; padding-left: 30px; background: url(../img/bullet_link_01.png) 15px 50% no-repeat;
background-size: 8px 8px;
-webkit-background-size: 8px 8px;
}
#nav_products_inner ul li.nav_basemake .snav li { display: block; width: 100%; }

/* nav current */
body.eyeshadow #nav_products_inner ul .snav li.nav_eyeshadow a,
body.eyes #nav_products_inner ul .snav li.nav_eyes a,
body.face #nav_products_inner ul .snav li.nav_face a,
body.lips #nav_products_inner ul .snav li.nav_lips a,
body.nails #nav_products_inner ul .snav li.nav_nails a,
body.others #nav_products_inner ul .snav li.nav_others a,
body.others #nav_products_inner ul .snav li.nav_others a,
body.basic #nav_products_inner ul .snav li.nav_basic a,
body.option #nav_products_inner ul .snav li.nav_option a,
body.skincare #nav_products_inner ul li.nav_skincare a { color: #666666; }