@charset "utf-8";

/*-----
 * Default Layout
 */
* {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
}
body {
	min-width: 980px;
	color: #000;
	font-family: "kozuka-mincho-pro", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 62.5%; /* 10px */
	font-weight: 500;
	-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%;
}
img {
	border: none;
	vertical-align: bottom;
}
sub {
	vertical-align: baseline;
}
option {
	padding-right: 1em;
}
::selection {
	background-color: #bfe2d9;
}
img::selection {
	background-color: transparent;
}

/*
 * 共通
 */
/* 大文字表示 */
.upper {
	text-transform: uppercase;
}
/* 折り返し無し */
span.nw {
	display: inline-block;
	white-space: nowrap;
}
/* PC非表示 */
.pc-none {
	display: none;
}

/*
 * ヘッダー
 */
#header {
	position: fixed;
	z-index: 100;
	top: -44px;
	width: 100%;
	min-width: 980px;
	height: 44px;
	margin-top: 44px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#header.fixed {
	top: 0;
	margin-top: 0;
	transition: top 0.3s ease;
}
#header .inner {
	position: relative;
	width: 940px;
	height: inherit;
	margin: 0 auto;
	padding: 0;
}
#header .inner:after {
	display: block;
	clear: both;
	content: "";
}
#header ul {
	list-style: none;
}
#logo {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 141px;
	height: 80px;
}
#logo a {
	overflow: hidden;
	display: block;
	width: inherit;
	height: inherit;
	background: url(../img/c_logo.png) no-repeat 0 0;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
/* ナビゲーション */
#nav {
	text-align: center;
}
#nav h2 {
	display: none;
}
#nav ul {
	overflow: hidden;
	display: inline-block;
}
#nav li {
	float: left;
	margin: 6px 5px 0;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.5px;
}
#nav li a {
	display: block;
	padding: 10px 6px;
	color: #00215b;
	text-decoration: none;
}
#nav li a:hover {
	text-decoration: underline;
}
/* トップ用ヘッダー */
#header.top {
	position: absolute;
}
#header.top #logo {
	height: 217px;
}
#header.top #logo a {
	background-position: 0 100%;
}

/*
 * コンテンツ
 */
.mincho {
	font-family: "kozuka-mincho-pro", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.gothic {
	font-family: "kozuka-gothic-pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.contents .inner {
	width: 940px;
	margin: 0 auto;
	padding: 74px 0 0;
}
.contents h2 {
	color: #00215b;
	font-size: 500%;
	font-weight: 700;
	text-align: center;
	letter-spacing: 1.5px;
}
.contents h2 span.b {
	display: inline-block;
	padding: 0 0.4em 8px;
	border-bottom: 2px solid #00215b;
}
.contents h2 small {
	line-height: 100%;
}
.contents h3 {
	color: #00215b;
	font-weight: 700;
}
.contents p,
.contents dt,
.contents dd,
.contents li,
.contents th,
.contents td {
	line-height: 160%;
	letter-spacing: 0.5px;
}
.contents p.lead {
	color: #00215b;
	font-size: 220%;
	font-weight: 700;
	text-align: center;
}
.contents figcaption {
	font-family: "kozuka-gothic-pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* 白半透明 */
.contents .mat {
	margin-bottom: 60px;
	border-radius: 20px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.9);
}
/* オンラインショップボタン */
.contents a.btn-shop,
.contents a.btn-rp {
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #008a66;
	background: #fff url(../img/c_icon_cart.png) no-repeat 0 0;
	color: #008a66 !important;
	font-family: "kozuka-mincho-pro", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "MS PMincho", serif;
	line-height: 100%;
	text-decoration: none;
}
.contents a.btn-rp {
	background-image: url(../img/c_icon_rp.png);
}
.contents a.btn-shop:hover,
.contents a.btn-rp:hover {
	border-color: #fff;
	background-color: #008a66;
	color: #fff !important;
}
/*
 * オンラインショップへ
 */
#online-shop {
	min-width: 980px;
	position: relative;
}
#online-shop .bg{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
    background-image: linear-gradient(#000, #8e8e8e);
    mix-blend-mode: multiply;
	background-size: cover;
	opacity: .4;
	
}
#online-shop .inner {
	overflow: hidden;
	padding: 50px 0 95px;
}
#online-shop h2 {
	margin-bottom: 56px;
	color: #fff;
	font-size: 280%;
	font-weight: 500;
	line-height: 160%;
	text-align: left;
	text-shadow: 0 2px 7px #000;
}
/*フレックス*/
#online-shop .os-wrap{
	display: flex;
	justify-content: center;
	align-items: end;
	gap:70px;
	padding-right: 60px;
}
#online-shop ul,
#online-shop li {
  margin: 0;
  padding: 0;
}
#online-shop ul {
  list-style: none;
}
#online-shop .os-image{
	display: flex;
	justify-content: flex-start;
	gap:30px;
	align-items: baseline;
}

