@charset "utf-8";
/* CSS Document */



/* @import url(common_pc.css);
@import url(common_sp.css) only screen and (max-width: 760px); */



/** =======================================================
	for PC
=========================================================== **/



	/* ----------------------------------------------------
		Slideshow Block
	------------------------------------------------------- */



	#slideBlock {
		display			: block;
		position		: relative;
		width			: auto;
		margin: 0 0 40px 20px;
		padding			: 0;
	}
	#slideBlock:before {
		content			: "";
    	display			: block;
		margin			: 0;
		padding			: 56.25% 0 0 0;
	}



	#slideBlock ul,
	#slideBlock ul li {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#slideBlock img {
		width			: auto;
		max-width		: 100%;
		vertical-align	: bottom;
	}



	#slideBlock .feeder {
	    position		: absolute;
	    top				: 0;
	    left			: 0;
	    bottom			: 0;
	    right			: 0;
	}

	#slideBlock .feeder .images {
		display			: block;
	    position		: relative;
		width			: 100%;
		height			: 100%;
		margin			: 0;
		padding			: 0;
		overflow		: hidden;
	}

	#slideBlock .feeder .images ul li {
/*		display			: none;  */
	    position		: absolute;
		top				: 0;
		left			: 0;
		width			: 100%;
		height			: 100%;
		opacity			: 0;
	}

	#slideBlock .feeder .frame {
		display			: block;
	    position		: absolute;
		top				: 0;
		left			: 0;
		width			: 100%;
		height			: 100%;
		z-index			: 3;
	}



/* ---------------------------------------------------------
	carousel block
------------------------------------------------------------ */



	#carouselBlock {
		display			: block;
		position		: relative;
		padding: 0 20px 20px;
		background-color	: #ffffff;
		zoom			: 1;
	}
	#carouselBlock:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



	#carouselBlock ul,
	#carouselBlock ul li,
	#carouselBlock dl,
	#carouselBlock dl dt,
	#carouselBlock dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#carouselBlock a         { color:#231815; text-decoration:none; }
	#carouselBlock a:visited { color:#333333; text-decoration:none; }
	#carouselBlock a:hover   { color:#231815; text-decoration:none; }

	#carouselBlock img {
		width			: auto;
		max-width		: 100%;
		height			: auto;
		vertical-align	: bottom;
	}



	/* Slider ---------------------------------------------- */


	#carouselBlock .slideshow {
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
	}

	#carouselBlock .slideshow ul {
		display			: block;
		position		: relative;
		zoom			: 1;
	}
	#carouselBlock .slideshow ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#carouselBlock .slideshow ul li {
		display			: block;
		position		: relative;
	}



	#carouselBlock .slideshow .slider {
		display			: block;
		position		: relative;
		overflow		: hidden;
		margin			: 0 20px;
	}

	#carouselBlock .slideshow .slider ul {
		width			: 666.6%;
	}

	#carouselBlock .slideshow .slider ul li {
		display			: block;
		position		: relative;
		width			: 5%;
		float			: left;
	}

	#carouselBlock .slideshow .slider ul li dl {
	}

	#carouselBlock .slideshow .slider ul li dl dt {
		margin			: 0 15px;
	}

	#carouselBlock .slideshow .slider ul li dl dt img {
	}

	#carouselBlock .slideshow .slider ul li dl dd {
		margin			: 15px 15px 0;
		min-height			: 6em;
		line-height		: 1.5em;
		overflow		: hidden;
	}



	#carouselBlock .slideshow .pointer {
		display			: block;
		position		: relative;
		margin			: 20px 5% 0;
		padding			: 0;
		overflow		: hidden;
	}

	#carouselBlock .slideshow .pointer ul {
		position		: relative;
		float			: left;
		left			: 50%;
		zoom			: 1;
	}
	#carouselBlock .slideshow .slider ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#carouselBlock .slideshow .pointer ul li {
		float			: left;
		left			: -50%;
		margin			: 0 5px;
	}

	#carouselBlock .slideshow .pointer ul li a {
		display			: block;
		width			: 8px;
		height			: 8px;
		text-align		: center;
		cursor			: pointer;
		font-size		: 1pt;
		border-radius	: 4px;
		background		: #c0c0c0;
		text-indent		: -9999px;
		overflow		: hidden;
	}

	#carouselBlock .slideshow .pointer ul li.sel a {
		background		: #b7183f;
	}



	#carouselBlock .slideshow .direction p {
		display			: block;
		position		: absolute;
		top				: 40%;
		margin			: -70px 0 0 0;
		padding			: 0;
		cursor			: pointer;
	}
	#carouselBlock .slideshow .direction p.prev {  left :0; }
	#carouselBlock .slideshow .direction p.next {  right:0; }

	#carouselBlock .slideshow .direction p a {
		display			: block;
		width			: 20px;
		height			: 80px;
		text-align		: left;
		text-indent		: -9999px;
		overflow		: hidden;
		background-position	: center center;
		background-repeat	: no-repeat;
		background-color	: #f0f0f0;
	}
	#carouselBlock .slideshow .direction p.prev a { background-image:url(../../styles2017/img/menu/left_b.png);  }
	#carouselBlock .slideshow .direction p.next a { background-image:url(../../styles2017/img/menu/right_b.png); }



