@charset "utf-8";

/* -----------------------------
	大カテゴリー一覧
-------------------------------- */
#products .products-area {
	padding: 70px 0 100px
}

#products .products-area .inner .pro-list {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

#products .products-area .inner .pro-list .l-size {
	padding: 0 0 30px;
}

#products .products-area .inner .pro-list .m-size {
	padding: 0 0 30px;
}

#products .products-area .inner .pro-list li a {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto;
	box-sizing: border-box;
}

#products .products-area .inner .pro-list li a {
	display: block;
	width: 100%;
}

#products .products-area .inner .pro-list li a:hover {
	box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.1);
	border-radius: 0 0 20px 20px;
}

#products .products-area .inner .pro-list .l-size a {
	padding: 260px 0 30px;
	width: 580px;
}

#products .products-area .inner .pro-list .m-size a {
	padding: 240px 0 30px;
	width: 380px;
}

#products .products-area .inner .pro-list .pro-reibai a {
	background-image: url("../img/bg-products-reibai-pc.jpg");
	margin: 0 30px 0 0;
	border-radius: 10px 10px 0px 0px;
}

#products .products-area .inner .pro-list .pro-chinese a {
	background-image: url("../img/bg-products-chinese-pc.jpg");
	margin: 0 30px 0 0;
}

#products .products-area .inner .pro-list .pro-drug a {
	background-image: url("../img/bg-products-drug-pc.jpg");
	margin: 0 30px 0 0;
}

#products .products-area .inner .pro-list .pro-supplement a {
	background-image: url("../img/bg-products-supplement-pc.jpg");
	margin: 0 30px 0 0;
}

#products .products-area .inner .pro-list .pro-cosmetics a {
	background-image: url("../img/bg-products-cosmetics-pc.jpg");
}
#products .products-area .inner .pro-list .pro-beauty a {
	background-image: url("../img/bg-products-beauty-pc.jpg");
}
#products .products-area .inner .pro-list li h4 {
	font-family: 'Noto Sans JP';
	font-weight: bold;
}

#products .products-area .inner .pro-list .l-size h4 {
	font-size: 3.0rem;
	padding: 35px 0 0;
}

#products .products-area .inner .pro-list .m-size h4 {
	font-size: 2.2rem;
	padding: 25px 0 0;
}

#products .products-area .inner .pro-list li .en {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2rem;
    font-weight: 500;
	letter-spacing: 0.2em;
	padding: 5px 0 10px;
}

#products .products-area .inner .pro-list .pro-reibai .en {
	color: #5ca7d2;
}

#products .products-area .inner .pro-list .pro-chinese .en {
	color: #bd7b43;
}

#products .products-area .inner .pro-list .pro-drug .en {
	color: #767bd4;
}

#products .products-area .inner .pro-list .pro-supplement .en {
	color: #fcb500;
}

#products .products-area .inner .pro-list .pro-cosmetics .en {
	color: #57bfbc;
}
#products .products-area .inner .pro-list .pro-beauty .en {
	color: #f6adf7;
}
#products .products-area .inner .pro-list .l-size .txt {
	font-size: 1.8rem;
}

