@charset "utf-8";
section{
	.wrap{
		padding: 90px 0;
	}
	h2{
		color: #002D82;
		border-bottom: #002D82 solid 3px;
		font-size: 1.8rem;	
		display: inline-block;
		margin-bottom: 40px;
		padding-bottom: 0.5em;	
		line-height: 1.5;
		font-weight: 500;
		letter-spacing: 0.2em;
		span{
			font-size: 6rem;			
			display: block;			
		}		
	}
	.btn{
		display: grid;
		grid-template-columns: auto 7px;
		grid-column-gap: 1.2em;
		align-items: center;
		border: #002D82 solid 3px;
		justify-self: center;
		padding: 0.5em 1em 0.5em 2em;
		font-size: 2rem;
		background-color: #FFFFFF;
		span{
			color: #002D82;
		}
	}
}
#mv{
	.wrap{
		padding:0;
		max-width:100%;
		width:100%;
		overflow:hidden;
		background: #002D82;
		background: linear-gradient(0deg,rgba(0, 45, 130, 1) 0%, rgba(0, 45, 130, 1) 26%, rgba(255, 255, 255, 1) 26%);
		.contents{
			max-width:1350px;
			width:calc(100% - 100px);			
			margin: 0 auto;
			z-index:0;
			justify-items:center;
			position: relative;
			.copy{
				position: relative;
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				h1{
					font-size:min(3vw,4.6rem);
					color: #FFFFFF;					
					display: inline;
					line-height: 2;
					position: absolute;
					top:4em;
					left:1em;
					.blue{
						background-color: #002D82;
						padding: 0.2em 0.5em;
					}
					.red{
						background-color: #E51836;
						padding: 0.2em 0.5em;
					}
				}
			}
			.scroll{
				color: #002D82;
				font-size: 1.8rem;
				letter-spacing: 0.5em;
				writing-mode: vertical-rl;
				position: absolute;
				left:-2em;
				top: 35%;
				transform: translateY(-50%);
				&::after{
					content:"";
					background-color: #002D82;
					width: 1px;
					height: 200px;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -170%;
				}
			}			
		}
	}
}
#message{
	.wrap{
		background-color: #002D82;
		overflow: hidden;
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: 62% auto;
				grid-column-gap: 5%;
				align-items: center;
				h2{
					color: #FFFFFF;
					border-bottom: #FFFFFF solid 3px;
				}
				p{
					color: #FFFFFF;
				}
				.img{
					margin-right: -60%;
				}
			}			
		}
	}
}
#news{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: auto 1fr;
				grid-column-gap: 100px;
				align-items: start;
				.news_inner{
					display: grid;
					grid-row-gap: 2em;
					dl{
						display: grid;
						grid-template-columns: 5em 7em 1fr;
						grid-column-gap: 1em;
						align-items:start;
						dt{
							line-height: 1.8;
						}
						.cat{
							color: #FFFFFF;
							display:grid;
							align-items:center;
							justify-content:center;
							height:1.8em;
							&.topics{
								background-color: #002D82;						
							}
							&.interview{
								background-color: #E51836;			
							}
							&.recruit{
								background-color: #ff6600;			
							}
						}
					}
				}
			}			
		}
	}
}
#about{
	.wrap{
		background-color: #E51836;
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: auto 62%;
				grid-column-gap: 5%;
				align-items: center;
				.img{
					margin-left: -5%;
				}
				h2{
					color: #FFFFFF;
					border-bottom: #FFFFFF solid 3px;
				}
				p{
					color: #FFFFFF;
				}
				ul{
					padding: 2em 0;
					li{
						color: #FFFFFF;
						line-height: 2;
						position: relative;
						padding-left: 1.2em;
						&::before{
							content:"";
							width: 0.7em;
							height: 0.7em;
							background-color: #FFFFFF;
							border-radius: 100px;
							position: absolute;
							top:0.7em;
							left:0;
						}
					}
				}
			}			
		}
	}
}
#attractive{
	.wrap{
		background-color: #F2F2F2;
		.contents{
			h2{
				color: #E51836;
				border-bottom: #E51836 solid 3px;
				margin-bottom: 90px;
			}
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-column-gap: 20px;
				align-items: start;
				dl{
					border: #E51836 solid 5px;
					padding: 20px 20px 0;
					display: grid;
					grid-row-gap: 30px;
					position: relative;
					background-color: #FFFFFF;
					dt{
						color: #E51836;
						font-size: 2.8rem;
						text-align: center;
						line-height: 1.4;
					}
					dd{
						text-align: center;
						line-height: 1.6;
						img{
							width: 70%;
						}
						&.number{
							position: absolute;
							top:-1.5em;
							left: 50%;
							transform: translateX(-50%);
							color: #E51836;
							font-size: 6rem;
						}
					}
				}
			}			
		}
	}
}
#strengths{
	.wrap{
		.contents{
			max-width: 100%;
			width: 100%;
			.title{
				max-width: 1100px;
				margin: 0 auto;
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 40% 60%;
				.detail{
					height: 100%;
					background-color: #002D82;
					display: grid;
					align-content: center;
					grid-row-gap: 2em;
					padding: 0 2em;
					dt{
						color:#FFFFFF;
						font-size: 3rem;
						line-height: 1.6;
					}
					dd{
						color:#FFFFFF;
						line-height: 1.6;
					}
				}
				&.ver2{
					grid-template-columns: 60% 40%;
					.detail{
						background-color: #E51836;
						order: 1;
						justify-content: center;
					}
					.img{
						order: 2;
					}
				}
			}			
		}
	}
}
#voice{
	.wrap{
		padding-top: 0;
		background: #E51836;
		background: linear-gradient(0deg,rgba(229, 24, 54, 1) 0%, rgba(229, 24, 54, 1) 30%, rgba(255, 255, 255, 1) 30%);
		.contents{
			h2{
				color: #E51836;
				border-bottom: #E51836 solid 3px;
			}
			p{
				color: #E51836;
			}
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-column-gap: 10px;
				margin-bottom: 50px;
				a{
					position:relative;
					img {
						position:absolute;
						display:block;
						width:100%;
						height:100%;
						top:0;
						left:0;
						z-index:0;
						object-fit:cover;
					}
					.voice_box{
						aspect-ratio: 3 / 5;
						width: 100%; 
						position: relative;
						z-index:1;
						display:grid;
						grid-template-rows:1fr auto;
						&::before{
							content:"";
							width: 100%;
							height: 100%;
							position: absolute;
							left:0;
							bottom:0;
							background: #000000;
							background: linear-gradient(180deg,rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.67) 89%);
						}
						&::after{
							position: absolute;
							content:"";
							background-image: url(../img/common/arrow_03.svg);
							background-size: cover;
							height: 20px;
							width: 20px;
							bottom:1.2em;
							right: 1em;
							display: inline-block;
						}
						dt{
							background-color: #E51836;
							color: #fff;
							writing-mode: vertical-rl;
							padding: 0.5em 0.3em;
							position: absolute;
							top:0;
							right:0;
						}
						.text{
							color: #fff;
							padding: 0 1em;
							font-size: 1.4rem;
							line-height: 1.6;
							position: relative;
							align-self:end;
							&::after{
								position: absolute;
								content:"";
								background-color: #E51836;
								height: 2px;
								width: 90%;
								bottom: -1em;
								left: 5%;
								display: inline-block;
							}
						}
						.name{
							color: #fff;
							padding: 2em 1em 1.5em;
							font-size: 1.4rem;
							position: relative;
							display:flex;
							flex-wrap:wrap;
							gap:.5em 1em;
							padding-right:3em;
						}
					}
				}

			}
			.btn{
				border: #E51836 solid 3px;
				span{
					color: #E51836;
				}
			}			
		}
	}
}
#rec_list{
	.wrap{		
		.contents{
			width: 100%;
			max-width: 100%;
			.title{
				max-width: 1100px;
				margin: 0 auto;
			}
			.tabmenu{
                display: grid;
                grid-template-columns: repeat(3,auto);
				max-width: 1100px;
				margin: 0 auto;
                li{
                    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;
					&:last-child{
						border-right: solid 4px #002D82;
					}
					span{
						font-size: 3.0rem;
						display: block;
					}
                    &.active{
                        background-color: #002D82;
						color:#FFFFFF;
                    }
                    &:hover{
                        background-color: #002D82;
						color:#FFFFFF;
                    }
                }
            }
			.tab_box{
				& > div {
					&:not(.active) {
						display:none;
					}
				}
				background-color: #002D82;
				padding: 90px 0;
				z-index: -1;
				.tab{
					width: 100%;
					max-width: 1100px;
					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{
							background-color: #002D82;
							grid-template-columns: auto 15px;
							span{
								font-size: 1.6rem;
								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;
							}
						}
					}
				}
			}			
		}
	}
}
#numbers{
	.wrap{	
		padding-top: 0;	
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 30px;
				.number_box{
					border: #002D82 5px solid;
					padding: 10px 20px 20px 20px;
					display: grid;
					grid-template-columns: 37% 60%;
					grid-column-gap: 3%;
					grid-row-gap: 20px;
					height: 200px;
					dt{
						background-color: #002D82;
						border-radius: 50px;
						padding: 0.3em 1.2em 0.5em;
						grid-area: 1/1/2/3;
						display: inline-block;
						color: #FFFFFF;
						font-size: 2rem;
						height: 1.2em;
						text-align: center;
					}
					dd{
						text-align: center;
						&.number{
							/*grid-area: 1/2/3/3;*/
							color: #002D82;
							font-size: 10rem;
							line-height: 1;
							align-items: end;
							text-align: eright;
							.sub{
								font-size: 2.2rem;
								font-weight: 500;
								display: block;
								text-align: center;
							}
							.unit{
								font-size: 5rem;
								&.jp{
									font-size: 3rem;
								}
							}
						}
						img{
							width: 60%;
							text-align: right;
						}
					}
					&.ver2{
						border-color: #E51836;
						dt{
							background-color: #E51836;
						}
						dd{
							&.number{
								color: #E51836;
							}
						}
					}
				}
			}		
		}
	}
}
@media (hover:hover) {

	section {
		.wrap {
			.contents {
				.btn{
					&:hover{
						background-color: #efefef;
					}
				}
			}
		}
	}
	#voice{
		.wrap{
			.contents{
				.contents_inner{
					a{
						&:hover{
							opacity: 1;
							.voice_box{
								&::before{
									opacity: 0;
									transition: .3s;
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

	section{
		.wrap{
			padding: 70px 0;
		}
		h2{
			span{
				font-size: 5rem;					
			}		
		}
	}
	#mv{
		.wrap{
			.contents{
				.scroll{
					font-size: 1.5rem;
					left:-2em;
					top: 35%;
					&::after{
						bottom: -200%;
					}
				}	
			}
		}
	}
	#message{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 60% auto;
					.img{
						margin-right: -25%;
					}
				}			
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					grid-column-gap: 50px;
					.news_inner{
						grid-row-gap: 2em;
						dl {
							grid-column-gap: 2em;
						}
					}					                
				}			
			}
		}
	}
	#about{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: auto 60%;
					.img{
						margin-left: -5%;
					}
					ul{
						padding: 1.5em 0;
					}
				}			
			}
		}
	}
	#attractive{
		.wrap{
			.contents{
				.contents_inner{
					dl{
						padding: 15px 15px 0;
						grid-row-gap: 20px;
						dt{
							font-size: 2.4rem;
						}
						dd{
							font-size: 1.5rem;
							img{
								width: 60%;
							}
							&.number{
								font-size: 5.5rem;
							}
						}
					}
				}			
			}
		}
	}
	#strengths{
		.wrap{
			.contents{
				.title{
					padding-left: 30px;
				}
				.contents_inner{
					.detail{
						grid-row-gap: 1.5em;
						dt{
							font-size: 2.4rem;
						}
					}
				}			
			}
		}
	}
	#rec_list{
		.wrap{		
			.contents{
				.title{
					padding-left: 30px;
				}
				.tabmenu{
					max-width: 1100px;
					li{
						font-size: 1.5rem;
						span{
							font-size: 2.6rem;
						}
					}
				}
				.tab_box{
					padding: 70px 0;
					.tab{
						width: calc(100% - 60px);
						max-width: 1100px;
						dl{
							padding: 30px 50px;
							dt{
								font-size: 1.8rem;
							}
							.btn{
								span{
									font-size: 1.5rem;
								}
							}
						}
					}
				}			
			}
		}
	}
	#numbers{
		.wrap{	
			padding-top: 0;	
			.contents{
				.contents_inner{
					.number_box{
						height: 180px;
						dd{
							text-align: center;
							&.number{
								font-size:min(8.33vw,10rem);
							}
						}
					}
				}		
			}
		}
	}
}

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

	section{
		.wrap{
			padding: 50px 0;
			.contents{
				p{
					font-size: 1.5rem;
				}
			}
		}
		h2{
			font-size: 1.6rem;
			margin-bottom: 30px;
			span{
				font-size: 4rem;					
			}		
		}
		.btn {
			font-size: 1.8rem;
		}
	}
	#mv{
		.wrap{
			.contents{
				.scroll{
					font-size: 1.4rem;
					&::after{
						bottom: -220%;
					}
				}	
			}
		}
	}
	#message{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 65% auto;
					grid-column-gap: 3%;
					.img{
						margin-right: -15%;
					}
				}			
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					grid-column-gap: 40px;
					.news_inner{
						grid-row-gap: 1.5em;
						dl {
							grid-column-gap: 1.5em;
							dt{
								font-size: 1.5rem;
							}
							dd{
								font-size: 1.5rem;
								&.cat{
									font-size: 1.4rem;
								}
							}
						}
					}					                
				}			
			}
		}
	}
	#about{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: auto 70%;
					grid-column-gap: 3%;
					.img{
						margin-left: -7%;
					}
					ul{
						padding: 1em 0;
						li{
							font-size: 1.5rem;
						}
					}
				}			
			}
		}
	}
	#attractive{
		.wrap{
			.contents{
				.contents_inner{
					dl{
						padding: 10px 10px 0;
						grid-row-gap: 15px;
						border: #E51836 solid 4px;
						height: 250px;
						dt{
							font-size: 2rem;							
						}
						dd{
							font-size:1.5rem;
							img{
								width: 50%;
							}
							&.number{
								font-size: 4rem;
							}
						}
					}
				}			
			}
		}
	}
	#strengths{
		.wrap{
			.contents{
				.contents_inner{
					.detail{
						grid-row-gap: 1em;
						dt{
							font-size: 2rem;
						}
						dd{
							font-size:min(1.56vw,1.6rem);
						}
					}
				}			
			}
		}
	}
	#voice{
		.wrap{
			.contents{
				.contents_inner{
					margin-bottom: 30px;
					a{
						.voice_box{
							&::after {
								height: 15px;
								width: 15px;
								bottom: 1em;
                            	right: 0.8em;
							}			
							dt{
								font-size:min(1.56vw,1.6rem);
							}
							.text{
								font-size:min(1.37vw,1.4rem);
							}
							.name{
								font-size:min(1.37vw,1.4rem);
							}
						}
					}
				}		
			}
		}
	}
	#rec_list{
		.wrap{		
			.contents{
				.tabmenu{
					max-width: 100%;
					li{
						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);
						}
					}
				}
				.tab_box{
					padding: 50px 0;
					.tab{
						width: calc(100% - 60px);
						max-width: 900px;
						dl{
							padding: 20px 30px;
							grid-column-gap: 2em;
							dt{
								font-size: 1.5rem;
							}
							.btn{
								grid-column-gap: 0.5em;
								padding: 0.5em 1em 0.5em 1.2em;
								span{
									font-size: 1.4rem;
								}
							}
						}
					}
				}			
			}
		}
	}
	#numbers{
		.wrap{	
			padding-top: 0;	
			.contents{
				.contents_inner{
					grid-gap: 20px;
					.number_box{
						height: 14.65vw;
						border: #002D82 4px solid;
						dt{
							font-size:min(1.76vw,1.8rem);
						}
						dd{
							text-align: center;
							&.number{
								font-size:min(8.33vw,10rem);
								.sub {
									font-size:min(1.95vw,2rem);
									font-weight: 500;
									display: block;
									text-align: center;
								}
							}							
						}
					}
				}		
			}
		}
	}
}

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

	section{
		.wrap{
			padding: 30px 0 40px;
			.contents{
				p{
					font-size: 1.4rem;
				}
			}
		}
		h2{
			font-size: 1.4rem;
			margin-bottom: 20px;
			span{
				font-size: 2.2rem;					
			}		
		}
		.btn {
			font-size: 1.6rem;
		}
	}
	#mv{
		.wrap{
			.contents{
				max-width:100%;
				width:calc(100% - 30px);			
				.copy{
					max-width: 100%;
					h1{
						font-size: min(5vw, 3rem);						
						top: 3.5em;
					}
				}	
				.scroll{
					display: none;
				}			
			}
		}
	}
	#message{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					grid-row-gap: 30px;
					.img{
						margin-right: 0;
						text-align: center;					
						img{
							width: 80%;		
						}				
					}
				}			
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					.news_inner{
						grid-row-gap:.75em;
						dl {
							grid-template-columns:5em 1fr;
							grid-gap:.5em;
							align-items:center;
							border-bottom:1px dotted #cccccc;
							padding-bottom:.66em;
							dt{
								font-size: 1.4rem;
								grid-area:2/1/3/3;
							}
							dd{
								font-size: 1.4rem;
								&.cat{
									font-size: 1.3rem;
									width:7em;
								}
							}
						}
						.btn {
							margin-top:.5em;
						}
					}					                
				}			
			}
		}
	}
	#about{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					grid-row-gap: 30px;										
					.img{
						text-align: center;	
						order: 2;
						margin-left: 0;
						img{
							width: 80%;	
						}						
					}
					.detail{
						order: 1;
						ul{
							padding: 1em 0;
							li{
								font-size: 1.4rem;
								line-height: 1.8;
								margin-bottom: 0.5em;
								&::before {
									top: 0.6em;
								}
							}
						}
					}					
				}			
			}
		}
	}
	#attractive{
		.wrap{
			.contents{
				h2{
					margin-bottom: 70px;
				}
				.contents_inner{
					grid-template-columns: 1fr;
					grid-row-gap: 60px;
					dl{
						padding: 15px 15px 0;
						grid-row-gap: 15px;
						border: #E51836 solid 3px;
						height: auto;
						align-items: start;
						dt{
							font-size: 1.8rem;							
						}
						dd{
							font-size:1.4rem;
							img{
								width: 35%;
							}
							&.number{
								font-size: 4rem;
							}
						}
					}
				}			
			}
		}
	}
	#strengths{
		.wrap{
			.contents{
				title {
                    padding-left: 20px;
                }
				.contents_inner{
					grid-template-columns: 30% 70%;
					&.ver2 {
						grid-template-columns: 70% 30%;
						.img{
							img{
								object-position: top 0 left -30px;
							}
						}				
					}
					.img{
						img{
							aspect-ratio: 1 / 1;
							object-fit: cover; 
							object-position: top 0 left -50px;
							width: 100%; 
							display: block;
						}
					}
					.detail{
						grid-row-gap: 0.5em;
						padding: 0 1em;
						dt{
							font-size:min(3.8vw,1.5rem);
						}
						dd{
							font-size:min(3.2vw,1.3rem);
						}
					}
				}			
			}
		}
	}
	#voice{
		.wrap{
			.contents_inner{
				grid-template-columns: repeat(2, 1fr)!important;
				margin-bottom: 30px!important;
				grid-row-gap: 10px;
				a{
					.voice_box{
						&::after {
							height: 15px;
							width: 15px;
						}			
						dt{
							font-size:min(3vw,1.5rem)!important;
						}
						.text{
							font-size:min(3vw,1.4rem)!important;
						}
						.name{
							font-size:min(3vw,1.4rem)!important;
						}
					}
				}
			}		
		}
	}
	#rec_list{
		.wrap{		
			.contents{
				.title {
                    padding-left: 20px;
                }
				.tabmenu{
					max-width: 100%;
					li{
						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(4vw,2.4rem);
						}
					}
				}
				.tab_box{
					padding: 30px 0;
					.tab{
						width: calc(100% - 40px);
						max-width: 100%;
						grid-row-gap: 30px;
						dl{
							padding: 15px;
							grid-row-gap: .5em;
							grid-template-columns: 1fr;
							.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;
								}
							}
						}
					}
				}			
			}
		}
	}
	#numbers{
		.wrap{	
			padding-top: 0;	
			.contents{
				.contents_inner{
					grid-gap: 10px;
					grid-template-columns: 1fr;
					.number_box{
						border: #002D82 3px solid;
						grid-row-gap: 10px;
						height: auto;
						padding: 10px;
						align-items: center;
						dt{
							font-size:min(3.8vw,1.8rem);
						}
						dd{
							text-align: center;
							&.number{
								text-align: end;
								font-size:min(16vw,10rem);
								padding-right: 20px;
								.sub {
									font-size:min(4vw,2rem);
								}
								.unit{
									font-size:min(7vw,3rem);
									&.jp{
										font-size:min(5vw,3rem);
									}
								}
							}							
						}
					}
				}		
			}
		}
	}
}

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





}