/* CSS Document */

#header_recruit{
	background-color: #FFFFFF;
}

.sp02{
	display: none;
}

#contents {
  	position : relative;
  	width : 100%;
  	height : auto;
  	margin : auto;
  	overflow : hidden;
	z-index: 1;
}

#contents .sub_navi div h2{
	width: 196px;
	padding-top: 45px; 
}

#contents .sub_navi{
	z-index: 10;
}

#sec01{
	opacity: 0;
	animation: fadeIn 1s ease 1.5s 1 forwards;
    -webkit-animation: fadeIn 1s ease 1.5s 1 forwards;
	padding-top:90px;
	margin-top: -90px;
	position: relative;
	z-index: 1;
}

@keyframes fadeIn {
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    100% {opacity: 1}
}

#sec01 .sec01_bg{
	width: 100%;
	height: 57vw;
	background-image: url("../images/mv2024.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top;
}

#sec01 .inner{
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

#sec01 .inner h3{
	width: 314px;
	height: 90px;
	position: absolute;
	top:22vw;
}

#sec01 .inner h4{
	font-size: 2vw;
	font-weight: 100;
	position: absolute;
	top:29.5vw;
	color: #FFFFFF;
}

#sec01 .inner p{
	width: 55%;
	font-size: 0.9vw;
	font-weight: 100;
	position: absolute;
	top:35vw;
	color: #FFFFFF;
	line-height: 2.3;
}

.pnkz{
	position: absolute;
	top:0;
	left: 10px;
}

#sec02{
	width: 100%;
	background-color: #f5f5f5;
	padding: 80px 0;
}


#sec02 .inner01{
	width: 800px;
	height: 1000px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 70px 75px;
	box-sizing: border-box;
	position: relative;
}


#sec02 .inner01 .sec02_img{
	width: 360px;
	height: auto;
	position: absolute;
	top:250px;
	right: -100px;
}


#sec02 .inner01 h3,
#sec03 h3{
	font-size: 30px;
	font-weight: 100;
	color: #1f2024;
	position: relative;
	margin-bottom: 25px;
}

#sec02 .inner01 h3::after,
#sec03 h3::after{
	content: "";
	background-image: url("../images/title_line.gif");
	width: 60px;
	height: 5px;
	background-size: cover;
	position: absolute;
	top:22px;
	left: -75px;
}

#sec02 .inner01 .txt_inner{
	width: 420px;
}

#sec02 .inner01 .txt_inner dl{
	border-top: 1px dotted #bfbfbf;
	width: 420px;
	padding: 30px 0;
}

#sec02 .inner01 .txt_inner .b_line{
	border-bottom: 1px dotted #bfbfbf;
}

#sec02 .inner01 .txt_inner dt{
	font-size: 13px;
	font-weight: bold;
	color: #1f2024;
	width: 110px;
	float: left;
}

#sec02 .inner01 .txt_inner dd{
	font-size: 13px;
	color: #1f2024;
	width: 310px;
	float: left;
}

#sec02 .inner01 .txt_inner .small{
	font-size: 10px;
	margin-top: 20px;
	text-align: right;
	color: #1f2024;
}

#sec02 .inner02{
	width: 1000px;
	height: auto;
	margin: 80px auto 30px;
}

#sec02 .inner02 .feature01{
	width: 450px;
	float: left;
}

#sec02 .inner02 .feature02{
	width: 450px;
	float: right;	
}

#sec02 .inner02 .feature01 h4,
#sec02 .inner02 .feature02 h4{
	width: 438px;
}

#sec02 .inner02 .feature01 h5,
#sec02 .inner02 .feature02 h5{
	font-size: 20px;
	margin:20px 0;
	color: #1f2024;
	height: 60px;
}

#sec02 .inner02 .feature01 h5 span{
	font-size: 14px;
}

#sec02 .inner02 .feature01 p,
#sec02 .inner02 .feature02 p{
	font-size: 12px;
	line-height: 2;
	color: #1f2024;
	letter-spacing: 0.01em;
}

#sec03{
	width: 1000px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 110px 0 40px;
}

#sec03 h3{
	margin-left: 75px;
	margin-bottom: 3px !important;
}

#sec03 h5{
	font-size: 20px;
	color: #1f2024;
	width: 200px;
	border-bottom: 1px dotted #7f7f7f;
	padding-bottom: 3px;
	margin: 40px 0 20px;
}