/* ---------------------------------------------------------
	Perpose Menu Tiles Block
------------------------------------------------------------ */



	#perposeBlock {
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
		zoom			: 1;
	}
	#perposeBlock:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#perposeBlock h2{
		font-size: 32px;
		color: #b7183f;
		text-align: center;
		margin: 0 auto;
		padding: 40px 0 15px;
		font-family: "Bookman Old Style","Yu Mincho", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight:normal;
		position:relative;
		display: block;
	}

	#perposeBlock ul,
	#perposeBlock ul li,
	#perposeBlock dl,
	#perposeBlock dl dt,
	#perposeBlock dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#perposeBlock img {
		width			: auto;
		max-width		: 100%;
		vertical-align	: bottom;
	}

	#perposeBlock a,
	#perposeBlock a:visited   { color:#231815; text-decoration:none; }
	#perposeBlock a:hover     { color:#b7183f; text-decoration:none; }

	#perposeBlock a img       {opacity:0.6;transition:0.5s;border-bottom:1px solid #eaeaea;width: 100%;}
	#perposeBlock a:hover img { opacity:1; }



	#perposeBlock > nav {
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
		zoom			: 1;
		width			:900px;
		margin			: 0 auto;
	}
	#perposeBlock > nav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#perposeBlock > nav ul {
		display			: block;
		position		: relative;
		letter-spacing	: -0.5em;
		padding-left:0;
		padding-bottom:1.5rem;
	}

	#perposeBlock > nav ul li {
		display			: inline-block;
		position		: relative;
		vertical-align	: top;
		width			: 20%;
		letter-spacing	: normal;
	}

	#perposeBlock > nav ul li span {
		display			: block;
		font-size		: 8pt;
	}

	#perposeBlock > nav ul li dl {
		display				: block;
		position			: relative;
		margin:5px;
		background			: #ffffff;
		border:1px solid #eaeaea;
	}

	#perposeBlock > nav ul li dl dd {
		display			: block;
		line-height		: 1.3;
		display:flex;
		justify-content:left;
		align-items:center;
		font-size: 15px;
		min-height: 80px;
		padding:.5rem;
	}
	[lang="ja"] #perposeBlock > nav ul li dl dd {
		font-family		: "游明朝","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-size: 13px;
		}
	[lang="en-US"] #perposeBlock > nav ul li dl dd ,
	[lang="vi"] #perposeBlock > nav ul li dl dd ,
	[lang="vi"] #perposeBlock > nav ul li dl dd {
		font-size: 11px;
	}
	[lang="zh-CN"] #perposeBlock > nav ul li dl dd {
		font-size:13px;
	}











	#perposeBlock > nav ul li span {
		color			: #ababab;
		font-size		: 13px;
		font-family		: "Bookman Old Style","Yu Mincho", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-style      : italic;
	}



	/* ----------------------------------------------------
		Banner Block
	------------------------------------------------------- */



	#bannersBlock {
		display		: block;
		position	: relative;
		padding: 0 0 40px 0;
		background: #fff3f6;
	}

	#bannersBlock h2{
		font-size: 32px;
		color: #b7183f;
		text-align: center;
		margin: 0 auto;
		padding: 20px 0 10px;
		font-family: "Bookman Old Style","Yu Mincho", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight:normal;
		position:relative;
		display: block;
	}

	#bannersBlock a           { color:#231815; text-decoration:none;      }
	#bannersBlock a:hover     { color:#b7183f; text-decoration:underline; }
	#bannersBlock a:hover img { opacity:0.9; }

	#bannersBlock ul,
	#bannersBlock ul li,
	#bannersBlock dl,
	#bannersBlock dl dt,
	#bannersBlock dl dd {
		margin		: 0;
		padding		: 0;
		list-style-type	: none;
	}

	#bannersBlock img {
		width			: auto;
		max-width		: 100%;
		vertical-align	: bottom;
	}



	#bannersBlock ul {
		letter-spacing		: -0.5em;
		width: 900px;
		margin: 0 auto;
	}

	#bannersBlock ul li {
		display				: inline-block;
		vertical-align		: top;
		position			: relative;
		width: 33.33%;
		padding				: 0;
		letter-spacing		: normal;
	}

	#bannersBlock ul li dl {
		margin				: 10px 0 0 10px;
		padding				: 0 0 10px;
		background			: #ffffff;
		border:1px solid #eaeaea;
		box-sizing: border-box;
	}

	#bannersBlock ul li dl dt {
		border-bottom	: 1px solid #eaeaea;
		font-size:0;
		overflow: hidden;
	}
	#bannersBlock ul li.block3 dl dt {
		height: 162px;
	}
	html[lang="en-US"] #bannersBlock ul li dl dt ,
	html[lang="vi"] #bannersBlock ul li dl dt ,
	html[lang="vi"] #bannersBlock ul li dl dt ,
	html[lang="zh-cn"] #bannersBlock ul li dl dt {
	}
	#bannersBlock ul li dl dt img{
		width:100%;
	}
	#bannersBlock ul li dl dd {
		height				: 3em;
		line-height			: 1.5em;
		overflow			: hidden;
		margin				: 10px 10px 0;
		padding				: 0;
	}



	/* 3lines */
	#bannersBlock ul.block3 li {
		width			: 33.33%;
	}

	#bannersBlock ul.block3 li dl dd {
		height				: 4.5em;
	}


	/* 4lines */
	#bannersBlock ul.block4 li {
		width			: 25%;
	}

	#bannersBlock ul.block4 li dl dd {
		height				: 6em;
	}




	/* 2017.11.16change */
	#bannersBlock ul li.block3       { width  : 33.33%; }
	#bannersBlock ul li.block3 dl dd { height : 4.5em;  }

	#bannersBlock ul li.block4       { width  : 25%;    }
	#bannersBlock ul li.block4 dl dd { height : 6em;    }
	/* #bannersBlock ul li.block3:nth-child(3n+1) dl ,
	#bannersBlock ul li.block4:first-child dl {
		margin-left:0;
	} */

