@charset "utf-8";

/*-----
 * Default Layout
 */
* {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
}
body {
	min-width: 980px;
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%; /* 10px */
	-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 160%;
	line-height: 120%;
}
p, dt, dd, li, th, td {
	font-size: 140%;
}
li li {
	font-size: 100%;
}
img {
	border: none;
	vertical-align: bottom;
}
sup {
	vertical-align: top;
}
sub {
	vertical-align: baseline;
}
option {
	padding-right: 1em;
}
::selection {
	background-color: #f9d8e6;
}
img::selection {
	background-color: transparent;
}

/*
 * 共通
 */
/* 折り返し無し */
span.nw {
	display: inline-block;
	white-space: nowrap;
}
/* PC非表示 */
.pc-none {
	display: none;
}

/*
 * ヘッダー
 */
#header {
	position: absolute;
	z-index: 100;
	top: -58px;
	left: 0;
	width: 100%;
	min-width: 980px;
	height: 89px;
	margin-top: 58px;
	background-color: #fdeff5;
	box-shadow: 0 1px 5px 0 rgba(94,24,37,0.2);
}
#header .inner {
	width: 940px;
	margin: 0 auto;
	padding: 0;
}
#header ul {
	list-style: none;
}
#logo {
	float: left;
}
#logo a {
	overflow: hidden;
	display: block;
	width: 180px;
	height: 89px;
	background: url(../img/c_logo.png) no-repeat 0 0;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
/* ナビゲーション */
#nav {
	float: right;
}
#nav h2 {
	display: none;
}
#nav li a {
	overflow: hidden;
	display: block;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
#nav > ul {
	padding-right: 16px;
}
#nav > ul > li {
	float: left;
	position: relative;
	margin: 0 8px;
}
#nav > ul > li > a {
	height: 58px;
	margin: 18px 0 13px;
	background: url(../img/c_nav.png) no-repeat 0 50%;
}
#nav > ul > li > a:hover {
	opacity: 0.7;
}
#nav #nav-pri > a {
	width: 162px;
}
#nav #nav-pro > a {
	width: 143px;
	background-position: -178px 50%;
}
#nav #nav-app > a {
	width: 89px;
	background-position: -337px 50%;
}
#nav #nav-pro ul {
	overflow: hidden;
	display: none;
	position: absolute;
	left: -7px;
	width: 157px;
	background-color: #fdeff5;
}
#nav #nav-pro ul:before {
	position: absolute;
	top: -10px;
	width: 100%;
	height: 10px;
	box-shadow: 0 1px 5px 0 rgba(94,24,37,0.2);
	content: "";
}
#nav #nav-pro:hover ul {
	display: block;
}
#nav #nav-pro li {
	border-top: 1px solid #ffe0ed;
}
#nav #nav-pro li:first-child {
	border-color: transparent;
}
#nav #nav-pro li a {
	height: 36px;
	background: url(../img/c_nav_pro.png) no-repeat 0 -1px;
}
#nav #nav-pro li a:hover {
	background-color: #ffc2dc;
}
#nav #nav-pro #nav-pro-cho a {
	background-position: 0 0;
}
#nav #nav-pro #nav-pro-pur a {
	background-position: 0 -38px;
}
#nav #nav-pro #nav-pro-rj a {
	background-position: 0 -75px;
}
#nav #nav-pro #nav-pro-glu a {
	background-position: 0 -112px;
}
#nav #nav-pro #nav-pro-gym a {
	background-position: 0 -149px;
}
#nav #nav-pro #nav-pro-pro a {
	background-position: 0 -186px;
}
#nav #nav-pro #nav-pro-ben a {
	background-position: 0 -223px;
}
/* clearfix */
#header .inner:after,
#nav ul:after {
	display: block;
	clear: both;
	content: "";
}
/* ヘッダー固定 */
#header.fixed {
	position: fixed;
	top: 0;
	height: 58px;
	margin-top: 0;
	background-color: #fff;
	transition: top 0.3s ease;
}
#header.fixed #logo a {
	width: 112px;
	height: 58px;
	background-position: 0 100%;
}
#header.fixed #nav > ul > li > a {
	margin: 0;
}

/*
 * コンテンツ
 */
.contents .inner {
	width: 940px;
	margin: 0 auto;
	padding: 0;
}
.contents section {
	min-width: 940px;
}
.contents h2 {
	width: 940px;
	margin: 0 auto;
}
.contents p {
	line-height: 165%;
}
.contents ul {
	list-style: none;
	overflow: hidden;
}
.contents li {
	padding-left: 8px;
	background: url(../img/bullet.png) no-repeat 0 8px;
	line-height: 140%;
}

