/*==============================*/
/* メインスライダー */
/*==============================*/
/* 装飾 */
.container{ overflow: hidden; }
.container .bx-pager { display: none; }
.container .bx-wrapper .bx-viewport { box-shadow: none; border: none; }
.bx-wrapper{ margin-bottom: 0; width: 100%;}
.slide_body div.slide{
	height: 0;
	padding-top: 25%;
	background-position: center center;
	background-size: cover;
}
.slide_body div.slide01{ background-image: url("/common/img/slider/slide-01.png") ; background-repeat: no-repeat;}
.slide_body div.slide02{ background-image: url("/common/img/slider/slide-02.png") ; background-repeat: no-repeat;}
.slide_body div.slide03{ background-image: url("/common/img/slider/slide-03.png") ; background-repeat: no-repeat;}
.slide_body div.slide04{ background-image: url("/common/img/slider/slide-04.png") ; background-repeat: no-repeat;}

.container .bx-prev { display: none; }
.container .bx-next { display: none; }

	@media (max-width: 600px) {
		.slide_body div.slide{
			height: 40px;
			padding-top: 90%;
		}
		.slide_body div.slide01{ background-image: url("/common/img/slider/slide-01-sp.png") ; background-repeat: no-repeat;}
		.slide_body div.slide02{ background-image: url("/common/img/slider/slide-02-sp.png") ; background-repeat: no-repeat;}
		.slide_body div.slide03{ background-image: url("/common/img/slider/slide-03-sp.png") ; background-repeat: no-repeat;}
		.slide_body div.slide04{ background-image: url("/common/img/slider/slide-04-sp.png") ; background-repeat: no-repeat;}
	}


/*==============================*/
/*  */
/*==============================*/
div.mainSlider{
	position: relative;
	margin-bottom: 80px;
}
div.mainSlider div.slideContent{
	position: absolute; top: 50%; right: calc( calc( 100% - 1200px ) / 2 );
	content: "";
	padding: 56px 40px;
	background: #fff;
	border-radius: 10px;
	font-family: 'Noto Sans Japanese', sans-serif;
	margin-top: -95px;
}
div.mainSlider div.slideContent h2{
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
div.mainSlider div.slideContent p{
	text-align: center;
	font-size: 16px;
	font-weight: 400;
}
	@media (max-width: 1200px) {
		div.mainSlider div.slideContent{
			position: absolute; top: 50%; right: 24px;
		}
	}

	@media (max-width: 600px) {
		div.mainSlider{ margin-bottom: 40px;}
		div.mainSlider div.slideContent{ display: none;}
	}


/*==============================*/
/* 背景 */
/*==============================*/
.bg_block{
	padding: 50px 0;
	background: url(/common/img/share/bg_block.jpg);
}

/*==============================*/
/* 取り扱い一覧　リンク位置調整 */
/*==============================*/
@media (max-width: 600px) {
	#productList{
		margin-top: -104px; 
		padding-top: 104px;
	}
}


/*==============================*/
/* catch */
/*==============================*/
div.catchcopy{
	margin-bottom: 80px;
	text-align: center;
}
div.catchcopy h2{
	margin-bottom: 20px;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Noto Sans Japanese', sans-serif;
}
div.catchcopy h3{
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3em;
	font-family: 'Noto Sans Japanese', sans-serif;
}

	/* ======= SP =======*/
	@media (max-width: 600px) {
		div.catchcopy{
			margin-bottom: 40px;
			text-align: center;
		}
		div.catchcopy h2{
			margin-bottom: 16px;
			font-size: 20px;
			line-height: 1.3em;
		}
		div.catchcopy h3{
			font-size: 17px;
		}
	}


/*==============================*/
/* 利用シーン */
/*==============================*/
div.topScene{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
	margin-bottom: 80px;
	gap: 12px 12px;
}
div.topScene dl:nth-child(1),
div.topScene dl:nth-child(2){ width: calc( calc( 100% - calc( 12px * 1 ) ) / 2 );}
div.topScene dl:nth-child(3),
div.topScene dl:nth-child(4),
div.topScene dl:nth-child(5),
div.topScene dl:nth-child(6){ width: calc( calc( 100% - calc( 12px * 3 ) ) / 4 );}

div.topScene dl{
	display: flex; display: -webkit-flex;
	flex-direction: column; -webkit-flex-direction: column;
}
div.topScene dl dt{
	order: 2;
	text-align: center;
	font-weight: 500;
	line-height: 1.3em;
	font-family: 'Noto Sans Japanese', sans-serif;
}

