@charset "utf-8";
/* CSS Document */
.title_area{
	background:url(../img/header_pc.jpg) no-repeat center top;
	background-size:cover;
	text-align:center;
}
.diy_title{
	margin:25px auto 0px;
	width:70%;
	max-width: 300px;
	display: block;
}
.title_text{
	text-align:center;
	padding:20px 25px;
	background: rgba(255,255,255,0.75);
    margin: 30px 20px 60px 20px;
	display: inline-block;
	border-radius: 10px;
}
#diy_archive_contents{
	margin-top: 70px;
}
.diy_box{
	position:relative;
	border:1px solid #ccc;
	color:#222;
	box-sizing:border-box;
}
.diy_box .no,.diy_no{
	position:absolute;
	top:-20px;
	left:20px;
	width:136px;
	height:41px;
	line-height:41px;
	text-align:center;
	color:#fff;
	font-size:14px;
	background:url(../img/diyno_bg.png) no-repeat center center;
	font-family: 'Raleway', sans-serif;
	letter-spacing:1px;
	transform:rotate(-8deg);
	z-index:1;
}
.diy_box .data{
	position:absolute;
	bottom:25px;
	right:25px;
	padding-top:3px;
}
.diy_box .title a{
	font-size:16px;
	font-weight:bold;
	color:#222;
}
.diy_box .text{
	font-size:13px;
	font-weight:normal!important;
	color:#222;
}
.large_text_area ,.small_text_area{
	position:relative;
	padding:25px 25px 60px 25px;
}
.two_block_left{
	width:47.5%;
	float:left;
}
.two_block_right{
	width:47.5%;
	float:right;
}
.three_block,.three_block_s{
	width:32%;
	float:left;
	margin-top:60px;
}
.three_block:nth-child(3n+2),.three_block_s:nth-child(3n+2){
	margin:60px 2% 0;
}
.holder{
	text-align:center;
	margin:60px auto 30px;
	display:inline-block;
	width:100%;
}
.holder a{
	color:#555;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor:pointer;
	padding:2px 9px;
	margin:0 3px;
}
.jp-current{
	background-color:#555;
	color:#fff!important;
	border-radius:5px;
}
.new{
	position:absolute;
	top:-15px;
	left:22px;
}
.select_cat{
	width: 100%;
	background: url(../../img/orange_stripe.gif);
	padding: 10px 20px 0;
	margin: 20px auto 50px;
}
.chef_b{
	font-size: 14px;
	font-weight: bold;
	margin-right: 5px;
}
.diy_list_all{
	cursor: pointer;
	float: right;
	font-size: 12px;
	margin-top: 4px;
}
.diy_padding{
	padding: 0 30px;
}
.diy_container{
	padding: 0 30px;
}
.contents_title1{
	width: 100%;
	border-bottom: 1px solid #555;
	padding-bottom: 15px;
}
.contents_title1{
	margin: 50px auto 30px;
}


@media screen and (max-width: 768px) {
	.diy_title {
	    margin: 0px auto;
	    width: 50%;
	}
	.two_block_right,.two_block_left,.three_block,.three_block_s{
		width:47.5%;
		width : -webkit-calc(50% - 30px) ;
   		width : calc(50% - 30px) ;
	}
	.two_block_right,.two_block_left{
		margin:0 30px 0 0;
	}
	.three_block,.three_block_s,.three_block:nth-child(3n+2),.three_block_s:nth-child(3n+2){
		margin:60px 30px 0 0;
	}
	.diy_container{
		padding: 0 0 0 30px;
	}
	.title_area{
		background:url(../img/header_sp.jpg) no-repeat center top;
		background-size:cover;
	}
}
@media screen and (max-width: 540px) {
	.two_block_right,.two_block_left{
		width:100%;
	}
	.contents_title1{
		margin-bottom: 15px;
	}
	.three_block,.three_block_s{
		width:100%;
		margin-top:45px;
	}
	.diy_container{
		padding: 0 20px;
	}
	.diy_padding{
		padding: 0 20px;
	}
	.three_block:nth-child(3n+2),.three_block_s:nth-child(3n+2){
		margin:45px 0 0;
	}
	.three_block:nth-child(2n),.three_block_s:nth-child(2n){
		margin:45px 0 0 0;
	}
	.two_block_left{
		width:100%;
	}
	.two_block_right{
		width:100%;
		margin:45px 0 0 0;
	}
	.diy_box .title a{
		font-size:14px;
	}
	.large_text_area ,.small_text_area{
		position:relative;
		padding:15px 10px 40px 15px;
	}
	.diy_box .data{
		bottom:15px;
		right:13px;
	}
	.new{
		top:-42px;
		left:56px;
	}
	#diy_archive_contents{
		margin-top: 50px;
	}
	.title_area{
		background:url(../img/header_sp.jpg) no-repeat center center;
		background-size:cover;
	}
	.title_text{
		margin: 30px 20px 40px 30px;
		padding: 10px 15px;
		font-size: 11px;
	}
}