@charset "utf-8";

#subTitle .ttl{
	display:table-cell;
	vertical-align: middle;
    text-align: center;
	width: 170px;
    height: 169px;
}

#main h3 {
		margin:0 0 20px;
		padding:5px 15px;
		font-size:17px;
		background:#ffcb3f url(/joyfull/recruiting/interview/img/bg_ttl01.gif) no-repeat right top;
		clear:both;
	}
#main h3:before {clear:both;}
.secInterview01{margin:0 0 75px;}
	.secInterview01 .h2_basic01{margin:0 0 28px;}
	.secInterview01 .txt_intro{
		margin:0 0 24px;
		font-size:14px;
		line-height:2;
	}
	
.secDetail{margin:0 0 40px;}
	.secDetail .ttl_interview01{
		margin:0 0 20px;
		padding:5px 15px;
		font-size:17px;
		background:#ffcb3f url(/joyfull/recruiting/interview/img/bg_ttl01.gif) no-repeat right top;
	}
	.secDetail .figure{margin:10px 0 0 10px;}
	.secDetail .txt{
		font-size:14px;
		line-height:2.25;
		letter-spacing:-0.05em;
	}
.secDetail04{margin:0 0 60px;}
	.secDetail02 .txt{overflow:hidden;}
	
.boxDetail01{padding:20px 0 0;}
	.boxDetail01 .text{padding:27px 0 0;}
		.boxDetail01 .text .ttl{
			margin:0 0 20px;
			color:#f8b500;
			font-size:23px;
			line-height:1.65;
		}
		.boxDetail01 .text .txt{
			color:#502700;
			font-size:30px;
			line-height:1.1;
			letter-spacing:.01em;
		}
		.boxDetail01 .text .lables{
			margin:0 0 18px;
			position:relative;
		}
			.boxDetail01 .text .lables span{
				display:inline-block;
				padding:3px 10px;
				min-width:75px;
				background-color:#ffe59f;
				color:#502700;
				font-size:14px;
				line-height:1.4;
				text-align:center;
				letter-spacing:-0.05em;
			}

.ulOptions01{
	overflow:hidden;
	margin:0 0 39px;
}
	.ulOptions01 li{
		position:relative;
		float:left;
		width:127px;
		margin:0 8px 0 0;
		padding:7px 0;
		background-color:#fffcf0;
		border:1px solid #f8b500;
		font-size:14px;
		text-align:center;
		cursor:pointer;
	}
	.ulOptions01 li:hover{
		/*
		filter: alpha(opacity=70);
		-moz-opacity:0.70;
		opacity:0.70;
		*/
		background-color:#f8b500;
	}
	.ulOptions01 li:after{
		position:absolute;
		top:50%;
		right:6px;
		width:6px;
		height:9px;
		margin-top:-5px;
		background: url(/joyfull/common/img/ico_arrow25.gif) no-repeat 0 0;
		content:'';
	}
.ulOptions02{display:none;}
		
