@charset "utf-8";
#main{
	padding-bottom: 0;
}
#rec_list{
	.wrap{		
		.contents{
			width:100%;
			max-width:100%;
			.tabmenu{
                display: grid;
                grid-template-columns: repeat(3,auto);
				max-width: 1100px;
				margin: 0 auto;
                li{
					a {
						display:block;
	                    background-color: #FFFFFF;
	                    border-top: solid 4px #002D82;
						border-left: solid 4px #002D82;
	                    border-radius: 10px 10px 0 0;
	                    padding: 0.5em 0;
	                    text-align: center;
	                    font-size: 1.6rem;
						cursor:pointer;
	                    line-height: 1.3;
						text-decoration:none!important;
						span{
							font-size: 3.0rem;
							display: block;
						}
					}
					&:last-child{
						a {
							border-right: solid 4px #002D82;
						}
					}
                    &.active{
						a {
	                        background-color: #002D82;
							color:#FFFFFF!important;
						}
                    }
                }
            }
			.contents_wrap {
				background-color: #002D82;
				padding: 90px 0;
				z-index: -1;
				.contents_inner {
					max-width:1200px;
					width:calc(100% - 60px);
					margin:0 auto;
					display: grid;
					grid-row-gap: 50px;
					dl{
						background-color: #fff;
						padding: 50px;
						display: grid;
						grid-template-columns: 5em 1fr auto;
						grid-column-gap: 3em;
						align-items: center;
						z-index: 0;
						dt{
							font-size: 1.8rem;
							line-height: 1.8;
						}
						.btn{
							display:grid;
							background-color: #002D82;
							grid-template-columns: auto 15px;
							height:2.4em;
							align-items:center;
							justify-content:center;
							padding:0 1em;
							grid-column-gap:.5em;
							span{
								font-size: 1em;
								color: #fff;
							}
						}
						.cat{
							color: #FFFFFF;
							font-size: 1.5rem;
							display:grid;
							align-items:center;
							justify-content:center;
							height:2em;
							&.off{
								background-color: #A0A0A0;
							}
							&.on{
								background-color: #E51836;
							}
						}
					}
				}
			}			
		}
	}
}

#main {
	section {
		.wrap {
			.contents {
				.infotxt {
					margin-bottom:1.5em;
				}
				table {
					&.recruitment {
						margin-bottom:50px;
						width: 100%;
						tbody {
							tr {
								th,td {
									border:1px solid #cccccc;
								}
								th {
									min-width:6em;
									background-color:#EFEFEF;
								}
							}
						}
					}
				}
				.btnwrap {
					display:grid;
					justify-items:center;
					grid-row-gap:30px;
					padding-bottom: 90px;
					.btn {
						background-color:#ff6600;
						display:grid;
						height:3em;
						font-size:1.8rem;
						align-items:center;
						justify-content:center;
						border-radius:4px;
						padding:0 2em;
					}
				}
			}
		}
	}
}


@media (hover:hover) {

	#rec_list{
		.wrap{		
			.contents{
				.tabmenu{
					li{
						a {
							&:hover {
								opacity: 1;
								background-color: #002D82;
								color:#FFFFFF!important;
							}
						}
					}
				}		
			}
		}
	}

}

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

	#rec_list{
		.wrap{		
			.contents{
				.tabmenu{
					li{
						a {
							font-size: 1.5rem;
							span{
								font-size: 2.6rem;
							}
						}
					}
				}
				.contents_wrap{
					padding: 70px 0;
					.contents_inner {
						max-width: 1100px;
						dl{
							padding: 30px 50px;
							dt{
								font-size: 1.8rem;
							}
							.btn{
								span{
									font-size: 1.5rem;
								}
							}
						}
					}
				}			
			}
		}
	}
	#main {
		section {
			.wrap {
				.contents {
					.btnwrap {
						padding-bottom: 70px;
					}
				}
			}
		}
	}

}

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

	#rec_list{
		.wrap{		
			.contents{
				.tabmenu{
					max-width: 100%;
					li{
						a {
						font-size:min(1.46vw,1.5rem);
							border-top: solid 3px #002D82;
							border-left: solid 3px #002D82;
							span{
								font-size:min(2.34vw,2.4rem);
							}
						}
					}
				}
				.contents_wrap{
					padding: 50px 0;
					.contents_inner {
						width: calc(100% - 60px);
						max-width: 900px;
						dl{
							padding: 20px 30px;
							grid-column-gap: 2em;
							dt{
								font-size: 1.5rem;
							}
							.btn{
								span{
									font-size: 1.4rem;
								}
							}
						}
					}
				}			
			}
		}
	}
	#main {
		section {
			.wrap {
				.contents {
					.btnwrap {
						padding-bottom: 50px;
					}
				}
			}
		}
	}

}

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

	#rec_list{
		.wrap{		
			.contents{
				.tabmenu{
					max-width: 100%;
					li{
						a {
							padding: 0.5em 1em;
							font-size:min(2.5vw,1.5rem);
							border-top: solid 2px #002D82;
							border-left: solid 2px #002D82;
							span{
								font-size:min(3.2vw,2.4rem);
							}
						}
					}
				}
				.contents_wrap{
					padding: 30px 0;
					.contents_inner{
						width: calc(100% - 40px);
						max-width: 100%;
						grid-row-gap: 30px;
						dl{
							padding: 15px;
							grid-row-gap: .5em;
							grid-template-columns: 1fr;
							justify-items: center;
							.cat {
								font-size: 1.4rem;
								justify-self: center;
								padding: 0 1em;
							}
							dt{
								font-size: 1.4rem;
							}
							.btn{
								grid-template-columns: auto 12px;
								span{
									font-size: 1.3rem;
								}
							}
						}
					}
				}			
			}
		}
	}

	#main {
		section {
			.wrap {
				.contents {
					table {
						&.recruitment {
							margin-bottom:30px;
							tbody {
								tr {
									th {
										min-width:3em;
									}
								}
							}
						}
					}
					.btnwrap {
						grid-row-gap:20px;
						padding-bottom: 30px;
						.btn {
							font-size:1.6rem;
						}
					}
				}
			}
		}
	}

}