#sec03 .txt{
	font-size: 20px;
	color: #1f2024;
	margin-left: 65px;
	font-weight: bold;
	margin-bottom: 35px;
}

#sec03 table{
	width: 100%;
	margin:10px 0 80px;
}

#sec03 .smile table{
	width: 68%;
	margin:10px 0 40px;
}

#sec03 table tbody{
	width: 100% !important;
}

#sec03 .ttl{
	margin-bottom: 0 !important;
}

#sec03 .ttl td{
	width: 4%;
}

#sec03 .ttl th{
	width: 32%;
	background-color: burlywood;
	text-align: center;
	font-weight: 600;
	color: #FFFFFF;
	font-size: 15px;
	padding: 10px;
	border-left: 10px solid #FFFFFF;
	box-sizing:border-box;
}

#sec03 .ttl th:nth-child(2n){
	background-color: #ff7e00;
}

#sec03 .ttl th:nth-child(3n){
	background-color: #3fa12f !important;
}

#sec03 .ttl th:last-child{
	background-color: #436bbd;
}

#sec03 .contents tr{
	border-bottom: 5px solid #FFFFFF;
}

#sec03 .contents th{
	width: 4%;
	font-weight: 600;
	color: #FFFFFF;
	font-size: 15px;
	background-color:#666666;
	text-align: center;
	vertical-align: middle;
	line-height: 1.2em;
}

#sec03 .contents td{
	width: 32%;
	vertical-align: top;
	text-align: center;
	border-left: 10px solid #FFFFFF;
	padding: 30px;
	box-sizing:border-box;
	background-color: #f5f5f5;
	font-size: 13px;
	color: #1f2024;
}

#sec03 .smile .ttl th,
#sec03 .smile .contents td{
	border-right: 10px solid #FFFFFF;
}

#sec03 .contents .sec01,
#sec03 .contents .sec02,
#sec03 .contents .sec03{
	padding: 15px 15px 25px;
}

#sec03 .contents .sec01 .ttl02,
#sec03 .contents .sec02 .ttl02,
#sec03 .contents .sec03 .ttl02{
	width: 100%;
	display: block;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 0 25px;
}

#sec03 .contents .sec01 ul,
#sec03 .contents .sec02 ul,
#sec03 .contents .sec03 ul{
	text-align: center;
	margin: 0 auto !important;
	display: inline-block;
}

#sec03 .contents .sec01 ul .one{
	padding-bottom: 23px;
}

#sec03 .contents td .bold{
	font-weight: bold;
}

#sec03 .contents .sec01 ul li,
#sec03 .contents .sec02 ul li,
#sec03 .contents .sec03 ul li{
	text-align: left;
	padding-bottom: 5px;
	font-size: 13px;
	color:#1f2024 ;
	font-weight: 100;
}

#sec03 .contents ul li{
	padding-left: 13px;
	position: relative;
}

#sec03 .contents .sec01 .ttl02{
	color: #ff7e00;
	background-color: #ffd9a3;
}

#sec03 .contents .sec02 .ttl02{
	color: #3fa12f;
	background-color: #cee3ca;
}

#sec03 .contents .sec03 .ttl02{
	color: #436bbd;
	background-color: #cbd7ee;
}

#sec03 .contents .arrow th,
#sec03 .contents .arrow td{
	padding: 5px 0;
	background-color: #FFFFFF;
}

#sec03 .contents td:nth-child(3n){
	background-color: #eeeeee ;
}

#sec03 .contents ul,
#sec03 .contents ol{
	padding: 0 5px;
}

#sec03 .contents ul li,
#sec03 .contents ol li{
	text-align: left;
	padding-bottom: 25px;
}

#sec03 .contents ul li{
	padding-left: 13px;
	position: relative;
}

#sec03 .contents ul li::before{
	content: "●";
	font-size: 8px;
	position: absolute;
	top:2px;
	left: 0;
}

#sec03 .contents ul li:last-child,
#sec03 .contents ol li:last-child{
	padding-bottom: 0;
}

#sec03 .contents .arrow{
	widows: 96% !important;
}

#sec04{
	width: 100%;
	background-color: #f5f5f5;
	padding: 80px 0 120px;
}

