/*****	PRODUCTS		*****/

.clProductsTitlebox{
	height: 310px;
	width: 100%;
	max-width: 1600px;
	margin: auto;
	background-image:
	url("../img/products/products-top.jpg");
	background-size:  cover;
	background-position: 50% 70%;
	background-repeat: no-repeat;
	  	
	.title_img{
		width: 100%;
		position: relative;	
		.clProductsTitle{  
    			width: 100%;
    		h2{
    			font: italic normal bold 80px/128px Roboto;
    			letter-spacing: 1.6px;
    			color: #FFFFFF;
    			margin: 0;
    			line-height: 80px;
    			margin: 50px 0 0;
    			text-shadow: 1px 1px 15px #000000b3;
    		}

    	 	p{
    			font:normal normal bold Arial;
    			font-size: 18px;
    			letter-spacing: 0px;
				color: #FFFFFF;
				text-shadow: 1px 1px 15px #000000b3;
				padding: 0 0 0 10px;
    		}
    	}
    }
}

.clProductscontainer{
	padding:40px 0px;
	.clProductsBlock1,.clProductsBlock2,.clProductsBlock3,.clProductsBlock4{
		width: 100%;
    	display: flex;
    	display: -webkit-flex;
    	h2.clSPonly{
    		padding:0px 15px;
			text-align:left;
		}
    	h2.clSPonly:before{
    		content:url("../img/common/icon_h2.svg");
    		margin-right:10px;
    	}
		.clProductsimg{
    		width: 50%;
    		padding: 30px;
    		img{max-width:100%;}	
		}
		.clProductstext{
    		width: 50%;
    		padding: 30px;
    		text-align:center;
			h2{
				margin-bottom:24px;
				text-align:left;
			}
    		h2:before{
    			content:url("../img/common/icon_h2.svg");
    			margin-right:10px;
    		}
			p{
				font-size:18px;
				line-height:1.8;
				text-align:left;
			}
			img{
				margin: 0 auto;
				max-height:180px;
				max-width: 100%;
			}

			.Btnbox{
		    	display: flex;
		    	display: -webkit-flex;
		    	margin:20px auto 0px;
		    	a{
		    		font-size:20px;
		    		color:#fff !important;
		    		padding:20px 0px;
		    		display:block;
		    	}
		    	.clBtnBsite,.clBtnYoutube{
		    		width: 220px;
    				text-align: center;

    				position:relative;
		    	}
				.clBtnBsite{
					background: transparent linear-gradient(195deg, #434343 0%, #000000 100%) 0% 0% no-repeat padding-box;
					margin-right: 20px;
				}
				.clBtnBsite:hover{
					opacity: 0.8;
				}
				.clBtnYoutube{
					background: transparent linear-gradient(195deg, #CC151D 0%, #910C12 100%) 0% 0% no-repeat padding-box;
				}
				.clBtnYoutube:hover{
					opacity: 0.8;
				}
				i{
					position:absolute;
					right: 10px;
				    top: 25px;
				    color:#fff;
				}
			}
		}    	
    }
	.clProductsBlock2,.clProductsBlock4{
		-webkit-flex-direction: row-reverse;
    	flex-direction: row-reverse;	
	}
	.clProductsBlock1{
	}

}

/*****		SPECIAL   	*****/

.clSpecialhead{
	height: 310px;
	width: 100%;
	max-width: 1600px;
	margin: auto;
	background-image:url("../img/special/special-top.jpg");
  	background-size:  cover;
  	background-position: 50% 70%;
  	background-repeat: no-repeat;
		  	
	.title_img{
		width: 100%;
		position: relative;	
		.clSpecialTitle{  			
	    	width: 100%;
    		h2{
    			font: italic normal bold 80px/128px Roboto;
    			letter-spacing: 1.6px;
    			color: #FFFFFF;
    			margin: 0;
    			line-height: 80px;
    			margin: 50px 0 0;
    			text-shadow: 1px 1px 15px #000000b3;
    		}
    	 	p{
    			font:normal normal bold Arial;
    			font-size: 18px;
    			letter-spacing: 0px;
				color: #FFFFFF;
				text-shadow: 1px 1px 15px #000000b3;
				padding: 0 0 0 10px;
    		}
		}
	}
}	


.clSpecial,.clSpecial1{

	background:url("../img/top/bg02.svg");
	background-repeat:no-repeat;
	background-size:auto;
	background-position:left bottom;
  	text-align: right;
  	margin-top:80px;
  	.clSpecialBlockInner{
		position:relative;
		width:100%;
		position: relative;
		margin-right: 0;
		margin-left: auto;
		img{width:100%;}

    	.clTxtBlock{
		    position: absolute;
		    text-align:center;
		    p,h3{color:#fff;}
		    top: -40px;
		    left:100px;
    	}
		.clTxtBlockInner{
		    position: relative;
		    z-index: 1;
		    text-align: center;
		    margin: 0 auto;
		    padding:30px;
		    width: 24em;

		}
		.clTxtBlockInner::before{
		    transform: skewX(-12deg);
		    content: "";					/*ボックスを作る*/
		    position: absolute;		/*ポジションで中央に配置*/
		    top: 0; bottom: 0; left: 0; right: 0;
		    z-index: -1;					/* 親要素の後ろに来るように-1 */
		    background: transparent linear-gradient(195deg, #434343 0%, #000000 100%) 0% 0% no-repeat padding-box;
		}
    	a:hover{img{opacitey:0.9;}}
	}
}
.clSpecial1{

}
.clizumo,.clstar{
	margin: 50px 0;
	h2{
		font-size:30px;
	}
	h2:before{
		content:url("../img/common/icon_h2.svg");
		margin-right:10px;
	}	
	p{
		font-size:18px;
		line-height:1.8;
	}
}

.spImagewrap{
	background-image:url("../img/special/special_back.svg");
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.clstarbox{
	width:100%;
   	display: flex;
	display: -webkit-flex;
	margin: 50px 0;
	align-items: flex-start;
}
.clstarbox.clreverse{
	-webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.clstartext, .clstarimg{
	display: block;
	width: 50%;
	padding: 20px;
}
.clstarimg img{
	width:100%;
}
.spImgwrap1{
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
}

.spimgcontainer2{
	background-image:url("../img/special/special_back.svg");
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 25px 0;
	}
.spimgcontainer1, .spimgcontainer3{
	display: flex;
	display: -webkit-flex;
	.spimgbox{
			padding: 15px;
		 .spimgtext{
			p{
				font:normal normal normal 16px/26px Arial;
				letter-spacing: 0px;
			}
			.area1:before{
				content: '1';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
			.area2:before{
				content: '2';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
			.area3:before{
				content: '3';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
			.area4:before{
				content: '4';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
			.area5:before{
				content: '5';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
			.area6:before{
				content: '6';
				color: #FFFFFF;
				background-color: #CC151D;
				text-align: center;
				font: italic normal bold 16px/30px Roboto;
				letter-spacing: 0.36px;
				color: #FFFFFF;
				padding: 3px 8px;
				margin: 0 5px 0 0;
			}
		 }
	}
}


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

/****		Products		****/
	
	.clProductsTitlebox{	
		.title_img{
			.clProductsTitle{  
	    			width: 100%;
	    		h2{
	    			font-size: 60px;
	    		}
	    	 	p{
	    			font-size: 16px;
	    		}
	    	}
	    }
	}

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


/****		SPECIAL	****/

	.clizumo{
		.clizumotext{
			padding: 15px 0px;	
		}
	}

	.clstarbox{
		width:100%;
	   	display: block;
		margin: 30px 0;	
	}

	.clstartext, .clstarimg{
		display: block;
		width: 100%;
		padding: 15px 0px;
	}

}

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

/****		Products		****/
	
	.clProductsTitlebox{	
		.title_img{
			.clProductsTitle{  
	    			width: 100%;
	    		h2{
				    font: italic normal bold 42px/74px Roboto;
	    		}
	    	 	p{
				    font: normal normal bold 16px/25px Arial;
	    		}
	    	}
	    }
	}

	.clProductscontainer{
		padding:20px 0px;
		.clProductsBlock1,.clProductsBlock2,.clProductsBlock3,.clProductsBlock4{
			width: 100%;
	    	display: block;
			.clProductsimg{
	    		width: 100%;
	    		padding: 15px;		
			}
			.clProductstext{
	    		width: 100%;
	    		padding: 15px;
				h2{}
				p{}
				img{
					width: 100%;
					height: 100%;
				}
				.Btnbox{
					.clBtnMoremini{}
				}
			}
	    }

		.clProductsBlock1{

		}
	}

	.clSpecialhead{			  	
		.title_img{
			.clSpecialTitle{  			
	    		h2{
	    			font: italic normal bold 42px/44px Roboto;
	    		}
	    	 	p{
	    			font: normal normal bold 16px/25px Arial;
	    		}
			}
		}
	}	

	.clSpecial,.clSpecial1{
		background-image:none;
		.clSpecialBlockInner{
			max-width:100%;
			img{max-height:200px;}
			.clTxtBlock{
				top:-60px;
				bottom:auto;
				right: auto;
				left: 20px;
				.clTxtBlockInner{
					text-align:left;
					padding:10px 20px;
					width:20em;
					max-width: 100%;
					p{margin-bottom:5px;}
					h3{font-size:20px;margin:0px auto;}
				}
			}
		}
	}

	.clizumo,.clstar{
		margin: 40px 0;
		h2{
			font-size:22px;
		}
		p{
			font-size:15px;
			line-height:1.5;
		}
	}



/****		SPECIAL	****/

	.spImgwrap1{
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.spimgcontainer1{
			order: 2;
	}
	.spimgcontainer2{				
			order:1;
	}
	.spimgcontainer3{				
			order: 3;
	}
	.spimgcontainer1, .spimgcontainer3{
		display: block;
	}

}