#products .products-area .inner .att {
    background: #f1f1f1;
    color: #d52525;
    font-weight: 500;
    margin: 0 auto;
    text-align: center;
    width: 1100px;
    height: 50px;
    line-height: 50px;
}

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

	#products .products-area {
		padding: 50px 0 20px;
	}

	#products .products-area .inner .pro-list {
		display: block;
		flex-wrap: nowrap;
		padding: 0 20px;
	}

	#products .products-area .inner .pro-list li a:hover {
		box-shadow: none;
		border-radius: 0;
	}

	#products .products-area .inner .pro-list .l-size {
		padding: 0;
	}

	#products .products-area .inner .pro-list .m-size {
		padding: 0;
	}

	#products .products-area .inner .pro-list .l-size a {
		background-size: auto 150px!important;
		padding: 150px 0 30px;
		width: 100%;
	}

	#products .products-area .inner .pro-list .m-size a {
		background-size: auto 110px!important;
		padding: 110px 0 20px;
		width: 100%;
	}

	#products .products-area .inner .pro-list .pro-reibai a {
		background-image: url("../img/bg-products-reibai-sp.png");
		margin: 0 0 0 0;
	}

	#products .products-area .inner .pro-list .pro-chinese a {
		background-image: url("../img/bg-products-chinese-sp.png");
	}

	#products .products-area .inner .pro-list .pro-drug a {
		background-image: url("../img/bg-products-drug-sp.png");
		margin: 0 0 0 0;
	}

	#products .products-area .inner .pro-list .pro-supplement a {
		background-image: url("../img/bg-products-supplement-sp.png");
		margin: 0 0 0 0;
	}

	#products .products-area .inner .pro-list .pro-cosmetics a {
		background-image: url("../img/bg-products-cosmetics-sp.png");
	}

	#products .products-area .inner .pro-list .pro-beauty a {
		background-image: url("../img/bg-products-beauty-sp.png");
	}

	#products .products-area .inner .pro-list .l-size h4 {
		font-size: 2.2rem;
		padding: 15px 0 0;
	}

	#products .products-area .inner .pro-list .m-size h4 {
		font-size: 2.0rem;
		padding: 15px 0 0;
	}

	#products .products-area .inner .pro-list li .en {
		font-size: 1.0rem;
		padding: 5px 0 10px;
	}

	#products .products-area .inner .pro-list .l-size .txt {
		font-size: 1.6rem;
	}

	#products .products-area .inner .pro-list .m-size .txt {
		display: none;
	}

	#products .products-area .inner .att {
		width: 90%;
		height: auto;
		line-height: 1.5;
		padding: 20px 0;
	}

}

/* -----------------------------
	中カテゴリー一覧
-------------------------------- */

#products.p-category .pro-area {
	overflow: hidden;
	padding: 60px 0;
}

#products.p-category .pro-area .cate-box {
	float: left;
	position: static;
	width: 240px;
}

#products.p-category .pro-area .cate-box .h_search_area ul {
	position: static;
	right: auto;
	top: auto;
	padding: 0 0 20px;
}

#products.p-category .pro-area .cate-box .h_search_area input[type="text"] {
	width: 200px;
	font-size: 1.15rem;
	padding:10px 5px ;
}

#products.p-category .pro-area .cate-box {
	position: relative;
	width: 240px;
}

#products.p-category .pro-area .cate-box dl {
	padding: 0 0 30px;
}

#products.p-category .pro-area .cate-box dl a {
	display: block;
}

#products.p-category .pro-area .cate-box dl dt {
	border-bottom: #DCDCDC solid 1px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 10px;
}

#products.p-category .pro-area .cate-box dl dt a {
	padding: 5px;
	color: #245481;
}

#products.p-category .pro-area .cate-box dl dt a:hover {
	background: #f7fafb;
}

#products.p-category .pro-area .cate-box dl dd {
	font-size: 1.5rem;
	line-height: 1.5;
}

#products.p-category .pro-area .cate-box dl dd a {
	padding: 5px 0 5px 15px;
	position: relative;
}

#products.p-category .pro-area .cate-box dl dd a:hover {
	background: #f7fafb;
}

#products.p-category .pro-area .cate-box dl dd a::before {
	color: #999;
	content: "・";
	position: absolute;
	left: 0;
	top: 5px;
}

#products.p-category .pro-area .cate-box .side-txt {
	border: #DCDCDC solid 1px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 10px;
}

#products.p-category .pro-area .cate-box .side-txt a {
	padding: 15px;
	display: block;
	width: 100%;
	position: relative;
}
#products.p-category .pro-area .cate-box .side-txt a::after {
	position: absolute;
	display: inline-block;
	content: "\f105";
	font-family: FontAwesome;
	font-size: 1.6rem;
	color: #245481;
	right: 10px;
	top: 50%;
	transform: translate( 0 , -50%);
}
#products.p-category .pro-area .cate-box .side-txt a:hover {
	color: #245481;
	background: #f7fafb;
}

#products.p-category .pro-area .pro-box {
	float: right;
	width: 910px;
}

#products.p-category .pro-area .pro-box .txt-box {
	display: flex;
	justify-content: flex-start;
	padding: 0 0 30px;
}

#products.p-category .pro-area .pro-box .txt-box .cate {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.7;
	padding: 0 10px 0 0;
}

#products.p-category .pro-area .pro-box .txt-box .no {
	font-size: 1.6rem;
}