@media screen and (max-width:767px) {

	.secInterview01{margin:0 0 25px;}
		.secInterview01 .h2_basic01{margin:0 0 16px;}
		.secInterview01 .txt_intro{
			margin:0 0 15px;
			font-size:11px;
			line-height:1.7;
		}
		
	.secDetail{margin:0 0 16px;}
		.secDetail .ttl_interview01{
			margin:0 0 10px;
			padding:0 5px;
			font-size:10px;
			line-height:1.9;
			background:#ffcb3f url(/joyfull/recruiting/interview/img/bg_ttl01.gif) no-repeat right top / 90px auto;
		}
		.secDetail .figure{margin:5px 0 0 5px;}
		.secDetail .txt{
			font-size:11px;
			line-height:1.85;
			letter-spacing:inherit;
		}
	.secDetail04{margin:0 0 20px;}
		.secDetail02 .txt{overflow:visible;}
	
	.boxDetail01{padding:7px 0 5px;}
		.boxDetail01 .text{padding:0 0 0;}
			.boxDetail01 .text .ttl{
				margin:0 0 12px;
				font-weight:bold;
				font-size:13px;
				line-height:1.55;
			}
			.boxDetail01 .text .txt{
				font-size:15px;
				line-height:1.1;
			}
			.boxDetail01 .text .lables{margin:5px 0 5px;}
				.boxDetail01 .text .lables span{
					margin:0 3px 0 0;
					padding:0 5px;
					min-width:38px;
					font-size:9px;
					letter-spacing:inherit;
				}
				
	.boxDetail02{
		position:relative;
		margin:17px 0 0;
		padding:20px 0 0;
		border-top:1px solid #502700;
	}
	.boxDetail02:after,
	.boxDetail02:before{
		position:absolute;
		top:-2px;
		width:4px;
		height:4px;
		background-color:#502700;
		-webkit-border-radius:50%;
		-moz-border-radius:50%;
		border-radius:50%;
		content:'';
	}
	.boxDetail02:after{left:0;}
	.boxDetail02:before{right:0;}
		.boxDetail02 .figure{margin:2px 0 0 10px;}
		.boxDetail02 .ttl{
			position:relative;
			margin:0 0 15px;
			padding:4px 0;
			border:2px solid #502700;
			font-weight:bold;
			font-size:12px;
			text-align:center;
			-webkit-border-radius:5px;
			-moz-border-radius:5px;
			border-radius:5px;
		}
		.boxDetail02 .ttl:after{
			position:absolute;
			left:50%;
			bottom:-6px;
			width:6px;
			height:6px;
			margin-left:-3px;
			background: url(/joyfull/recruiting/interview/img/ico_message01.gif) no-repeat 0 0 / auto 6px;
			content:'';
		}
		.boxDetail02 .txt{
			font-size:9px;
			line-height:1.8;
		}
			
	.ulOptions02{
		display:table;
		width:100%;
		margin:0 0 20px;
		border:1px solid #f8b500;
	}
		.ulOptions02 > li{
			position:relative;
			display:table-cell;
			width:33.33%;
			height:22px;
			border-left:1px solid #f8b500;
			font-size:9px;
			text-align:center;
			vertical-align:middle;
			letter-spacing:0.1em;
		}
		.ulOptions02 > li:first-child{border-left:none;}
		.ulOptions02 > li.hasSub:after{
			position:absolute;
			top:8px;
			right:5px;
			width:7px;
			height:6px;
			background: url(/joyfull/common/img/ico_arrow26.gif) no-repeat 0 0 / 7px auto;
			content:'';
		}
			.ulOptions02 > li > ul{
				display:none;
				position:absolute;
				left:-1px;
				right:-1px;
				top:100%;
				border-top:1px solid #f8b500;
				z-index:20;
			}
			.ulOptions02 > li:hover > ul{display:block;}
				.ulOptions02 > li > ul >li{
					padding:2px 0;
					background-color:#ffeebf;
					border-left:1px solid #f8b500;
					border-right:1px solid #f8b500;
					border-bottom:1px solid #f8b500;
				}
	.ulOptions01 {
		text-align: center;
	}
	.ulOptions01 li {
		display: inline-block;
		float: none; width: 23%;
		font-size: 10px;
		margin-right: 4px;
	}
		.ulOptions01 li.last {
			margin-right: 0px;
		}
	
	#main p img {width:100%!important;}
	.ul_recruiting01 .text .txt {font-size:13px;}
	.ul_recruiting01 .text .lables span {font-size:11px;}
}


/*YouTube用*/
.movieBox{width: 100% !important; height:399px !important; margin: 20px auto;}

@media screen and (max-width:767px) {
.movieBox{height:420px !important; margin: 10px auto;}
}
@media screen and (max-width:667px) {
.movieBox{height:350px !important;}
}
@media screen and (max-width:480px) {
.movieBox{height:250px !important;}
}
@media screen and (max-width:375px) {
.movieBox{height:200px !important;}
}
@media screen and (max-width:359px) {
.movieBox{height:170px !important;}
}