/* 緊急事態宣言　追記 */
.kinkyu-area {
    display: table;
    position: relative;
    text-align: center;
    border-spacing: 20px 0;
    padding: 0;
    zoom: 1;
}
.kinkyu-area p {
	width: 470px;
	margin: 0 10px;
	display: table-cell;
}
.kinkyu-area a {
    margin: 20px auto 40px;
    display: block;
    padding: 15px 40px 15px 10px;
    font-size: 13px;
    border: 1px solid #b7183f;
    position: relative;
}
.kinkyu-area a:hover {
	background:#fff5f3;
	text-decoration:none;
}
.kinkyu-area a:after {
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: solid 2px #b7183f;
	border-right: solid 2px#b7183f;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	right: 15px;
	top: 40%;
}
.kinkyu-area a span {
    background-color: #E58A79;
    padding: 8px;
    margin-right: 4px;
    border-radius: 40px;
    margin-top: 10px;
    font-weight: 400;
    color: #fff;
}
.spbr {
	display:none;
}
	/* ビタミンC　追記 */
.vitamin-area {
	background: #f1f5f8;
	width: 910px;
	text-align:center;
	margin: 0 auto 20px;
	padding: 20px 0 10px;
}
.vitamin-area .spOpen {
	display:none;
}
.vitamin-area .pcOpen {
	width: 70%;
	display:block;
	margin: 0 auto 10px;
}
.vitamin-area ul {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0;
	margin: 0;
}
.vitamin-area ul li {
	list-style-type:none;
	font-size: 16px;
	position:relative;
	margin-bottom: 20px;
}
.vitamin-area ul li:first-child {
	margin-right: 20px;
}
.vitamin-area ul li a{
	display:block;
	min-width: 300px;
	text-align:center;
	color:#261512;
	background: #fff;
	padding: 20px;
}
.vitamin-area ul li a:hover {
	background:#d6e7f5;
	text-decoration: none;
}
.vitamin-area ul li:after{
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: solid 2px #001572;
    border-right: solid 2px#001572;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 1rem;
    top: 38%;
}
	/* ----------------------------------------------------
		. E-Special
	------------------------------------------------------- */



	#especialBlock {
		width: 910px;
		display				: block;
		position			: relative;
		margin: 0 0 40px 20px;
		padding				: 0;
		background			: #ffffff;
		border:1px solid #eaeaea;
		zoom				: 1;
	}
	#especialBlock:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



	#especialBlock ul,
	#especialBlock ul li,
	#especialBlock dl,
	#especialBlock dl dt,
	#especialBlock dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#especialBlock img {
		vertical-align	: bottom;
		width			: auto;
		max-width		: 100%;
	}


	#especialBlock section > header {
		display			: block;
		position		: absolute;
		left			: 33.34%;
		top				: 0;
		width			: 66.66%;
		margin			: 0;
		padding			: 10px 0 0 0;
		text-align		: center;
		color			: #231815;
		font-family		: "游明朝","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-weight		: bold;
		line-height		: 1;
		z-index			: 100;
	}

	#especialBlock section > header h2 {
		margin			: 0;
		padding			: 0;
		font-size		: 10pt;
	}

	#especialBlock section > header h1 {
		margin			: 0;
		padding			: 0;
		font-size		: 25pt;
		font-style		: normal;
		border-left		: 0;
	}

	#especialBlock .banner {
		display			: block;
		position		: relative;
	}
	#especialBlock .banner h2 {
		margin:0;
	}
	#especialBlock .banner ul {
		display			: block;
		margin			: 0 0 0 33.34%;
		letter-spacing	: -0.5em;
	}

	#especialBlock .banner ul li {
		display			: inline-block;
		vertical-align	: bottom;
		width			: 50%;
		letter-spacing	: normal;
	}

	#especialBlock .banner ul li.eri {
		display			: block;
		position		: absolute;
		left			: 0;
		bottom			: 0;
		width			: 33.34%;
	}

	#especialBlock .buy {
		clear			: both;
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
	}

	#especialBlock .buy ul {
	}

	#especialBlock .buy ul li {
		float			: left;
		width			: 33.33%;
		list-style-type	: none;
		border-top		: 1px solid #e0e0e0;
	}