#products.p-category .pro-area .pro-box .txt-box .no span {
	font-size: 2.0rem;
	font-weight: bold;
}

#products.p-category .pro-area .pro-box .list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

#products.p-category .pro-area .pro-box .list li {
	width: 220px;
	margin: 0 10px 20px 0;
}

#products.p-category .pro-area .pro-box .list li:nth-of-type(4n) {
	margin: 0 0 20px 0;
}

#products.p-category .pro-area .pro-box .list li a {
	display: block;
	border: #DCDCDC solid 1px;
	padding: 15px 20px 20px;
	height: 100%;
}

#products.p-category .pro-area .pro-box .list li a:hover {
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
}

#products.p-category .pro-area .pro-box .list li a .pro-img {
	height: 150px;
	text-align: center;
	border-bottom: #DCDCDC solid 1px;
	padding: 0 0 15px;
	margin: 0 0 15px;
}

#products.p-category .pro-area .pro-box .list li a .pro-img img {
	height: 100%;
}

#products.p-category .pro-area .pro-box .list li a .pro-cate {
	font-size: 1.2rem;
	display: inline-block;
	padding: 0 10px 5px 0;
}

#products.p-category .pro-area .pro-box .list li a .pro-zero {
	font-size: 1.2rem;
	display: inline-block;
	position: relative;
	margin: 0 0 5px;
	padding: 0 7px;
	background: #00b050;
	color: #fff;
}

#products.p-category .pro-area .pro-box .list li a .pro-name {
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 2px 0 5px;
}

#products.p-category .pro-area .pro-box .list li a .pro-price {
	font-size: 1.2rem;
	line-height: 1.5;
}

#products.p-category .pro-area .pro-box .list li a .pro-price em {
	font-weight: bold;
	font-size: 1.5rem;
}


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

	#products.p-category .pro-area {
		padding: 30px 20px 0;
	}

	#products.p-category .pro-area .cate-box {
		width: 100%;
		float: none;
	}

	#products.p-category .pro-area .cate-box .h_search_area {
		display: none;
	}

	#products.p-category .pro-area .cate-box {
		width: 100%;
		float: none;
	}

	#products.p-category .pro-area .cate-box dl {
		padding: 0;
		border: #666 solid 1px;
		margin: 0 0 30px;
	}

	#products.p-category .pro-area .cate-box dl dt {
		font-size: 1.6rem;
		margin: 0;
		border-bottom: none;
		padding: 10px 15px;
		cursor: pointer;
	}

	#products.p-category .pro-area .cate-box dl dt a {
		padding: 3px;
	}

	#products.p-category .pro-area .cate-box dl dt a:hover {
		background: none;
	}

	#products.p-category .pro-area .cate-box dl dd {
		font-size: 1.6rem;
		padding: 0 10px 5px;
	}

	#products.p-category .pro-area .cate-box dl dd a:hover {
		background: none;
	}

	#products.p-category .pro-area .cate-box .side-txt {
		font-size: 1.6rem;
		margin: 0 0 5px;
	}

	#products.p-category .pro-area .cate-box .side-txt a:hover {
		background: none;
		color: #333;
	}

	#products.p-category .pro-area .pro-box {
		width: 100%;
		float: none;
	}

	#products.p-category .pro-area .pro-box.search-box {
		float: none;
	}

	#products.p-category .pro-area .pro-box .txt-box {
		padding: 0 0 15px;
	}

	#products.p-category .pro-area .pro-box .txt-box .cate {
		font-size: 1.8rem;
		padding: 0 10px 0 0;
	}

	#products.p-category .pro-area .pro-box .txt-box .no {
		font-size: 1.5rem;
	}

	#products.p-category .pro-area .pro-box .txt-box .no span {
		font-size: 1.8rem;
	}

	#products.p-category .pro-area .pro-box .list li {
		width: 48%;
		margin: 0 4% 20px 0;
	}

	#products.p-category .pro-area .pro-box .list li:nth-of-type(2n) {
		margin: 0 0 20px 0;
	}

	#products.p-category .pro-area .pro-box .list li a {
		padding: 10px 10px 10px;
		position: relative;
	}

	#products.p-category .pro-area .pro-box .list li a:hover {
		box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
	}

	#products.p-category .pro-area .pro-box .list li a .pro-img {
		height: 100px;
		padding: 0 0 10px;
		margin: 0 0 10px;
	}

	#products.p-category .pro-area .pro-box .list li a .pro-cate {
		padding: 0 0 5px 0;
	}

	#products.p-category .pro-area .pro-box .list li a .pro-zero {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}

	#products.p-category .pro-area .pro-box .list li a .pro-name {
		font-size: 1.5rem;
		line-height: 1.5;
		font-weight: bold;
		margin: 0 0 5px;
	}

	#products.p-category .pro-area .pro-box .list li a .pro-price {
		font-size: 1.1rem;
	}
	#products.p-category .pro-area .pro-box .list li a .pro-price em {
		font-size: 1.4rem;
	}


}
/* -----------------------------
	詳細（top-area）
-------------------------------- */