#online-shop .os-image img{
	max-width: 100%;
}

#online-shop .os-image li:nth-of-type(1){
	width: 136px;
}

/*リンク*/
#online-shop .link {
	overflow: hidden;
	padding: 10px 0 30px 0;
	text-align: center;
}
#online-shop .link ul {
	list-style: none;
	overflow: hidden;
	display: inline-block;
}
#online-shop .link li {
	width: 196px;
	margin: 0 10px;
	font-size: 140%;
	text-align: left;
	letter-spacing: -0.5px;
	white-space: nowrap;
}
#online-shop .link li:not(:last-child){
	margin-bottom: 20px;
}
#online-shop .link li a {
	padding: 15px 0 15px 52px;
	border-radius: 10px;
	background-position: 17px -192px;
	text-shadow: none;
	letter-spacing: 0;
}
#online-shop .link li a:hover {
	background-position: -283px -192px;
}
#online-shop .link li a.btn-rp {
	background-position: 10px -190px;
}
#online-shop .link li a.btn-rp:hover {
	background-position: -290px -190px;
}
/* 停止中 */
#online-shop .link li .suspended {
	display: block;
	position: relative;
	pointer-events: none;
}
#online-shop .link li .suspended-cover {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0 0 0 0.3em;
	border: 1px solid rgba(106,106,106,0.8);
	border-radius: 10px;
	background-color: rgba(211,211,211,0.8);
	color: #383838;
	font-size: 13px;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.3em;
}
#online-shop .link li .suspended-note {
	display: block;
	margin-bottom: 10px;
	color: #fff;
	font-size: 13px;
	text-align: center;
	letter-spacing: 0.08em;
}
/* 停止中のみの設定 
#online-shop .inner {
	padding-bottom: 8px;
}*/

/*
 * コンテンツフッター
 */
#cont-footer {
	position: relative;
	z-index: 10;
	background-color: #fff;
}
#cont-footer .inner {
	overflow: hidden;
	position: relative;
	width: 213px;
	margin: 0 auto;
	padding: 50px 0;
}
#cont-footer a {
	overflow: hidden;
	display: block;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
/* SNS */
#cont-footer .sns {
	list-style: none;
	overflow: hidden;
	float: left;
	padding: 2px 14px 0 0;
}
#cont-footer .sns li {
	float: left;
	margin-right: 10px;
}
#cont-footer .sns li.sns-line {
	display: none;
}
#cont-footer .sns li a {
	width: 46px;
	height: 46px;
	background: url(../img/c_icon_sns.png) no-repeat 0 0;
}
#cont-footer .sns li.sns-fb a {
	background-position: 100% 0;
}
#cont-footer .sns li a:hover {
	opacity: 0.8;
}
#cont-footer #pagetop {
	float: left;
	border: 1px solid #008a66;
	border-top: none;
	border-bottom: none;
}
#cont-footer #pagetop a {
	width: 85px;
	height: 56px;
	background: url(../img/c_btn_pagetop.png) no-repeat 0 0;
}
#cont-footer #pagetop a:hover {
	opacity: 0.8;
}

/*
 * 資生堂フッター
 */