#especialBlock .buy ul li.shop,
	#especialBlock .buy ul li.amazon,
	#especialBlock .buy ul li.rakuten,
	#especialBlock .buy ul li.yahoo{
		width			: 16.66%;
	}

	#especialBlock .buy ul li a {
		display				: block;
		height				: 60px;
		background-position	: center center;
		background-repeat	: no-repeat;
		background-color	: #ffffff;
		background-position : center center;
		border-left			: 1px solid #e0e0e0;
		font-size			: 12pt;
		font-weight			: bold;
		color				: #231815;
		text-decoration		: none;
		text-indent			: -9999px;
		overflow			: hidden;
	}
	#especialBlock .buy ul li:first-child a {
		border-left:none;
	}
	#especialBlock .buy ul li.official a {
		background-image	: url(../../styles2017/img/especial/bijin.png); 
		background-position : center center;
	}
	#especialBlock .buy ul li.shop a {
		background-image	: url(../../styles2017/img/especial/japan.png); 
		background-position : center -8px;
		line-height			: 60px;
		text-indent			: 0;
		text-align			: center;
	}
	#especialBlock .buy ul li.amazon a {
		background-image	: url(../../styles2017/img/especial/amazon.png); 
	}
	#especialBlock .buy ul li.rakuten a {
		background-image	: url(../../styles2017/img/especial/rakuten.png); 
		text-indent			: -9999px;
		overflow			: hidden;
	}
	#especialBlock .buy ul li.yahoo a {
		background-image	: url(../../styles2017/img/especial/yahoo.png);
		text-indent			: -9999px;
		overflow			: hidden;
	}


	/* ----------------------------------------------------
		News Block
	------------------------------------------------------- */



	#newsBlock {
		float				: left;
		display				: block;
		position			: relative;
		width: 61%;
		margin: 0 0 20px 20px;
		padding				: 0;
	}



	#newsBlock dl,
	#newsBlock dl dt,
	#newsBlock dl dd,
	#newsBlock ul,
	#newsBlock ul li {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}



	#newsBlock > section {
		display				: block;
		position			: relative;
		margin: 0;
		padding				: 0;
		border:1px solid #eaeaea;
		zoom				: 1;
	}
	#newsBlock > section:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



	#newsBlock > section > header {
		margin			: 0;
		padding			: 0 0 0 10px;
		border-left		: 5px solid #b7183f;
		border-bottom	: 1px solid #e0e0e0;
	}

	#newsBlock > section > header > h2 {
		margin			: 0;
		padding			: 0;
		font-size		: 9pt;
		font-weight		: normal;
		line-height		: 67px;
	}

	#newsBlock > section > header > h2 strong {
		padding			: 0px 10px 0 0;
		font-size		: 14pt;
		font-weight		: normal;
	}



	#newsBlock > section .list {
		height			: 430px;
		margin			: 0;
		padding			: 0;
		background		: #ffffff;
		overflow		: hidden;
		/* overflow-x		: hidden;
		overflow-y		: auto; */
	}

	#newsBlock > section .list dl {
		margin			: 0;
	}

	#newsBlock > section .list dl dt {
		margin			: 10px 10px 0 10px;
	}

	#newsBlock > section .list dl dd {
		margin			: 10px 10px 0 10px;
		padding			: 0 0 10px 10px;
		border-bottom	: 1px solid #e0e0e0;
	}



	/* ----------------------------------------------------
		Facebook Block
	------------------------------------------------------- */



	#facebookBlock {
		float: right;
		display				: block;
		position			: relative;
		width: 33.33%;
		margin: 0 20px 0 0;
		padding				: 0;
	}

	#facebookBlock > section {
		display				: block;
		position			: relative;
		height				: 500px;
		margin				: 0 0 0 10px;
		padding				: 0;
		zoom				: 1;
	}

	#facebookBlock > section > header {
		display				: none;
	}


/* ---------------------------------------------------------
	Media Block
------------------------------------------------------------ */



	#mediaBlock {
		width: 910px;
		display				: block;
		position			: relative;
		margin: 0 0 20px 20px;
		padding				: 0;
		background-color	: #ffffff;
		border:1px solid #eaeaea;
		zoom				: 1;
	}
	#mediaBlock:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



	#mediaBlock ul,
	#mediaBlock ul li,
	#mediaBlock dl,
	#mediaBlock dl dt,
	#mediaBlock dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#mediaBlock a         { color:#231815; text-decoration:none; }
	#mediaBlock a:visited { color:#333333; text-decoration:none; }
	#mediaBlock a:hover   { color:#231815; text-decoration:none; }



	#mediaBlock > section > header {
		margin			: 0;
		padding			: 0 0 0 10px;
		border-left		: 5px solid #b7183f;
	}

	#mediaBlock > section > header > h2 {
		margin			: 0;
		padding			: 0;
		font-size		: 9pt;
		font-weight		: normal;
		line-height		: 70px;
	}

	#mediaBlock > section > header > h2 strong {
		padding			: 0px 10px 0 0;
		font-size		: 14pt;
		font-weight		: normal;
	}


	/* MORE -------------------------------------- */



	#mediaBlock .more,#newsBlock .more {
		position		: absolute;
		top				: 10px;
		right			: 10px;
		margin			: 0;
		padding			: 0;
	}

	#mediaBlock .more a, #newsBlock .more a  {
		display				: block;
		height				: 48px;
		line-height			: 48px;
		width				: 150px;
		float				: right;
		margin				: 0;
		padding: 0 0 0 40px;
		border-left			: 1px solid #e0e0e0;
		border-top			: 1px solid #e0e0e0;
		border-right		: 1px solid #c0c0c0;
		border-bottom		: 1px solid #c0c0c0;
		background-color	: #ffffff;
		background-image	: url(../../styles2017/img/menu/right_r.png);
		background-position: left 15px center;
		background-repeat	: no-repeat;
		text-align			: left;
		color				: #231815;
		text-decoration		: none;
	}

	#mediaBlock .more a:hover, #newsBlock .more a:hover {
		color				: #231815;
		text-decoration		: none;
		background-color	: #ffebeb;
	}


	/* Slider ---------------------------------------------- */


	#mediaBlock .slideshow {
		display			: block;
		position		: relative;
		margin			: 0 10px;
		padding			: 10px 0 20px;
	}

	#mediaBlock .slideshow img {
		width			: auto;
		max-width		: 100%;
		height			: auto;
		vertical-align	: bottom;
	}

	#mediaBlock .slideshow ul {
	}

	#mediaBlock .slideshow ul li {
		display			: block;
		position		: relative;
	}

	#mediaBlock .slideshow .slider {
		display			: block;
		position		: relative;
		overflow		: hidden;
		margin			: 0 20px;
	}

	#mediaBlock .slideshow .slider ul {
		display			: block;
		position		: relative;
		width			: 200%;
		zoom			: 1;
	}
	#mediaBlock .slideshow .slider ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#mediaBlock .slideshow .slider ul li {
		display			: block;
		position		: relative;
		width			: 10%;
		float			: left;
		padding			: 10px 0 0 0;
