@charset "utf-8";

.secCsr01{}
	.secCsr01 .txt01{
		margin:0 0 30px;
		font-size:14px;
		line-height:30px;
	}
	.secCsr01 .txt02{
		margin:70px 0 0;
		font-size:18px;
		line-height:40px;
		text-align:center;
	}
	
	.ulThumblist{border-bottom:1px dashed #f9c22d;}
		.ulThumblist li{
			overflow:hidden;
			min-height:120px;
			padding:12px 0 12px 7px;
			border-top:1px dashed #f9c22d;
		}
			.ulThumblist li .thumb{margin:0 20px 0 0;}
			.ulThumblist li .date{
				padding:17px 0 0;
				margin:0 0 7px;
				color:#f8b500;
				font-size:13px;
				line-height:14px;
				letter-spacing:0.1em;
			}
				.ulThumblist li .date .label{
					padding:0 10px;
					margin:0 0 0 7px;
					background-color:#f8b500;
					color:#fff;
					font-size:13px;
					letter-spacing:-0.1em;
				}
			.ulThumblist li .ttl{
				margin:0 0 2px;
				font-weight:bold;
				font-size:16px;
			}
			.ulThumblist li a{color:#502700;}
			.ulThumblist li a:hover{
				color:#f8b500;
				text-decoration:none;
			}
	
	.secCsr01 .ulBoxlist{
		overflow:hidden;
		margin:0 -40px -30px 0;
		padding:0 30px;
	}
		.secCsr01 .ulBoxlist li{
			float:left;
			width:305px;
			margin:0 40px 30px 0;
		}
		.secCsr01 .ulBoxlist li:nth-child(odd){clear:left}
		.secCsr01 .ulBoxlist .inner{
			padding:0 30px;
			border:1px solid #f8b500;
			background-color:#fffde8;
		}
			.secCsr01 .ulBoxlist .inner .ttl{
				padding:17px 0;
				color:#f8b500;
				font-size:20px;
				font-weight:bold;
				line-height:25px;
				text-align:center;
			}
			.secCsr01 .ulBoxlist .inner .thumb{text-align:center;}
				.secCsr01 .ulBoxlist .inner .thumb img{margin:0 auto;}
			.secCsr01 .ulBoxlist .inner .txt{
				padding:16px 0;
				color:#f8b500;
				font-size:14px;
				line-height:21px;
			}
			
			
#csr1{
	min-height:771px;
	margin:0 0 70px;
}
#csr2{
	min-height:0px;
	margin:0 0 95px;
}
#csr3{margin:0 0 32px;}
#csr4{margin:0 0 70px;}
	#csr2 .h2_basic01{margin:0 0 32px;}
	#csr4 .h2_basic01{margin:0 0 50px;}
	#csr3 .ulBoxlist{padding:0 50px;}
		#csr3 .ulBoxlist li{width:285px;}
		#csr3 .ulBoxlist .inner{padding:0 20px;}
		#csr3 .ulBoxlist .inner .txt{padding:19px 0;}

.secCsr02{margin:0 0 20px;}
	.secCsr02 .date{
		display:block;
		margin:0 0 13px;
		color:#f8b500;
		font-size:16px;
		line-height:1.25;
		letter-spacing:0.04em;
	}
		.secCsr02 .date .label{
			margin:0 0 0 16px;
			padding:2px 10px;
			background-color:#f8b500;
			color:#fff;
			font-size:13px;
			letter-spacing:-0.1em;
		}
	.secCsr02 .ttl{
		margin:0 0 50px;
		padding: 30px 20px 63px;
		border-top:1px solid #502700;
		border-bottom:1px solid #f8b500;
		color:#502700;
		font-weight:bold;
		font-size:20px;
		line-height:1.1;
		position:relative;
	}
	.secCsr02 .txt{
		padding:0 20px;
		font-size:14px;
		line-height:36px;
	}
	.secCsr02 .btn{
		position:relative;
		display:inline-block;
		width:295px;
		height:41px;
		border:3px solid #ffdb7b;
		background-color:#f8b500;
		color:#502700;
		font-weight:bold;
		font-size:16px;
		line-height:35px;
		text-align:center;
	}
	.secCsr02 .btn:before{
		position:absolute;
		top:50%;
		left:16px;
		width:8px;
		height:13px;
		margin-top:-7px;
		background: url(/joyfull/common/img/ico_arrow24.png) no-repeat 0 0;
		content:'';
	}
	.secCsr02 .btn:hover{text-decoration:none;}
	
	.secCsr02 .ttl .sns{
		position:absolute;
		bottom: 30px;
		right:0;
		display: inline-block;
		width: auto;
		height: 20px;
	}
	.secCsr02 .ttl .sns .first{
		margin-top: -2px;
	}
	
#slider{margin:0 0 10px;}
	#slider li{position:relative;}
	#slider .flex-caption {
		position:absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding:15px 20px;
		background: #502700;
		color: #fff;
		font-size: 16px;
		line-height: 24px;
	}
		#slider .slider-navigation a{
			position: absolute;
			top: 50%;
			z-index:10;
			margin-top:-33px;
		}
		#slider .slider-navigation a.flex-prev{left:18px;}
		#slider .slider-navigation a.flex-next{right:18px;}