/*
 * コンテンツフッター
 */
#cont-footer {
	min-width: 980px;
	background: url(../img/c_footer_bg.gif) repeat 50% 0;
}
#cont-footer .inner {
	width: 940px;
	margin: 0 auto;
	padding: 0;
}
#pagetop {
	padding-right: 41px;
	line-height: 0;
	text-align: right;
}
#pagetop a {
	overflow: hidden;
	display: inline-block;
	width: 145px;
	height: 116px;
	background: url(../img/c_btn_pagetop.gif) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
}

/*
 * 資生堂フッター
 */
#footer {
	position: absolute;
	z-index: 99;
	width: 100%;
	min-width: 980px;
}

/*
 * 外部タグ
 */
#analyze,
img[src*="doubleclick.net/"] {
	overflow: hidden;
	position: absolute;
	z-index: -1;
	height: 0;
	bottom: 0;
}
/* Default Layout */


/*-----
 *  Mobile Layout: 480px, 320px
 */
@media screen and (max-width:767px) {
	html {
		overflow-y: visible;
	}
	body {
		min-width: inherit;
	}
	
	/*
	 * 共通
	 */
	/* PC非表示 */
	.pc-none {
		display: block;
	}
	br.pc-none {
		display: inline;
	}
	/* スマホ非表示 */
	.sp-none {
		display: none;
	}
	
	/*
	 * ヘッダー
	 */
	#header {
		position: fixed;
		top: 0;
		min-width: inherit;
		height: 50px !important;
		margin-top: 0;
		background-color: #fff;
	}
	#header .inner {
		width: 100%;
	}
	#logo {
		float: none;
	}
	#logo a {
		width: 116px !important;
		height: 50px !important;
		background-image: url(../img/sp_c_logo.png);
		background-size: contain;
	}
	/* ナビゲーション */
	#nav {
		float: none;
	}
	#nav h2 {
		overflow: hidden;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 55px;
		height: 50px;
		background: url(../img/sp_c_btn_menu.png) no-repeat 0 0;
		background-size: 55px auto;
		text-indent: 100%;
		white-space: nowrap;
		cursor: pointer;
	}
	#nav.open h2 {
		background-position: 0 100%;
	}
	#nav > ul {
		display: none;
		padding: 0;
		background-color: #fff;
	}
	#nav.open > ul {
		overflow: hidden;
		display: block;
		position: relative;
	}
	#nav.open > ul:before {
		position: absolute;
		top: -10px;
		width: 100%;
		height: 10px;
		box-shadow: 0 1px 5px 0 rgba(94,24,37,0.2);
		content: "";
	}
	#nav > ul > li {
		float: none;
		margin: 0;
		border-bottom: 1px solid #e5e5e5;
	}
	#nav > ul > li > a {
		width: 100% !important;
		height: 44px;
		margin: 0;
		background-image: url(../img/sp_c_nav.png);
		background-size: 320px auto;
	}
	#nav > ul > li > a:hover {
		opacity: 1;
	}
	#nav #nav-pri > a {
		background-position: 50% 0;
	}
	#nav #nav-pro > a {
		background-position: 50% -45px;
	}
	#nav #nav-app > a {
		background-position: 50% -90px;
	}
	#nav #nav-pro ul {
		display: none !important;
	}
	/* ヘッダー固定 */
	#header.fixed {
		transition: none;
	}
	
	/*
	 * コンテンツ
	 */
	.contents .inner {
		width: auto;
	}
	.contents section {
		min-width: inherit;
	}
	.contents h2 {
		width: 100%;
	}
	.contents p {
		line-height: 180%;
	}
	.contents li {
		padding-left: 6px;
		background: url(../img/sp_bullet.png) no-repeat 0 6px;
		background-size: 2px auto;
	}
	
	/*
	 * コンテンツフッター
	 */
	#cont-footer {
		min-width: inherit;
		background-image: url(../img/sp_c_footer_bg.gif);
		background-position: 100% 0;
		background-size: auto 58px;
	}
	#cont-footer .inner {
		width: auto;
	}
	#pagetop {
		padding-right: 28px;
	}
	#pagetop a {
		width: 72px;
		height: 51px;
		background-image: url(../img/sp_c_btn_pagetop.gif);
		background-size: contain;
	}
	
	/*
	 * 資生堂フッター
	 */
	#footer {
		min-width: inherit;
	}
} /* Mobile Layout */


/*-----
 *  Print
 */
@media print {
	html {
		overflow-y: visible;
	}
}
