@charset "UTF-8";

/* brand-product css */
/*------------------------------------------------------------------------

コラムテンプレート
------------------------------------------------------------------------*/
#header {
	border-bottom: 1px solid #b5dcff;
}

.prodlist-brand {
	display: none;
}

#column_main #maincontents_area .boxList01 {
	width: 100%;
}

/* フリーhtmlエリア
----------------------------------------------------- */
div#maincontents_area,
div#maincontents_area section * {
	-ms-box-sizing: border-box;
	box-sizing: border-box
}

div#maincontents_area {
	display: block;
	border: solid 1px #cdd7e5;
	max-width: 940px;
	width: 100%;
	padding: 40px;
	margin: 0 auto 40px;
	font-size: 16px;
}

#maincontents_area section {
	margin: 0 auto 50px;
	max-width: 940px;
	width: 100%;
}

/* #maincontents_area img{
	width: 100%;
} */

/* title */
#maincontents_area h2 {
	border-bottom: 2px solid #005bac;
	padding: 0 0 10px;
	margin: 0 0 20px;
	font-size: 2.4rem;
	font-weight: bold;
}

#maincontents_area h3 {
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: bold;
}

/* プロフィール */
.profile_area {
	overflow: hidden;
	margin: 0 auto 30px;
	display: table;
	width: 100%;
}

.profile_area .profile_img {
	width: 13%;
	display: table-cell;
	padding-right: 3%;
}

.profile_area .profile_img img {
	width: 100%;
}

.profile_area .txt_box {
	display: table-cell;
	vertical-align: middle;
	width: 87%;
}

.profile_area .txt_box .profile_catch {
	font-weight: bold;
}

.profile_area .profile_img02 {
	width: 15%;
	display: table-cell;
	padding-left: 3%;
}

.profile_area .profile_img02 img {
	width: 100%;
}

/*プロフィール 写真右 */
.developer_info {
	overflow: hidden;
	margin: 0 auto 30px;
}

.developer_info .developer_img {
	float: right;
	margin: 0 0 30px 30px;
	width: 30%;
}

/* 商品ボタン */
#maincontents_area .item_link {
	border: 2px solid #005bac;
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
}

#maincontents_area .item_link a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	color: #000;
	padding: 10px 20px;

}

#maincontents_area .item_link a:hover {
	text-decoration: none;
	opacity: 0.7;
}

#maincontents_area .item_link figure,
#maincontents_area .item_link div {}

#maincontents_area .item_link figure {
	width: 35%;
	flex-shrink: 0;
}

#maincontents_area .item_link figure img {
	max-width: 160px;
	margin: 0 auto;
}

#maincontents_area .item_link div {
	width: 100%;
	text-align: center;
}

#maincontents_area .item_link .item_name {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: left;
}

/* float */
#maincontents_area .contentFloat {
	margin: 0 auto 30px;
	overflow: hidden;
}

#maincontents_area .contentFloat .photo {
	max-width: 40%;

}

#maincontents_area .contentFloat .photo img {
	max-height: 300px;
}

#maincontents_area .content_left {
	float: left;
}

#maincontents_area .content_right {
	float: right;
}

#maincontents_area .content_left.photo {
	margin-right: 20px;
}

#maincontents_area .content_right.photo {
	margin-left: 20px;
}

/* flex */
#maincontents_area .contentFlex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin: 0 auto 30px;
}

#maincontents_area .contentFlex .photo {
	max-width: 40%;
	flex-shrink: 0;
	margin: 0 0 0 20px;
}

#maincontents_area .contentFlex.txt_right .photo {
	max-width: 40%;
	flex-shrink: 0;
	margin: 0 20px 0 0;
	order: 1;
}

#maincontents_area .contentFlex.txt_right p {
	order: 2;
}

#maincontents_area .contentFlex .photo img {
	max-height: 300px;
}


/* 吹き出し */
#maincontents_area .fukidashi {
	overflow: hidden;
}

#maincontents_area .fukidashi div {
	border-radius: 15px;
	padding: 20px;
	width: 80%;
	position: relative;
}

#maincontents_area .fukidashi div:nth-of-type(odd) {
	background: #fdeff5;
	margin: 0 0 20px 15px;
}