div.topScene dl dd{
	order: 1;
	margin-bottom: 8px;
}

	/* ======= SP =======*/
	@media (max-width: 600px) {
		div.topScene{
			display: flex; display: -webkit-flex;
			flex-wrap: wrap; -webkit-flex-wrap: wrap;
			margin-bottom: 80px;
			gap: 12px 12px;
		}
		div.topScene dl:nth-child(1),
		div.topScene dl:nth-child(2){ width: 100%;}
		div.topScene dl:nth-child(3),
		div.topScene dl:nth-child(4),
		div.topScene dl:nth-child(5),
		div.topScene dl:nth-child(6){ width: calc( calc( 100% - calc( 12px * 1 ) ) / 2 );}
	}


/*==============================*/
/* 特徴 */
/*==============================*/
@media (min-width: 600px) {
.characteristic{
}
.characteristic ul{
	margin: 0 auto 50px auto;
	padding-left: 80px;
	width: 650px;
	position: relative;
	counter-reset: wpp-ranking;
}
.characteristic ul li{
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #777;
	padding-left: 40px;
	margin-bottom: 20px;
}
.characteristic ul li:before {
	position: absolute;
	left: 70px;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	width: 30px;
	height: 28px;
	background: #009989;
	text-align: center;
	border-radius: 30px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	padding: 2px 0 0px 0;
}
}
@media (max-width: 600px) {
.characteristic{
}
.characteristic ul{
	margin: 0 auto 50px auto;
	padding-left: 40px;
	position: relative;
	counter-reset: wpp-ranking;
}
.characteristic ul li{
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #777;
	margin-bottom: 20px;
}
.characteristic ul li:before {
	position: absolute;
	left: 0px;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	width: 25px;
	height: 23px;
	background: #009989;
	text-align: center;
	border-radius: 30px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	padding: 2px 0 0px 0;
}
}


/*==============================*/
/* stylistMethod */
/*==============================*/
div.stylistMethod{
	padding: 48px 80px 40px 80px;
	background: #fae7c9;
}
div.stylistMethod h2{
	position: relative;
	margin-bottom: 28px;
	padding-bottom: 12px;
	text-align: center;
	color: #3c3b36;
	font-size: 32px;
	font-weight: bold;
	font-family: 'Noto Sans Japanese', sans-serif;
}
div.stylistMethod h2::before{
	position: absolute; bottom: 0; left: 50%;
	content: "";
	width: 200px;
	height: 2px;
	background: #0e9b6d; /* Old browsers */
	background: -moz-linear-gradient(left,  #0e9b6d 0%, #4ac38d 50%, #8ff5b8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #0e9b6d 0%,#4ac38d 50%,#8ff5b8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #0e9b6d 0%,#4ac38d 50%,#8ff5b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e9b6d', endColorstr='#8ff5b8',GradientType=1 ); /* IE6-9 */
	margin-left: -100px;
}

div.stylistMethod p{
	text-align: center;
}
div.stylistMethod p.textBold{
	font-weight: bold;
	font-family: 'Noto Sans Japanese', sans-serif;
}


div.stylistMethod ul{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
}
div.stylistMethod ul li{
	width: calc(50% - 20px);
}
div.stylistMethod ul li a{
	display: block;
	padding: 24px 0 36px 0;
	background: #fff;
	text-align: center;
	font-size: 32px;
	font-weight: 300;
	font-family: 'Noto Sans Japanese', sans-serif;
}
div.stylistMethod ul li:first-child a{ border: 8px solid #83d1b7; color: #02979e; }
div.stylistMethod ul li:last-child a{ border: 8px solid #FFCF8B; color: #ff960a;}

div.stylistMethod ul li:first-child a:hover{ border: 8px solid #02979e; }
div.stylistMethod ul li:last-child a:hover{ border: 8px solid #ff960a;}

div.stylistMethod ul li a small{
	display: block;
	margin-bottom: 14px;
	color: #434343;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3em;
}
div.stylistMethod ul li a span{
	font-weight: bold;
}

/* ======= SP =======*/
@media (max-width: 600px) {
	div.stylistMethod{ padding: 48px 24px 40px 24px;}
	div.stylistMethod h2{
		margin-bottom: 24px;
		padding-bottom: 12px;
		font-size: 26px;
	}
	div.stylistMethod h2::before{
		position: absolute; bottom: 0; left: 50%;
		width: 160px;
		margin-left: -80px;
	}
	
	div.stylistMethod ul{ flex-direction: column; -webkit-flex-direction: column;}
	div.stylistMethod ul li{ width: 100%;}
	div.stylistMethod ul li:not(:last-child){ margin-bottom: 12px;}
	div.stylistMethod ul li a{
		padding: 24px 0 32px 0;
		font-size: 26px;
	}

	div.stylistMethod ul li a small{
		margin-bottom: 14px;
		font-size: 14px;
	}
	div.stylistMethod ul li a span{
		display: block;
		margin-bottom: 8px;
	}
}