#carousel{
	margin:0 0 30px;
	padding:0 22px;
}
		#carousel img{cursor:pointer;}
		#carousel img:hover{
			filter: alpha(opacity=70);
			-moz-opacity:0.70;
			opacity:0.70;
		}
		#carousel .carousel-navigation a{
			display:block;
			position: absolute;
			top: 0;
			height:100%;
			width:20px;
		}
		#carousel .carousel-navigation img{margin:20px 0 0;}
		#carousel .carousel-navigation a.flex-prev{left:0;}
		#carousel .carousel-navigation a.flex-next{
			right:0;
			text-align:right;
		}
		
@media screen and (max-width:767px) {
	.secCsr01{}
		.secCsr01 .txt01{
			margin:0 0 20px;
			font-size:12px;
			line-height:20px;
		}
		.secCsr01 .txt02{
			margin:22px 0 0;
			font-size:13px;
			line-height:20px;
		}
			
		.ulThumblist{}
			.ulThumblist li{
				min-height:60px;
				padding:6px 0 6px 3px;
			}
				.ulThumblist li .thumb{margin:0 10px 0 0;}
					.ulThumblist li .thumb img{
						width:50px;
						height:auto;
					}
				.ulThumblist li .date{
					padding:7px 0 0;
					margin:0 0 2px;
					font-size:8px;
					line-height:9px;
				}
					.ulThumblist li .date img{
						margin:0 0 0 4px;
						width:auto;
						height:9px;
					}
					.ulThumblist li .date .label{
						padding:0 5px;
						margin:0 0 0 4px;
						font-size:9px;
					}
				.ulThumblist li .ttl{
					margin:0;
					font-size:10px;
				}
				.ulThumblist li .txt{font-size:8px;}
		.secCsr01 .ulBoxlist{
			margin:0 0 -10px 0;
			padding:0;
		}
			.secCsr01 .ulBoxlist li{
				width:50%;
				margin:0 0 10px 0;
			}
			.secCsr01 .ulBoxlist li:nth-child(odd){padding:0 5px 0 0;}
			.secCsr01 .ulBoxlist li:nth-child(even){padding:0 0 0 5px;}
			.secCsr01 .ulBoxlist .inner{padding:0;}
				.secCsr01 .ulBoxlist .inner .ttl{
					padding:7px 0;
					font-size:12px;
					line-height:17px;
				}
				.secCsr01 .ulBoxlist .inner .thumb{padding:0 12px;}
				.secCsr01 .ulBoxlist .inner .thumb img{
					max-width:100%;
					height:auto;
				}
				.secCsr01 .ulBoxlist .inner .txt{
					padding:8px 12px;
					font-size:11px;
					line-height:15px;
				}
				
	#csr1,
	#csr2{min-height:inherit;}
	#csr1{margin:0 0 35px;}
	#csr2{margin:0 0 35px;}
	#csr3{margin:0 0 11px;}
	#csr4{margin:0 0 25px;}
		#csr1 .h2_basic01,
		#csr2 .h2_basic01,
		#csr3 .h2_basic01{margin:0 0 16px;}
		#csr4 .h2_basic01{margin:0 0 25px;}
		#csr3 .ulBoxlist{padding:0;}
			#csr3 .ulBoxlist li{width:50%;}
			#csr3 .ulBoxlist .inner{padding:0 12px;}
			#csr3 .ulBoxlist .inner .thumb{margin-bottom:8px;}
			#csr3 .ulBoxlist .inner .txt{padding:0 0 8px;}
			
.secCsr02{margin:0 0 15px;}
	.secCsr02 .date{
  		margin:0 0 5px;
		font-size:12px;
		line-height:19px;
	}
		.secCsr02 .date .label{
			margin:0 0 0 6px;
			padding:1px 5px;
			font-size:12px;
		}
	.secCsr02 .ttl{
		margin:0 0 25px;
		padding:12px 5px 37px;
		font-size:17px;
		line-height:23px;
	}
	.secCsr02 .txt{
		margin:0 0 20px;
		padding:0;
		font-size:12px;
		line-height:22px;
	}
	.secCsr02 .btn{
		display:block;
		width:auto;
		height:35px;
		border:2px solid #ffdb7b;
		font-size:12px;
		line-height:32px;
	}
	.secCsr02 .btn:before{
		left:75px;
		width:5px;
		height:9px;
		margin-top:-5px;
		background: url(/joyfull/common/img/ico_arrow17.gif) no-repeat 0 0 / 5px auto;
	}
	.secCsr02 .ttl .sns{
		bottom:12px;
	}
	
#slider{margin:0 0 5px;}
	#slider .flex-caption {
		padding:2px 7px;
		font-size: 9px;
		line-height: 1.2;
	}
		#slider .flex-caption b{
			font-size: 10px;
			line-height: 1.2;
		}
		#slider .slider-navigation{display:none;}

#carousel{
	margin:0 0 20px;
	padding:0 20px;
}
		#carousel .carousel-navigation img{
			width:5px;
			height:auto;
			margin:10px 0 0;
		}
		
}
@media screen and (min-width:483px) and (max-width:767px) {
	#csr3 .ulBoxlist .inner .txt{text-align:center;}
}

.backBtn {margin:30px 0px 0px 0px;}