#sec04 .inner01{
	width: 707px;
	margin: 0 auto;
}

#sec04 h4{
	font-size: 30px;
	font-weight: 100;
	color: #1f2024;
	text-align: center;
	line-height: 1;
	margin-bottom: 30px;
}

#sec04 h4 span{
	font-size: 20px;
	font-weight: bold;
}

#sec04 p{
	width: 707px;
	margin: 0 auto 60px;
}

#sec04 .inner02{
	width: 800px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 70px 70px 30px;
	box-sizing: border-box;
}

#sec04 .inner02 dt{
	font-size: 20px;
	font-weight: bold;
	color: #1f2024;
	padding-bottom: 5px;
	border-bottom: 1px dotted #bfbfbf;
	width: 420px;
}

#sec04 .inner02 dd{
	font-size: 13px;
	color: #1f2024;	
	margin: 20px 0 40px;
	letter-spacing: -0.02em;
}


@media (max-width:950px) {
	
	#contents .sub_navi{
		margin-bottom: -60px;
	}
	
	#contents .sub_navi div {
    	width: 92% !important;
    	margin: 0 3% 0 5% !important;
	}
	
	#contents .sub_navi div h2{
		width: 180px;
		padding-top: 50px;
	}
	
	#contents .sub_navi div ul li a {
    	width: 150px !important;
	}

	#sec01{
		width: 100%;
		height: 76vw;
		padding-top:60px;
		margin-top: -60px;
	}
	
	#sec01 .sec01_bg{
		width: 100%;
		height: 76vw;
		background-image: url("../images/mv2024.jpg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top;
	}
	
	#sec01 .inner{
		width: 90%;
	}

	#sec01 .inner h3{
		width: 200px;
		height: auto;
		top:20vw;	
	}
	
	#sec01 .inner h4{
		font-size: 3vw;
	}

	#sec01 .inner p{
		font-size: 1.6vw;
		top:36vw;
		width: 53%;
		line-height: 2;
	}
	
	#sec02{
	    padding: 80px 0 60px;
	}
	
	#sec02 .inner01{
		width: 90%;
		height: 1020px;
		padding: 70px 75px;
	}


	#sec02 .inner01 .sec02_img{
		width: 50%;
		top:250px;
		right: -6%;
	}

	#sec02 .inner01 .txt_inner{
		width: 70%;
	}

	#sec02 .inner01 .txt_inner dl{
		width: 100%;
	}

	#sec02 .inner01 .txt_inner dt{
		width: 35%;
	}

	#sec02 .inner01 .txt_inner dd{
		width: 65%;
	}

	#sec02 .inner02{
		width: 90%;
	}

	#sec02 .inner02 .feature01{
		width: 48%;
	}

	#sec02 .inner02 .feature02{
		width: 48%;
	}

	#sec02 .inner02 .feature01 h4,
	#sec02 .inner02 .feature02 h4{
		width: 95%;
	}

	#sec02 .inner02 .feature01 h5,
	#sec02 .inner02 .feature02 h5{
		font-size: 16px;
	}

	#sec02 .inner02 .feature01 h5 span{
		font-size: 13px;
	}

	#sec02 .inner02 .feature01 p,
	#sec02 .inner02 .feature02 p{	
		font-size: 12px;
	}

	#sec03{
		width: 90%;
		padding: 80px 0 40px;
	}

	#sec03 h5{
		font-size: 20px;
	}

	#sec03 .txt{
		font-size: 18px;
	}

	#sec03 .ttl th{	
		font-size: 13px;
	}

	#sec03 .contents th{
		font-size: 12px;
	}

	#sec03 .contents td{
		font-size: 11px;
		padding: 20px;
	}
	
	#sec03 .contents .sec01 .ttl02,
	#sec03 .contents .sec02 .ttl02,
	#sec03 .contents .sec03 .ttl02{
		font-size: 11px;
	}

	#sec03 .contents .sec01 ul li,
	#sec03 .contents .sec02 ul li,
	#sec03 .contents .sec03 ul li{
		font-size: 11px;
	}

	#sec03 .contents ul li{
		padding-left: 0;
	}

	#sec03 .contents ul li{
		padding-left: 11px;
	}	

	#sec03 .contents ul li::before{
		font-size: 7px;
	}

	#sec03 .contents .arrow{
		widows: 96% !important;
	}

	#sec04{
		width: 100%;
		background-color: #f5f5f5;
		padding: 80px 0 120px;
	}

	#sec04 .inner01{
		width: 80%;
		margin: 0 auto;
	}
	
	#sec04 p{
		width: 100%;
		margin: 0 auto 60px;
	}

	#sec04 .inner02{
		width: 80%;
		padding: 50px 50px 30px;
	}
	
}