#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;
	}
	span.pc-none,
	br.pc-none {
		display: inline;
	}
	/* スマホ非表示 */
	.sp-none {
		display: none;
	}
	
	/*
	 * ヘッダー
	 */
	#header {
		top: -40px;
		min-width: inherit;
		height: 40px;
		margin-top: 40px;
		background-color: #fff;
	}
	#header .inner {
		width: 100%;
	}
	#logo {
		left: 10px;
		width: 70px;
		height: 40px;
	}
	#logo a {
		background-image: url(../img/sp_c_logo.png);
		background-size: 70px auto;
	}
	/* ナビゲーション */
	#nav {
		text-align: left;
	}
	#nav h2 {
		overflow: hidden;
		display: block;
		position: absolute;
		top: 0;
		right: 10px;
		width: 45px;
		height: 40px;
		background: url(../img/sp_c_btn_menu.png) no-repeat 0 0;
		background-size: 45px auto;
		text-indent: 100%;
		white-space: nowrap;
		cursor: pointer;
	}
	#nav.open h2 {
		background-position: 0 100%;
	}
	#nav ul {
		display: none;
		position: absolute;
		top: 40px;
		left: 0;
		width: 100%;
		padding: 0;
		background-color: #fff;
	}
	#nav.open ul {
		display: block;
		border-top: 1px solid #008a66;
	}
	#nav li {
		float: none;
		margin: 0;
		border-bottom: 1px solid #008a66;
		font-size: 14px;
		text-align: center;
	}
	#nav li a {
		padding: 12px 0;
		color: #008a66 !important;
	}
	/* トップ用ヘッダー */
	#header.top #logo {
		height: 101px;
	}
	
	/*
	 * コンテンツ
	 */
	.contents .inner {
		width: auto;
	}
	.contents h2 {
		font-size: 28px;
	}
	.contents h2 span.b {
		padding: 0 0 6px !important;
	}
	/* 白半透明 */
	.contents .mat {
		margin-bottom: 0;
		border-radius: 0;
		background-color: #fff;
	}
	/* オンラインショップボタン */
	.contents a.btn-shop,
	.contents a.btn-rp {
		border-color: #008a66 !important;
		background-color: #fff !important;
		background-image: url(../img/sp_c_icon_cart.png);
	}
	.contents a.btn-rp {
		background-image: url(../img/sp_c_icon_rp.png);
	}
	/*
	 * オンラインショップへ
	 */
	#online-shop {
		min-width: inherit;
		background: #008a66 url(../img/sp_os_bg.jpg) no-repeat 50% 0 / cover;
		background-size: 375px auto;
	}
	#online-shop .bg{
		display: none;
	}
	#online-shop .inner {
		position: relative;
		width: 320px;
		padding: 60px 0 20px;
	}
	#online-shop h2 {
		margin: 0 0 30px 0;
		font-size: 13px;
		line-height: 170%;
		text-align: center;
	}
	/*フレックス*/
	#online-shop .os-wrap{
		gap:70px;
		padding-right: 0;
	}
	#online-shop .os-image{
		display: none;
	}

	/*リンク*/
	#online-shop .link {
		padding: 0;
		display: flex;
		flex-direction: column-reverse;
	}
	#online-shop .link li {
		float: none;
		width: auto;
		margin: 0;
		background: none;
		font-size: 15px;
		padding-left: 68px;
	}
	#online-shop .link li:nth-of-type(1){
		background: url(../img/pro_intro_drink.png) no-repeat 0 50% / 41px;
		padding-top: 10px;
	}
	#online-shop .link li:nth-of-type(2){
		background: url(../img/os_tablet.png) no-repeat 4px 50% / 37px;
		padding-top: 42px;
		margin-bottom: 15px;
	}
	#online-shop .link li a {
		width: 207px;
		margin: 0;
		padding: 15px 0 15px 52px;
		background-position: 15px 10px !important;
		background-size: 27px auto;
		color: #008a66 !important;
	}
	#online-shop li a.btn-rp {
		background-position: 11px 12px !important;
		background-size: 36px auto;
	}
	/* 停止中 */
	#online-shop li .suspended-cover {
		font-size: 14px;
	}
	#online-shop li .suspended-note {
		margin-top: 6px;
		padding-right: 6px;
		font-size: 9.5px;
		line-height: 100%;
		text-align: right;
		letter-spacing: 0.05em;
	}
	/* 停止中のみの設定 */
	#online-shop .inner {
		padding-bottom: 20px;
	}
	
	/*
	 * コンテンツフッター
	 */
	#cont-footer .inner {
		width: 207px;
		padding: 30px 0 0;
	}
	/* SNS */
	#cont-footer .sns {
		float: none;
		width: 195px;
		margin: 0 auto;
		padding: 0 0 10px 12px;
	}
	#cont-footer .sns li {
		margin-right: 12px;
	}
	#cont-footer .sns li.sns-line {
		display: block;
	}
	#cont-footer .sns li a {
		width: 53px;
		height: 53px;
		background-image: url(../img/sp_c_icon_sns.png);
		background-size: auto 53px;
	}
	#cont-footer .sns li.sns-tw a {
		background-position: -65px 0;
	}
	#cont-footer #pagetop {
		float: none;
		border: none;
	}
	#cont-footer #pagetop a {
		width: 100%;
		height: 60px;
		background: url(../img/sp_c_btn_pagetop.png) no-repeat 50% 50%;
		background-size: 47px auto;
	}
	
	/*
	 * 資生堂フッター
	 */
	#footer {
		min-width: inherit;
	}
} /* Mobile Layout */


/*-----
 *  Print
 */
@media print {
	html {
		overflow-y: visible;
	}
}