#maincontents_area .fukidashi div:nth-of-type(even) {
	float: right;
	background: #fefaeb;
	margin: 0 15px 20px 0;
}

#maincontents_area .fukidashi div:nth-of-type(odd):before,
#maincontents_area .fukidashi div:nth-of-type(even):after {
	content: "";
	position: absolute;
	border-top: 25px solid #fdeff5;
	border-right: 25px solid transparent;
	border-left: 5px solid transparent;
	top: 50%;
	transform: translate(-0%, -50%);
	-webkit-transform: translate(-0%, -50%);
}

#maincontents_area .fukidashi div:nth-of-type(odd):before {
	border-top: 25px solid #fdeff5;
	border-right: 5px solid transparent;
	border-left: 25px solid transparent;
	left: -15px;
}

#maincontents_area .fukidashi div:nth-of-type(even):after {
	border-top: 25px solid #fefaeb;
	border-right: 25px solid transparent;
	border-left: 5px solid transparent;
	right: -15px;
}

/* 画像あり */
#maincontents_area ul.fukidashiList {
	margin-bottom: 40px;
}

#maincontents_area ul.fukidashiList li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 20px;
}

#maincontents_area ul.fukidashiList li.img_left p {
	width: 85px;
	flex-shrink: 0;
	margin: 0 20px 0 0;
}

#maincontents_area ul.fukidashiList li.img_right p {
	width: 85px;
	flex-shrink: 0;
	margin: 0 0 0 20px;
	order: 2;
}

#maincontents_area ul.fukidashiList li div {
	background: #fdeff5;
	border-radius: 15px;
	padding: 20px;
	width: 80%;
	position: relative;
}

#maincontents_area ul.fukidashiList li.img_right div {
	order: 1;
	margin: 0 15px 0 0;
	position: relative;
}

#maincontents_area ul.fukidashiList li div:before {
	content: "";
	position: absolute;
	top: 35px;
}

#maincontents_area .fukidashiList li.img_left div:before {
	border-top: 25px solid #fdeff5;
	border-right: 5px solid transparent;
	border-left: 25px solid transparent;
	left: -15px;
}

#maincontents_area ul.fukidashiList li.img_right div:before {
	border-top: 25px solid #fdeff5;
	border-right: 25px solid transparent;
	border-left: 5px solid transparent;
	right: -15px;
}

/* skincare/steroid */
#maincontents_area .aside {
	padding: 26px 32px;
	border: 2px solid #c3d7e9;
	border-radius: 6px;
	position: relative;
	margin-top: 40px;
}

#maincontents_area .aside h3 {
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 2px solid #c3d7e9;
	font-size: 2.1rem;
}

#maincontents_area h3 strong {
	color: #ee5561;
}

#maincontents_area .aside ul li h4 {
	padding-left: 14px;
	position: relative;
	font-size: 1.8rem;
}

#maincontents_area .aside ul li h4::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: #80add5;
	position: absolute;
	border-radius: 50%;
	left: 0;
	top: 0.5em;
}

#maincontents_area .aside ul li {
	padding: 20px 0px 0px;
	border-top: 2px dotted #c3d7e9;
	margin-bottom: 1em;
}

#maincontents_area .aside ul li:first-child {
	padding: 0px 0px 0px;
	border-top: none;
}

#maincontents_area .aside ul li:last-child {
	margin-bottom: 0;
}

#maincontents_area .aside ul li p {
	padding-left: 14px;
}

#maincontents_area .aside_flex {
	display: flex;
}

#maincontents_area .aside_flex img {
	max-width: 44%;
	margin: 0 0 0.5em 1em;
}

#maincontents_area .aside.aside02 {
	background: #fffff1;
}

#maincontents_area .aside02 .img_right {
	max-width: 44%;
	display: block;
	float: right;
	margin: 0 0 0.5em 1em;
}

#maincontents_area .aside .echo {
	position: absolute;
	top: -24px;
	left: -24px;
}

#maincontents_area .aside.aside02 h3 {
	margin: 0 -32px 20px -32px;
	padding: 0 32px 20px 32px;
}