@media (max-width:749px) {
	
	.pc_ttl{
		display: none;
	}
	
	.sp02{
		display: block;
	}
	
	#sec03 .contents .arrow{
		display: none;
	}
	
	#contents .sub_navi{
		margin-bottom: 30px;
	}
	
	#contents .sub_navi div .sec02 {
    	padding-right: 2vw !important;
	}
	
	#contents .sub_navi div ul li a {
    	width: 28.5vw !important;
		padding: 5vw 0 0 0 !important;
	}
	
	#contents .sub_navi div h2{
		width: 110px;
		padding-top: 30px;
	}

	#sec01{
		width: 100%;
		height: 150vw;
		margin-top: -90px;
	}

	#sec01 .sec01_bg{
		width: 100%;
		height: 150vw;
		background-image: url("../images/mv_sp2024.jpg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top;
	}

	#sec01 .inner{
		width: 86%;
	}

	#sec01 .inner h3{
		width: 60%;
		height: auto;
		top:40vw;
	}

	#sec01 .inner h4{
		font-size: 5vw;
		top:58vw;
	}

	#sec01 .inner p{
		width: 90%;
		font-size: 3.5vw;
		top:69vw;
		line-height: 1.5;
	}

	#sec02{
		padding: 14vw 0 8vw;
		position: relative;
		z-index: 99;
	}


	#sec02 .inner01{
		width: 90%;
		height: auto;
		padding: 5vw;
	}
	
	#sec02 .inner01 .sec02_img{
		width: 90%;
		margin: 8vw auto 4vw;
		height: auto;
		position: relative;
		top:inherit;
		right: inherit;
	}

	#sec02 .inner01 h3,
	#sec03 h3{
		font-size: 5vw ;
		margin:5vw 0 -8vw 5vw;
		padding: 0 0 -5vw ;
	}

	#sec02 .inner01 h3::after,
	#sec03 h3::after{
		width: 30px;
		height: 3px;
		top:2.5vw;
		left: -10vw;
	}

	#sec02 .inner01 .txt_inner{
		width: 90%;
		padding-top: 15vw;
		margin: 0 auto;
	}

	#sec02 .inner01 .txt_inner dl{
		width: 100%;
		padding: 20px 0;
	}

	#sec02 .inner01 .txt_inner dt{
		font-size: 3.5vw;
		width: 35%;
	}

	#sec02 .inner01 .txt_inner dd{
		font-size: 3.5vw;
		width: 65%;
	}
	
	#sec02 .inner02{
		width: 80%;
		height: auto;
		margin: 10vw auto 4vw;
	}

	#sec02 .inner02 .feature01{
		width: 100%;
		float: none;
		margin-bottom: 8vw;
	}

	#sec02 .inner02 .feature02{
		width: 100%;
		float: none;	
	}

	#sec02 .inner02 .feature01 h4,
	#sec02 .inner02 .feature02 h4{
		width: 100%;
	}

	#sec02 .inner02 .feature01 h5,
	#sec02 .inner02 .feature02 h5{
		font-size: 4.5vw;
		margin:4vw 0;
		color: #1f2024;
		height: auto;
	}

	#sec02 .inner02 .feature01 h5 span{
		font-size: 3.8vw;
	}

	#sec02 .inner02 .feature01 p,
	#sec02 .inner02 .feature02 p{
		font-size: 3.5vw;
		line-height: 1.5;
	}

	#sec03{
		width: 80%;
		margin: 0 auto;
		padding: 30vw 0 4vw !important;
		margin-top: -15vw;
	}

	#sec03 h3{
		margin-left: 10% !important;
		 margin: -5vw 0 -8vw 5vw;
	}

	#sec03 .txt{
		font-size: 3.5vw;
		margin:3vw 0 4vw;
	}
	
	#sec03 h5{
		font-size: 4vw;
		width: 50%;
		margin: 4vw 0 4vw;
	}

	#sec03 table{
		width: 100%;
		margin:2vw 0 8vw;
	}

	#sec03 .smile table{
		width: 100%;
		margin:10px 0 40px;
	}
	
	#sec03 .contents td:nth-child(3n),
	#sec03 .contents td:nth-child(4n){
		display: none;
	}
	
	#sec03 .ttl th:nth-child(1n){
		background-color: #ff7e00;
	}

	#sec03 .ttl th:nth-child(2n){
		background-color: #3fa12f !important;
	}

	#sec03 .ttl th:nth-child(3n){
		background-color: #436bbd !important;
	}
	
	#sec03 .ttl th{
		width: 80vw;
	}

	#sec03 .ttl th button{
		background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 10px 0;
        appearance: none;
		width: 21.5vw !important;
		height: 100%;
		display: inline-block;
		font-size: 3.5vw;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	#sec03 .ttl th:last-child button{
		width: 22vw !important;
	}

	#sec03 .smile .ttl th button{
		width: 35vw !important;
	}

	#sec03 .ttl th{
		width: 20vw;
		padding: 10px auto;
		border: none ;
	}
	
	#sec03 .ttl th:nth-child(3n){
		border-left:  2% solid #FFFFFF;
		border-right:  2% solid #FFFFFF;
	}
	
	#sec03 .orange{
		background-color: #ff7e00;
		height: 5px;
		display: block;
		width: 100% !important;
		border: 0 ;
		margin-bottom: 20px;
	}

	#sec03 .green{
		background-color: #3fa12f;
		height: 5px;
		width: 100% !important;
		border: 0 ;
		margin-bottom: 20px;
		display: none;
	}

	#sec03 .blue {
		background-color: #436bbd;
		height: 5px;
		width: 100% !important;
		border: 0 ;
		margin-bottom: 20px;
		display: none;
	}

	#sec03 .contents th{
		width: 10%;
		font-size: 3.5vw;
		padding: 10px 0;
	}

	#sec03 .contents td{
		width: 90%;
		padding: 20px;
		font-size: 3.5vw;
	}

	#sec03 .contents .sec01,
	#sec03 .contents .sec02,
	#sec03 .contents .sec03{	
		padding: 15px 15px 25px;
	}

	#sec03 .contents .sec01 .ttl02,
	#sec03 .contents .sec02 .ttl02,
	#sec03 .contents .sec03 .ttl02{
		font-size: 3.5vw;
		padding: 15px;
		margin: 0 0 25px;
	}

	#sec03 .contents .sec01 ul .one{
		padding-bottom: 23px;
	}

	#sec03 .contents .sec01 ul li,
	#sec03 .contents .sec02 ul li,
	#sec03 .contents .sec03 ul li{
		padding-bottom: 5px;
		font-size: 3.5vw;
	}

	#sec03 .contents ul li{
		padding-left: 13px;
	}

	#sec03 .contents .arrow th,
	#sec03 .contents .arrow td{
		padding: 5px 0;
	}

	#sec03 .contents ul,
	#sec03 .contents ol{
		padding: 0 5px;
	}

	#sec03 .contents ul li,
	#sec03 .contents ol li{
		padding-bottom: 25px;
	}

	#sec03 .contents ul li{
		padding-left: 13px;
	}

	#sec03 .contents ul li::before{
		font-size: 8px;
		top:2px;
		left: 0;
	}

	#sec03 .contents .arrow{
		widows: 96% !important;
	}

	#sec04{
		padding: 12vw 0 16vw;
	}

	#sec04 .inner01{
		width: 90%;
		margin: 0 auto;
	}

	#sec04 h4{
		font-size: 5.7vw;
		margin-bottom: 5vw;
	}

	#sec04 h4 span{
		font-size: 3.8vw;
		font-weight: bold;
	}

	#sec04 p{
		width: 100%;
		margin: 0 auto 12vw;
	}

	#sec04 .inner02{
		width: 80%;
		padding: 7vw 7vw 3vw;
	}

	#sec04 .inner02 dt{
		font-size: 4vw;
		width: 100%
	}

	#sec04 .inner02 dd{
		font-size: 3.5vw;
		margin: 2vw 0 5vw;
	}
	
	#sec03 .smile .ttl th, #sec03 .smile .contents td {
		border:none;
	}

}