/* border:1px solid #ff0000; */
	}

	#mediaBlock .slideshow .slider ul li dl {
	}

	#mediaBlock .slideshow .slider ul li dl dt {
		margin			: 0 10%;
	}

	#mediaBlock .slideshow .slider ul li dl dd {
		margin			: 3px 5% 0;
	}

	#mediaBlock .slideshow .pointer {
		display			: block;
		position		: relative;
		margin			: 5px 5% 0;
		padding			: 0;
		overflow		: hidden;
	}

	#mediaBlock .slideshow .pointer ul {
		position		: relative;
		float			: left;
		left			: 50%;
		zoom			: 1;
	}
	#mediaBlock .slideshow .slider ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#mediaBlock .slideshow .pointer ul li {
		float			: left;
		left			: -50%;
		margin			: 0 5px;
	}

	#mediaBlock .slideshow .pointer ul li a {
		display			: block;
		width			: 8px;
		height			: 8px;
		text-align		: center;
		cursor			: pointer;
		font-size		: 1pt;
		border-radius	: 4px;
		background		: #c0c0c0;
		text-indent		: -9999px;
		overflow		: hidden;
	}

	#mediaBlock .slideshow .pointer ul li.sel a {
		background		: #b7183f;
	}



	#mediaBlock .slideshow .direction p {
		display			: block;
		position		: absolute;
		top				: 40%;
		margin			: -40px 0 0 0;
		padding			: 0;
	}
	#mediaBlock .slideshow .direction p.prev {  left :0; }
	#mediaBlock .slideshow .direction p.next {  right:0; }

	#mediaBlock .slideshow .direction p a {
		display			: block;
		width			: 20px;
		height			: 80px;
		text-align		: left;
		text-indent		: -9999px;
		overflow		: hidden;
		background-position	: center center;
		background-repeat	: no-repeat;
		background-color	: #f0f0f0;
	}
	#mediaBlock .slideshow .direction p.prev a { background-image:url(../../styles2017/img/menu/left_b.png);  }
	#mediaBlock .slideshow .direction p.next a { background-image:url(../../styles2017/img/menu/right_b.png); }