#products.pro-detail .top-area.inner {
	max-width: 1000px;
	min-width: 1000px;
	padding: 50px 0 70px;
	display: flex;
	justify-content: space-between;
}

#products.pro-detail .top-area.inner .mv-area {
	width: 400px;
}

#products.pro-detail .top-area.inner .info-area {
	width: 550px;
}

#products.pro-detail .top-area.inner .info-area .pro-cate {
	font-size: 1.2rem;
	padding: 0 0 15px;
}

#products.pro-detail .top-area.inner .info-area .pro-cate .line {
	padding: 0 0 0 15px;
	margin: 0 0 0 15px;
	position: relative;
}

#products.pro-detail .top-area.inner .info-area .pro-cate .line::before {
	content: "";
	width: 1px;
	height: 12px;
	background: #ccc;
	position: absolute;
	left: 0;
	top:0;
}

#products.pro-detail .top-area.inner .info-area .pro-cate .fa {
	padding: 0 10px;
}

#products.pro-detail .top-area.inner .info-area .pro-name {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.3;
	padding: 0 0 15px;
}

#products.pro-detail .top-area.inner .info-area .pro-copy {
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	color: #245481;
	padding: 0 0 20px;
}

#products.pro-detail .top-area.inner .info-area .pro-sym {
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	padding: 0 0 20px;
}

#products.pro-detail .top-area.inner .info-area .pro-sym li {
	background: #FAFAFA;
	border: #DCDCDC solid 1px;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: center;
	min-width: 110px;
	margin: 0 10px 10px 0;
	padding: 4px 15px;
}

#products.pro-detail .top-area.inner .info-area .pro-txt {
	border-top: #DCDCDC solid 1px;
	border-bottom: #DCDCDC solid 1px;
	padding: 25px 0 15px;
	margin: 0 0 32px;
}

#products.pro-detail .top-area.inner .info-area .pro-txt p {
	padding: 0 0 10px;
}

#products.pro-detail .top-area.inner .info-area .pro-price {
	font-size: 2.0rem;
	padding: 0 0 25px;
}

#products.pro-detail .top-area.inner .info-area .pro-cart {
	padding: 0 0 30px;

	/* display: none; */
}

#products.pro-detail .top-area.inner .info-area .pro-price em {
	font-size: 3.0rem;
	font-weight: bold;
}

#products.pro-detail .top-area.inner .info-area .pro-cart select {
	border: #DCDCDC solid 1px;
	width: 90px;
	height: 60px;
	border-radius: 5px;
	font-size: 1.6rem;
	padding: 5px;
	margin: 0 15px 0 0;
}

#products.pro-detail .top-area.inner .info-area .pro-cart input[type="submit"].cart {
	border: none;
	/*
	background: #ffe957;
	*/
	background: #fd8861;
	color: #fff;
	height: 60px;
	text-align: center;
    font-family: 'Noto Sans JP';
	font-size: 2.0rem;
	font-weight: bold;
	width: 340px;
	border-radius: 50px;
    transition: 0.5s;
	cursor: pointer;
	position: relative;
}

#products.pro-detail .top-area.inner .info-area .pro-cart input[type="submit"].cart:hover {
	box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.1);
}