/* その他共通部品
----------------------------------------------------- */
/* マージン */
.mb10 {
	margin-bottom: 10px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

/* 画像サイズ */
.img {
	max-width: 940px;
	100%;
	margin: 0 auto 30px;
}

.img_w80 {
	width: 80%;
	margin: 0 auto 30px;
}

.img_w70 {
	width: 70%;
	margin: 0 auto 30px;
}

.img_w60 {
	width: 60%;
	margin: 0 auto 30px;
}

.img_w50 {
	width: 50%;
	margin: 0 auto 30px;
}

.img_w40 {
	width: 40%;
	margin: 0 auto 30px;
}

.img_w30 {
	width: 30%;
	margin: 0 auto 30px;
}

.img_w20 {
	width: 20%;
	margin: 0 auto 30px;
}

.img img,
.img_w80 img,
.img_w70 img,
.img_w60 img,
.img_w50 img,
.img_w40 img,
.img_w30 img,
.img_w20 img {
	width: 100%;
}

/* ボックス背景 */
.box_area {
	border: 1px solid #005bac;
	padding: 20px;
}

.bg_pink {
	background: #fdf8fa;
	padding: 20px;
}

.bg_blue {
	background: #e4f6fb;
	padding: 20px;
}

.bg_yellow {
	background: #fefaeb;
	padding: 20px;
}

a.opacityOver:hover {
	display: block;
	opacity: 0.7 !important;
}

/* テキスト */
.txt_blue {
	color: #005bac;
}

.txt_red {
	color: #E60011;
}

.txt_pink {
	color: #ec34e3;
}

.txt_square::before {
	content: "■";
	color: #005bac;
}

.kome_m {
	font-size: 12px;
	vertical-align: top;
}

.kome_t {
	font-size: 13px;
	line-height: 1.8;
	padding-left: 1em;
	text-indent: -1em;
}

.indent_txt {
	padding-left: 1em;
	text-indent: -1em;
}

.indent_list>li {
	line-height: 1.6;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 5px;
}

.midashi_l {
	margin-bottom: 10px;
	font-size: 2.4rem;
	font-weight: bold;
}

.midashi_m {
	margin-bottom: 10px;
	font-size: 2rem;
	font-weight: bold;
}

.midashi_s {
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
}

#maincontents_area .read_right {
	display: block;
	text-align: right;
	font-size: 12px;
}

#maincontents_area .read_box {
	display: inline-block;
	border: 1px solid #000;
	padding: 0 3px;
	line-height: 1.2;
}

/* マーカー */
#maincontents_area mark {
	background: linear-gradient(transparent 60%, #fef668 60%);
}

#maincontents_area mark.pink {
	background: linear-gradient(transparent 60%, #ffaaf7 60%);
}

#maincontents_area mark.orange {
	background: linear-gradient(transparent 60%, #ffae55 60%);
}

#maincontents_area mark.blue {
	background: linear-gradient(transparent 60%, #60d0f4 60%);
}

/* 一覧へ戻るbtn */
.back_listBtn {
	text-align: center;
}

.back_listBtn a {
	display: inline-block;
	background: #005bac;
	border-radius: 5px;
	padding: 10px 20px;
	color: #fff;
	font-weight: bold;

}

.back_listBtn a:hover {
	opacity: .7;
	text-decoration: none;
}

.back_listBtn a:after {
	display: inline-block;
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 10px;
	margin-top: -2px;
	transform: rotate(45deg);
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	vertical-align: middle;
}

/* 動画 */
.video {
	max-width: 600px;
	height: 340px;
	margin: 0 auto;
	text-align: center;
}

/* ページ内リンク */
.pege_link {
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
}

.pege_link ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pege_link ul li {
	max-width: 33%;
	text-align: center;
	cursor: pointer;
}

.pege_link li:not(:nth-child(-n + 3)) {
	margin-bottom: 10px;
}

.pege_link li a {
	display: inline-block;
	position: relative;
	padding-left: 20px;
}

.pege_link li a:before,
.pege_link li a:after {
	display: block;
	content: "";
	position: absolute;
}

.pege_link li a:before {
	top: 3px;
	left: 0;
	width: 13px;
	height: 13px;
	border: 1px solid #0D5DAA;
	border-radius: 50%;
}