/* ---------------------------------------------------------
	Treats Menu Block
------------------------------------------------------------ */



	#treatsBlock {
		width: 910px;
		display				: block;
		position			: relative;
		margin: 0 0 20px 20px;
		padding				: 0;
		background-color	: #ffffff;
		border:1px solid #eaeaea;
		zoom				: 1;
	}
	#treatsBlock:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



	#treatsBlock ul,
	#treatsBlock ul li,
	#treatsBlock dl,
	#treatsBlock dl dt,
	#treatsBlock dl dd {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}

	#treatsBlock img {
		width			: auto;
		max-width		: 100%;
		vertical-align	: bottom;
	}

	#treatsBlock a         { color:#231815; text-decoration:none; }
	#treatsBlock a:visited { color:#333333; text-decoration:none; }
	#treatsBlock a:hover   { color:#231815; text-decoration:none; }



	#treatsBlock > section > header {
		margin			: 0;
		padding			: 0 0 0 10px;
		border-left		: 5px solid #b7183f;
		border-bottom	: 1px solid #e0e0e0;
	}

	#treatsBlock > section > header > h2 {
		margin			: 0;
		padding			: 0;
		font-size		: 9pt;
		font-weight		: normal;
		line-height		: 70px;
	}

	#treatsBlock > section > header > h2 strong {
		padding			: 0px 10px 0 0;
		font-size		: 14pt;
		font-weight		: normal;
	}



	#treatsBlock nav {
		display			: block;
		position		: relative;
		margin			: 0;
		padding			: 0;
	}

	#treatsBlock nav ul li {
		border-top		: 1px solid #e0e0e0;
		border-right	: 1px solid #e0e0e0;
	}
	#treatsBlock nav ul li:first-child {
		border-top		: 0;
	}

	#treatsBlock nav ul li a {
		clear				: both;
		display				: block;
		padding				: 10px 35px 10px 5px;
		color				: #231815;
		text-decoration		: none;
		z-index				: 100;
		cursor				: pointer;

		background-color	: #ffffff;
		background-image	: url(../../styles2017/img/menu/plus_b_f0.png);
		background-position	: right center;
		background-repeat	: no-repeat;
	}
	#treatsBlock nav div ul li a:visited {
		color				: #333333;
		text-decoration		: none;
	}
	#treatsBlock nav div ul li a:hover {
		background-color	: #f0f0f0;
		text-decoration 	: none;
	}



	/* With Href */
	#treatsBlock nav div ul li a[href] {
		background-image	: url(../../styles2017/img/menu/right_b_f0.png);
	}



	/* New Icon */
	#treatsBlock nav span {
		padding			: 2px 4px;
		color			: #f16a7d;
		
		font-size		: 9pt;
		font-weight		: bold;
		margin-right: 5px;
	}

	#treatsBlock nav span.uc {
		display			: block;
		margin			: 3px 0 0 0;
		padding			: 2px 0;
		color			: #555555;
		font-size		: 8pt;
		font-weight		: normal;
		background		: transparent;
	}




	/* Under Construction */
	#treatsBlock nav div ul li.nopage a {
		background-image	: none;
		cursor				: default;
	}

	#treatsBlock nav div ul li.nopage a:hover {
		background-color	: #ffffff;
	}



	/* Selected */
	#treatsBlock nav ul li.sel {
		border-right	: 1px solid #ffffff;
	}

	#treatsBlock nav ul li.sel > a {
		background-color	: #ffffff;
		background-image	: url(../../styles2017/img/menu/right_b_ff.png);
		cursor				: normal;
	}



	/* With Picture ------------------------------ */



	#treatsBlock nav ul li dl {
		display			: block;
		margin			: 0;
		letter-spacing	: -0.5em;
	}

	#treatsBlock nav ul li dl dt {
		display			: inline-block;
		vertical-align	: middle;
		width			: 25%;
		margin			: 0;
		padding			: 0;
		letter-spacing	: normal;
	}

	#treatsBlock nav ul li dl dd {
		display			: inline-block;
		vertical-align	: middle;
		width			: 72%;
		margin			: 0 0 0 2%;
		padding			: 0;
		letter-spacing	: normal;
		font-size		: 9pt;
		line-height		: 1.5;
	}

	#treatsBlock nav ul li dl dd strong {
		font-size		: 10pt;
		padding			: 0 0 3px;
	}



	/* 1st Layer --------------------------------- */



	#treatsBlock nav > div > ul > li {
		display			: block;
		width			: 32.33%;
	}

	#treatsBlock nav > div > ul > li.perpose {
		display			: none;
	}



	/* 2nd Layer --------------------------------- */


	#treatsBlock nav > div > ul > li > div {
		display			: none;
		position		: absolute;
		left			: 33.33%;
		top				: 0;
		width			: 66.64%;
		height			: 100%;
		z-index			: 10;
		background		: url(../../styles2017/img/menu/e0.png) left 48% top repeat-y;
	}
	#treatsBlock nav > div > ul > li.sel > div {
		display			: block;
		margin: 0;
	}

	#treatsBlock nav > div > ul > li > div > ul  {
		width			: 48%;
		border-bottom	: 1px solid #e0e0e0;
	}


	/* ranking */
	#treatsBlock nav > div > ul > li > div {
		background-image	: none;
	}


	#treatsBlock nav > div > ul > li.ranking > div > ul  {
		width			: 100%;
		border-bottom	: 1px solid #e0e0e0;
	}

	#treatsBlock nav > div > ul > li.ranking dl dt {
		width: 20%;
	}

	#treatsBlock nav > div > ul > li.ranking dl dd {
		display			: inline-block;
		vertical-align	: middle;
		width: 74%;
		margin			: 0 0 0 2%;
		padding			: 0;
		letter-spacing	: normal;
		font-size		: 9pt;
		line-height		: 1.5;
	}




	/* 3rd Layer --------------------------------- */



	#treatsBlock nav > div > ul > li > div > ul > li > div {
		display			: none;
		position		: absolute;
		left			: 50%;
		top				: 0;
		width			: 50%;
		height			: 100%;
		z-index			: 10;
	}
	#treatsBlock nav > div > ul > li > div > ul > li > div > ul {
		border-bottom	: 1px solid #e0e0e0;
	}

	#treatsBlock nav > div > ul > li > div > ul > li.sel > div {
		display			: block;
	}

	#treatsBlock nav > div > ul > li > div > ul > li > div > ul  {
		width			: auto;
	}

	#treatsBlock nav > div > ul > li > div > ul > li > div > ul > li {
		border-right	: 0;
	}



	/* MORE -------------------------------------- */



	#treatsBlock .more {
		position		: absolute;
		top				: 10px;
		right			: 0;
	}

	#treatsBlock .more a {
		display				: block;
		height				: 48px;
		line-height			: 48px;
		width: 150px;
		float				: right;
		margin: 0 10px 0 0;
		padding: 0 0 0 40px;
		border-left			: 1px solid #e0e0e0;
		border-top			: 1px solid #e0e0e0;
		border-right		: 1px solid #c0c0c0;
		border-bottom		: 1px solid #c0c0c0;
		background-color	: #ffffff;
		background-image	: url(../../styles2017/img/menu/right_r.png);
		background-position: left 15px center;
		background-repeat	: no-repeat;
		text-align			: left;
		color				: #231815;
		text-decoration		: none;
	}

	#treatsBlock .more a:hover {
		color				: #231815;
		text-decoration		: none;
		background-color	: #ffebeb;
	}