#products.pro-detail .top-area.inner .info-area .pro-att p {
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 0 0 5px;
}

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

	#products.pro-detail .top-area.inner {
		max-width: 100%;
		min-width: 100%;
		padding: 40px 20px 30px;
		display: block;
		justify-content: flex-start;
	}

	#products.pro-detail .top-area.inner .mv-area {
		width: 100%;
		padding: 0 0 30px;
	}

	#products.pro-detail .top-area.inner .info-area {
		width: 100%;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cate {
		padding: 0 0 7px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cate .line {
		padding: 0 0 0 7px;
		margin: 0 0 0 7px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cate .fa {
		padding: 0 7px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-name {
		font-size: 2.2rem;
		padding: 0 0 10px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-copy {
		font-size: 1.8rem;
		padding: 0 0 20px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-sym {
		padding: 0 0 15px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-sym li {
		font-size: 1.2rem;
		margin: 0 7px 7px 0;
		padding: 4px 10px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-txt {
		padding: 20px 0 10px;
		margin: 0 0 27px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-txt p {
		font-size: 1.5rem;
		padding: 0 0 5px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-price {
		font-size: 1.8rem;
		padding: 0 0 20px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cart {
		padding: 0 0 25px;
	}

	#products.pro-detail .top-area.inner .info-area .pro-price em {
		font-size: 2.6rem;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cart select {
		width: 100%;
		height: 50px;
		margin: 0 auto 20px;
		max-width: 400px;
		display: block;
	}

	#products.pro-detail .top-area.inner .info-area .pro-cart input[type="submit"].cart {
		height: 60px;
		font-size: 1.8rem;
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		display: block;
	}

}


/* -----------------------------
	詳細（under-area）
-------------------------------- */

#products.pro-detail .under-area {
	background: #f7fafb;
	padding: 70px 0 40px;
}

#products.pro-detail .under-area .inner {
	max-width: 1000px;
	min-width: 1000px;
}

#products.pro-detail .under-area .c-title {
	font-weight: bold;
	font-size: 2rem;
	color: #245481;
	border:none;
	border-bottom: #245481 solid 1px;
	line-height: 1.5;
	padding: 0 0 5px;
	margin: 0 0 15px;
}

#products.pro-detail .under-area .c-title::before {
	display: none;
}

#products.pro-detail .under-area .inner > section {
	margin: 0 0 50px;
	line-height: 1.7;
}

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

	/* under-area */
	#products.pro-detail .under-area {
		padding: 30px 20px 10px;
	}

	#products.pro-detail .under-area .inner {
		max-width: 100%;
		min-width: 100%;
	}

	#products.pro-detail .under-area .c-title {
		font-size: 1.8rem;
		margin: 0 0 10px;
	}

	#products.pro-detail .under-area .inner > section {
		margin: 0 0 30px;
	}

}

/*詳細（　detail-contents　）*/
#products .detail-contents {
	line-height: 1.8;
	padding: 0 0 50px !important;
}

/* pタグ */
#products .detail-contents p {
	margin-bottom: 1.5em;
	font-size: 1.6rem;
}

/* 見出し系 */
#products .detail-contents h1,
#products .detail-contents h2,
#products .detail-contents h3,
#products .detail-contents h4{
	color: #333;
	font-weight: bold;
	line-height: 1.5;
}

#products .detail-contents h1 {
	background: #203C7D;
	border-radius: 6px;
	color: #fff;
	font-size: 2.6rem;
	margin: 40px 0 20px 0;
	padding: 15px 30px;
}

#products .detail-contents h2 {
    border-bottom: 3px #203C7D dotted;
	font-size: 2.4rem;
	margin: 40px 0 30px 0;
	padding: 0 0 10px;
}

#products .detail-contents h3 {
	border-radius: 6px;
    border: 2px #203C7D solid;
	font-size: 2.2rem;
	margin: 40px 0 30px 0;
	padding: 15px 30px;
}

#products .detail-contents h4 {
	font-size: 2.0rem;
	margin: 30px 0 20px 0;
	padding: 0 0 0 16px;
    position: relative;
}

#products .detail-contents h4::before {
	background: #203C7D;
	border-radius: 3px;
	content: '';
	display: block;
	height: calc(100% - 10px);
	left: 0;
	position: absolute;
	top: 5px;
	width: 4px;
}

#products .detail-contents img{
	display: block;
	height: auto;
	max-width: 790px;
}