.pege_link li a:after {
	top: 7px;
	left: 5px;
	width: 4px;
	height: 4px;
	border-top: 1px solid #005BAC;
	border-right: 1px solid #005BAC;
	transform: rotate(135deg);
}

/* shunkoku／paletas */
#column_main #maincontents_area02 .boxList01 {
	width: 100%;
}

#maincontents_area02 {
	max-width: 980px;
	padding: 0 20px;
	margin: 0 auto;
}

#maincontents_area02 .boxInfo01 {
	width: 100%;
}

/* -----------------------------------------------------
　 sp 768px
----------------------------------------------------- */
@media screen and (max-width: 768px) {
	aside {
		display: none;
	}

	div#maincontents_area {
		width: 95%;
	}

	#maincontents_area02 {
		padding: 0;
	}

	#maincontents_area02 .boxInfo01 {
		width: 100%;
	}
}

/* -----------------------------------------------------
　 sp 640px
----------------------------------------------------- */
@media screen and (max-width: 640px) {

	div#maincontents_area {
		width: 90%;
		padding: 20px;
		font-size: 1.4rem;
	}

	#maincontents_area section {
		margin-bottom: 30px;
	}

	/* title */
	#maincontents_area h2 {
		font-size: 1.8rem;
	}

	#maincontents_area h3 {
		font-size: 1.6rem;
	}

	/*プロフィール */
	.profile_area {
		margin: 0 auto 15px;
	}

	.profile_area .profile_img {
		width: 25%;
		display: table-cell;
		padding-right: 3%;
	}

	.profile_area .profile_img img {
		width: 100%;
	}

	.profile_area .txt_box {
		vertical-align: middle;
		width: 75%;
	}

	.profile_area .txt_box .profile_catch {
		font-size: 4.06vw;
	}

	.profile_area .profile_img02 {
		width: 25%;
		padding-left: 3%;
	}

	/*プロフィール 写真右 */
	.developer_info {
		overflow: hidden;
		margin: 0 auto 20px;
	}

	.developer_info .developer_img {
		float: none;
		margin: 0 0 10px 0;
		width: 100%;
	}

	/* 商品ボタン */
	#maincontents_area .item_link {
		width: 100%;
	}

	#maincontents_area .item_link a {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 10px 15px;
	}

	#maincontents_area .item_link a:hover {
		text-decoration: none;
		opacity: 0.7;
	}

	#maincontents_area .item_link figure {
		width: 100%;
		margin: 0 0 10px;
		flex-shrink: 0;
	}

	#maincontents_area .item_link figure img {
		max-width: 130px;
		margin: 0 auto;
	}

	#maincontents_area .item_link div {
		width: 100%;
		text-align: left;
	}

	#maincontents_area .item_link .item_name {
		font-size: 1.6rem;
		margin-bottom: 10px;
	}

	#maincontents_area .item_link .item_name br.hide {
		display: none;
	}

	/* 吹き出し画像あり */
	#maincontents_area ul.fukidashiList {
		margin-bottom: 30px;
	}

	#maincontents_area ul.fukidashiList li {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	#maincontents_area ul.fukidashiList li.img_left p {
		width: 70px;
		margin: 0 0 20px;
	}

	#maincontents_area ul.fukidashiList li.img_right p {
		width: 70px;
		margin: 0 0 20px;
		order: 1;
		margin-left: auto;
	}

	#maincontents_area ul.fukidashiList li div {
		width: 100%;
	}

	#maincontents_area ul.fukidashiList li.img_right div {
		order: 2;
		margin: 0;
	}

	#maincontents_area ul.fukidashiList li div:before {
		content: "";
		position: absolute;
		top: -10px;
	}

	#maincontents_area .fukidashiList li.img_left div:before {
		left: 10px;
		transform: rotate(65deg);
		-webkit-transform: rotate(65deg);
	}

	#maincontents_area ul.fukidashiList li.img_right div:before {
		right: 10px;
		transform: rotate(-65deg);
		-webkit-transform: rotate(-65deg);
	}

	#maincontents_area .boxList01 .ul_product01 li,
	#maincontents_area .boxList01 .ul_brand01 li,
	#maincontents_area .boxList01 .ul_cmsns01 li,
	#maincontents_area .boxList01 .ul_column01 li {
		width: 50%;
	}

	/* float
	----------------------------------------------------- */
	#maincontents_area .contentFloat:not(.sp_no) .photo {
		max-width: 100%;

	}

	#maincontents_area .contentFloat:not(.sp_no) .photo img {
		max-height: 100%;
	}

	#maincontents_area .contentFloat:not(.sp_no) .content_left {
		float: none;
	}

	#maincontents_area .contentFloat:not(.sp_no) .content_right {
		float: none;
	}

	#maincontents_area .contentFloat:not(.sp_no) .content_left.photo {
		margin: 0 0 20px;
	}

	#maincontents_area .contentFloat:not(.sp_no) .content_right.photo {
		margin: 0 0 20px;
	}

	#maincontents_area .contentFloat:not(.sp_no) .photo img {
		min-height: auto;
	}

	/* flex
	----------------------------------------------------- */
	#maincontents_area .contentFlex {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto 30px;
	}

	#maincontents_area .contentFlex .photo {
		max-width: 100%;
		margin: 0 auto;
	}

	#maincontents_area .contentFlex p {
		margin-bottom: 30px;
	}

	#maincontents_area .contentFlex.txt_right .photo {
		max-width: 100%;
		margin: 0;
		order: 2;
	}

	#maincontents_area .contentFlex.txt_right p {
		order: 1;
		margin-bottom: 30px;
		margin-bottom: 20px;
	}

	#maincontents_area .contentFlex .photo img {
		max-height: auto;
	}

	/* skincare/steroid
	----------------------------------------------------- */
	#maincontents_area .aside_flex {
		display: flex;
		flex-direction: column;
	}

	#maincontents_area .aside_flex img {
		max-width: 100%;
		margin: 0 auto;
	}

	#maincontents_area .aside02 .img_right {
		float: none;
		max-width: 100%;
		margin: 0 0 0.5em 0;
	}

	/* その他共通部品
	----------------------------------------------------- */
	/* 画像サイズ */
	.img,
	.img_w80,
	.img_w70,
	.img_w60,
	.img_w50,
	.img_w40,
	.img_w30,
	.img_w20 {
		width: 100%;
	}

	.img img,
	.img_w80 img,
	.img_w70 img,
	.img_w60 img,
	.img_w50 img,
	.img_w40 img,
	.img_w30 img,
	.img_w20 img {
		width: auto;
		margin: 0 auto;
	}


	/* ボックス背景 */
	.box_area,
	.bg_pink,
	.bg_blue,
	.bg_yellow {
		padding: 10px;
	}

	/* テキスト */
	.indent_list>li {
		line-height: 1.6;
	}

	.midashi_l {
		font-size: 1.8rem;
	}

	.midashi_m,
	.midashi_s {
		font-size: 1.6rem;
	}

	.back_listBtn {
		margin-bottom: 20px;
	}

	/* 一覧へ戻るbtn */
	.back_listBtn a {
		padding: 10px 20px;
	}

	/* 動画 */
	.video {
		max-width: 600px;
		width: 100%;
		height: 45vw;
		margin: 0 auto;
		text-align: center;
	}

	.video iframe {
		width: 100%;
		height: 100%;
	}

	/* ページ内リンク */
	.pege_link ul {
		display: block;
	}

	.pege_link ul li {
		max-width: 100%;
		width: 100%;
		text-align: left;
	}

	.pege_link li:not(:last-child) {
		margin: 0 0 10px;
	}


	/* shunkoku／paletas */
	#maincontents_area02 img {
		margin: 0 auto;
	}

	#maincontents_area02 .boxInfo01 .captionRight01 {
		float: right;
		margin: 0 0 1em 1em;
	}

	#maincontents_area02 .boxInfo01 .captionLeft01 {
		float: left;
		margin: 0 1em 1em 0;
	}

	#maincontents_area02 .boxInfo02 ul li:not(:last-child) {
		margin-bottom: 10px;
	}

	#maincontents_area02 .boxList01 .ul_product01 li {
		width: 20%;
		padding: 0;
		margin-right: 2%;
	}

	#maincontents_area02 .boxList01 .ul_product01 li:last-child {
		margin-right: 0;
	}

	#kidseye #kidseyeColumn {
		width: 100% !important;
	}
}