/** =======================================================
	for SP Extension
=========================================================== **/



	@media only screen and (max-width: 760px) {



		/* ------------------------------------------------
			Slideshow Block
		--------------------------------------------------- */



		#slideBlock {
			display: none;
		}

		/* ------------------------------------------------
			carousel block
		--------------------------------------------------- */



		#carouselBlock {
			margin: 0 0 30px;
			padding: 0;
			border:none;
		}



		/* Slider ----------------------------------------- */



		#carouselBlock .slideshow {
			margin			: 0;
			padding: 0;
		}

		#carouselBlock .slideshow .slider ul {
			width			: 2000%;
		}



		/* ------------------------------------------------
			Perpose Menu Tiles Block
		--------------------------------------------------- */



		#perposeBlock {
			margin:0;
			border:none;
		}

		#perposeBlock > nav {
			margin			: 0 auto;
			width			:95%;
		}
		#perposeBlock > nav ul {
			padding-bottom:2rem;
		}
		#perposeBlock > nav ul li {
			width: 33.3%;
		}

		#perposeBlock > nav ul li dl {
			margin			: 10px 5px 0 5px;
		}

		#perposeBlock h2 {
			font-size:26px;
			padding-bottom:10px;
		}

		/* ------------------------------------------------
			Index : Banner Block
		--------------------------------------------------- */



		#bannersBlock {
			margin:0;
			border:none;
			padding-bottom:2rem;
		}

		#bannersBlock ul {
			letter-spacing	: -0.5em;
			margin			: 0 auto;
			width			:95%;
		}


		#bannersBlock ul li {
		    width: 50%;
		}

		#bannersBlock ul li dl {
			margin			: 10px 5px 0;
		}

		#bannersBlock ul li.block3 dl dt ,
		html[lang="en-US"] #bannersBlock ul li dl dt ,
		html[lang="vi"] #bannersBlock ul li dl dt ,
		html[lang="vi"] #bannersBlock ul li dl dt ,
		html[lang="zh-cn"] #bannersBlock ul li dl dt {
			text-align		: center;
			height:auto;
		}

		#bannersBlock ul li dl dd {
			height			: auto;
			max-height		: 4.5em;
		}

		#bannersBlock ul.block3 li,
		#bannersBlock ul.block4 li {
			width			: 50%;
		}

		#bannersBlock ul.block3 li dl dd,
		#bannersBlock ul.block4 li dl dd {
			height			: 6em;
			max-height		: 6em;
		}

		#bannersBlock h2 {
			font-size:26px;
			padding-bottom:10px;
		}



		/* 2017.11.16 add */
		#bannersBlock ul li.block3,
		#bannersBlock ul li.block4 {
			width			: 50%;
		}

		#bannersBlock ul li.block3 dl dd,
		#bannersBlock ul li.block4 dl dd {
			height			: 6em;
			max-height		: 6em;
		}

		#bannersBlock ul li.block3:nth-child(3n+1) dl ,
		#bannersBlock ul li.block4:first-child dl {
		margin: 10px 5px 0;
		}

		/* ------------------------------------------------
			E-Special
		--------------------------------------------------- */



		#especialBlock {
			width: auto;
			margin: 0 20px 10px;
			background-image	: none;
		}

		#especialBlock section > header {
			position		: relative;
			left			: auto;
			top				: auto;
			width			: auto;
			margin			: 0;
			padding			: 10px;
		}

		#especialBlock section > header h2 {
			font-size		: 10pt;
		}

		#especialBlock section > header h2 {
			margin			: 5px 0 0 0;
			font-size		: 15pt;
		}

		#especialBlock .eri {
			display			: none;
		}

		#especialBlock .basic,
		#especialBlock .renew {
			width			: 50%;
			margin			: 0;
		}

		#especialBlock .buy {
		}

		#especialBlock .buy ul li,
		#especialBlock .buy ul li.shop,
		#especialBlock .buy ul li.amazon,
		#especialBlock .buy ul li.rakuten,
		#especialBlock .buy ul li.yahoo{
			float			: none;
			width			: auto;
		}

		#especialBlock .buy ul li a {
			border-left			: 0;
		}



		/* ----------------------------------------------------
			News Block
		------------------------------------------------------- */



		#newsBlock {
			float				: none;
			width				: auto;
			margin: 0 20px 30px;
		}

		#newsBlock > section {
			margin				: 0;
			padding: 0;
		}

		#newsBlock > section > header > h2 {
			line-height		: 50px;
		}

		#newsBlock > section .list {
			height: auto;
			margin: 20px 20px 0;
		}
		#newsBlock > section .list dl dt {
			margin: 0 0 5px;
		}
		#newsBlock > section .list dl dd {
			margin: 0 0 10px;
			padding: 0 0 10px;
			border-bottom: 1px solid #e0e0e0;
		}
		



		/* ------------------------------------------------
			Facebook Block
		--------------------------------------------------- */



		#facebookBlock {
			float				: none;
			width				: auto;
			margin				: 0 auto 2rem;
		}

		#facebookBlock > section {
			height				: auto;
			margin				: 0;
			padding				: 10px;
		}

		#facebookBlock .fb-page {
			display:flex;
			justify-content:center;
			align-items:center;
		}



	/* ----------------------------------------------------
		Media Block
	------------------------------------------------------- */



		#mediaBlock {
			width: auto;
			margin: 0 20px 30px;
		}
		#mediaBlock > section > header {
			border-bottom	: 1px solid #e0e0e0;
		}
		#mediaBlock .more, #newsBlock .more {
			position		: relative;
			top				: auto;
			right			: auto;
			margin: 15px 20px 20px;
			padding: 0;
		}

		#mediaBlock .more a, #newsBlock .more a {
			width				: auto;
			padding: 0;
			float				: none;
			text-align			: center;
		}



		/* Slider ----------------------------------------- */



		#mediaBlock .slideshow {
		}

		#mediaBlock .slideshow .slider ul {
			display			: block;
			position		: relative;
			width			: 500%;
			zoom			: 1;
		}

		#mediaBlock .slideshow .slider ul li {
		}



		/* ------------------------------------------------
			Treats Menu Block
		--------------------------------------------------- */



		#treatsBlock {
			width: auto;
			margin: 0 20px 30px;
		}

		#treatsBlock > section > header {
			border-bottom	: 0;
		}

		#treatsBlock > section > header > h2 {
			line-height		: 50px;
		}

		/* Nav --------------------------------------- */



		#treatsBlock nav {
			border-top		: 0;
			border-bottom	: 1px solid #e0e0e0;
		}

		#treatsBlock nav ul li {
			border-left: 0;
			border-right	: 0;
		}
		#treatsBlock nav ul li:first-child {
			border-top		: 1px solid #e0e0e0;
		}

		#treatsBlock nav ul li a {
		padding: 10px 35px 10px 10px;
		}
		#treatsBlock nav div ul li a:visited {
			color				: #231815;
		}
		#treatsBlock nav div ul li a:hover {
			background-color	: #ffffff;
		}

		/* Selected */
		#treatsBlock nav ul li.sel {
			border-right	: 0;
		}

		#treatsBlock nav ul li.sel > a {
			background-image	: url(../../styles2017/img/menu/up_b_trans.png);
			cursor				: pointer;
		}



		/* 1st Layer --------------------------------- */



		#treatsBlock nav > div > ul > li {
			width			: auto;
		}



		/* 2nd Layer --------------------------------- */



		#treatsBlock nav > div > ul > li.ranking > div > ul  {
			width			: 100%;
			border-bottom	: 0;
		}



		/* 3rd Layer --------------------------------- */



		#treatsBlock nav > div > ul > li > div,
		#treatsBlock nav > div > ul > li > div > ul > li > div {
			position		: relative;
			left			: auto;
			top				: auto;
			width			: auto;
			height			: auto;
			margin			: 0 0 0 20px;
			background		: transparent;
		}

		#treatsBlock nav > div > ul > li > div > ul,
		#treatsBlock nav > div > ul > li > div > ul > li > div > ul {
			width			: auto;
			border-bottom	: 0;
		}



		/* MORE -------------------------------------- */



		#treatsBlock .more {
			position		: relative;
			top				: auto;
			right			: auto;
			width			: auto;
			margin			: 0;
			padding			: 0 10px 10px;
		}

		#treatsBlock .more a {
			width			: auto;
			float			: none;
			margin			: 10px 0 0 0;
		}

	/* 緊急事態宣言　追記 */
		.kinkyu-area {
			margin: 0 20px 30px;
			display: block;
		}
		.kinkyu-area p {
			width: auto;
			margin: 0 0 15px;
			display: block;
		}
		.kinkyu-area a {
			margin: 0 ;
			padding: 10px;
		}
		.spbr {
			display:block;
		}
	/* ビタミンC　追記 */
		.vitamin-area {
			width: auto;
			margin: 0 20px 30px;
			padding: 10px 20px 10px;
			text-align: center;
			box-sizing: border-box;
		}
		.vitamin-area .pcOpen {
			display:none;
		}
		.vitamin-area .spOpen {
			display:block;
			width: 90%;
			height:auto;
			margin: 0 auto 10px;
		}
		.vitamin-area ul {
		margin-bottom: 10px;
		display: block;
		}
		.vitamin-area ul li {
			margin-bottom:0;
		}
		.vitamin-area ul li:first-child {
			margin-right:0;
			margin-bottom: 10px;
		}
		.vitamin-area ul li a{
			font-size:14px;
			min-width:200px;
		}



	}
	/* カルーセル拡大 */
	@media only screen and (max-width: 480px) {
	#carouselBlock .slideshow .slider {
		margin: 0;
	}
	#carouselBlock .slideshow .slider ul li dl dt {
		margin: 0 0 15px;
	}
	#carouselBlock .slideshow .slider ul li dl dd {
		margin: 0;
	}

	#carouselBlock .slideshow .slider ul li dl dd {
	}

	#carouselBlock .slideshow .slider ul li dl dd {
		min-height:1em;
		margin: 0 20px;
	}
	#carouselBlock .slideshow .direction p ,
	#carouselBlock .slideshow .direction p a  {
		display: none;
	}
	#carouselBlock .slideshow .slider ul li dl dt img {
		width:100%;
		margin:0 auto;
		display:block;
	}
	}