#products .detail-contents a:link{
	color: red;
	display: inline-block;
}

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

	#products .detail-contents {
		padding: 0 0 30px !important;
	}

	#products .detail-contents h1 {
		margin: 30px 0 10px 0;
		font-size: 2.2rem;
	}

	#products .detail-contents h1 {
		/*
		margin: 40px 0 20px 0;
		font-size: 2.6rem;
		color: #e1002a;
		*/
		padding: 15px;
		margin: 30px 0 10px 0;
		font-size: 2.2rem;
	}

	#products .detail-contents h2 {
		margin: 30px 0 20px 0;
		padding: 0 0 8px;
		font-size: 2.0rem;
	}

	#products .detail-contents h3 {
		margin: 30px 0 20px 0;
		padding: 15px 15px;
		font-size: 1.8rem;
	}

	#products .detail-contents h4 {
		margin: 20px 0 10px 0;
		padding: 0 0 0 18px;
		font-size: 1.6rem;
	}

	#products .detail-contents h4::before {
		top: 5px;
		height: calc(100% - 10px);
	}

	#products .detail-contents img{
		float: none;
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
		text-align: center;
		height: auto;
		display: block;
	}
}

/* -----------------------------
	詳細（rel-area）
-------------------------------- */

#products .rel-area {
	padding: 70px 0 80px;
	max-width: 1000px;
	min-width: 1000px;
}

#products .rel-area h3 {
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	padding: 0 0 30px;
}

#products .rel-area li {
	width: 240px;
	margin: 0 13px 0 0;
	text-align: center;
}

#products .rel-area li a {
	width: 100%;
	display: block;
}

#products .rel-area li a img {
	/*
	border: #DCDCDC solid 1px;
	padding: 20px;
	*/
	padding: 10px 10px 5px;
	width: 100%;
}

#products .rel-area li a h4 {
	padding: 15px 0 0;
	line-height: 1.5;
}

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

	#products .rel-area {
		padding: 40px 0 35px;
		max-width: 100%;
		min-width: 100%;
	}

	#products .rel-area h3 {
		font-size: 1.8rem;
		padding: 0 0 20px;
	}

	#products .rel-area li {
		width: 160px;
		margin: 0 20px 0 0;
	}

	#products .rel-area li a img {
		padding: 10px 10px 0;
	}

	#products .rel-area li a h4 {
		font-size: 1.4rem;
		padding: 10px 0 0;
	}

}


/* -----------------------------
	slick
-------------------------------- */
#products.pro-detail .top-area .mv-area .slick-slide {
	width: 100%;
	height: 400px;
	background: #fff;
	box-sizing: border-box;
	position: relative;
}

#products.pro-detail .mv-area .slick-slide img {
	width: auto;
	height: auto;
	/*max-width: 600px;*/
	max-height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
	/*padding: 0 30px;*/
}

#products.pro-detail .mv-area .slick-dots {
	position: static;
	margin-top: 20px;
}

#products.pro-detail .mv-area .slick-dots li {
	width: 80px;
	margin: 0 0 0 10px;
	background: #fff;
	height: 80px;
	position: relative;
}

#products.pro-detail .mv-area .slick-dots li:first-child {
	margin: 0;
}

#products.pro-detail .mv-area .slick-dots li img {
	width: 100%;
	cursor: pointer;
	transition: .2s ease-in-out;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

#products.pro-detail .mv-area .slick-dots .slick-active img,
#products.pro-detail .mv-area .slick-dots li:hover img {
	opacity: .6;
}

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

	#products.pro-detail .top-area .mv-area .slick-slide {
		height: 220px;
	}

	#products.pro-detail .mv-area .slick-dots li:nth-child(3n+1) {
		margin: 0;
	}

	#products.pro-detail .mv-area .slick-slide img {
		max-height: 100%;
	}

}
/* -----------------------------
	ページタイトル
-------------------------------- */

#products .pro-title-area {
	background-position: right 880px top 70px , right center ,left center;
	background-repeat: no-repeat , no-repeat ,repeat;
	background-size: auto;
	height: 340px;
	position: relative;
}

#products .pro-title-area.pro-reibai {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-reibai.jpg") ,
		url("../img/dot-blue.png");
	background-color: #f7fafb;
}

#products .pro-title-area.pro-chinese {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-chinese.jpg") ,
		url("../img/dot-brown.png");
	background-color: #fff9f4;
}

#products .pro-title-area.pro-drug {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-drug.jpg") ,
		url("../img/dot-purple.png");
	background-color: #f9faff;
}

#products .pro-title-area.pro-supplement {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-supplement.jpg") ,
		url("../img/dot-yellow.png");
	background-color: #fffefc;
}

#products .pro-title-area.pro-cosmetics {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-cosmetics.jpg") ,
		url("../img/dot-mintgreen.png");
	background-color: #f4ffff;
}
#products .pro-title-area.pro-beauty {
	background-image: url("../img/pro-title-area-leaf.png") ,
		url("../img/bg-pro-title-beauty.jpg") ,
		url("../img/dot-pink.png");
	background-color: #fffcff;
}

#products .pro-title-area::before{
	content: "";
	background: #fff;
	display: block;
	width: 200px;
	height: 340px;
	position: absolute;
	left: 0;
	bottom: 0;
}

#products .pro-title-area .box {
	display: flex;
	align-items: center;
	background: url("../img/bg-title-kazari.png") no-repeat left 200px top;
	padding: 0 0 0 150px;
	position: relative;
	z-index: 5;
	height: 340px;
}

#products .pro-title-area .box h2 {
	font-family: 'Noto Sans JP';
	font-size: 4.0rem;
	letter-spacing: 0.1em;
	padding: 0 0 60px;
}

#products .pro-title-area.pro-reibai h2 span {
	color: #5ca7d2;
}

#products .pro-title-area.pro-chinese h2 span {
	color: #bd7b43;
}

#products .pro-title-area.pro-drug h2 span {
	color: #767bd4;
}

#products .pro-title-area.pro-supplement h2 span {
	color: #fcb500;
}

#products .pro-title-area.pro-cosmetics h2 span {
	color: #57bfbc;
}
#products .pro-title-area.pro-beauty h2 span {
	color: #f6adf7;
}

#products .pro-title-area .box h2 span {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.2em;
}

#products .pro-title-area .box .txt {
	font-size: 1.8rem;
}


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

	#products .pro-title-area {
		background-position: center top ;
		background-repeat: no-repeat;
		background-size: 100% auto;
		height: auto;
	}

	#products .pro-title-area.pro-reibai {
		background-image: url("../img/bg-pro-title-reibai.jpg") ;
	}

	#products .pro-title-area.pro-chinese {
		background-image: url("../img/bg-pro-title-chinese.jpg")
	}

	#products .pro-title-area.pro-drug {
		background-image: url("../img/bg-pro-title-drug.jpg")
	}

	#products .pro-title-area.pro-supplement {
		background-image: url("../img/bg-pro-title-supplement.jpg")
	}

	#products .pro-title-area.pro-cosmetics {
		background-image: url("../img/bg-pro-title-cosmetics.jpg")
	}

	#products .pro-title-area.pro-beauty {
		background-image: url("../img/bg-pro-title-beauty.jpg") ;
	}

	#products .pro-title-area::before{
		display: none;
	}

	#products .pro-title-area .box {
		display: block;
		align-items:flex-start;
		background:none;
		position: static;
		z-index: auto;
		height: auto;
		padding: 150px 0 0;
	}

	#products .pro-title-area .box div {
		background-position: left center ;
		background-size: 10px auto;
		padding: 20px 10px;
	}

	#products .pro-title-area.pro-reibai .box div {
		background-image: url("../img/dot-blue.png");
		background-color: #f7fafb;
	}

	#products .pro-title-area.pro-chinese .box div {
		background-image:url("../img/dot-brown.png");
		background-color: #fff9f4;
	}

	#products .pro-title-area.pro-drug .box div {
		background-image:url("../img/dot-purple.png");
		background-color: #f9faff;
	}

	#products .pro-title-area.pro-supplement .box div {
		background-image: url("../img/dot-yellow.png");
		background-color: #fffefc;
	}

	#products .pro-title-area.pro-cosmetics .box div {
		background-image:url("../img/dot-mintgreen.png");
		background-color: #f4ffff;
	}
	#products .pro-title-area.pro-beauty .box div {
		background-image:url("../img/dot-pink.png");
		background-color: #fffcff;
	}
	#products .pro-title-area .box h2 {
		font-size: 2.4rem;
		padding: 0 0 10px;
		text-align: center;
	}

	#products .pro-title-area .box h2 span {
		font-size: 1.2rem;
	}

	#products .pro-title-area .box .txt {
		font-size: 1.6rem;
		text-align: center;
	}
}