@charset "utf-8";

/* CSS Document */

/*採用担当者メッセージ*/
html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}

.bold{
	font-weight: bolder;
}
.saiyo-br{
	display: inline-block;
}

/*タイトル*/
.saiyou-message-img-1 {
	position:relative;
	width:100%;
}
.saiyou-message-img-1 img{
	width: 100%;
	height: auto;
}
.saiyou-message-img-1 h2{
	position: absolute;
	color: #fff;
	font-weight: bold;
	font-size: 56px;
	bottom: 0;
	right: 0;
	background-color: rgba(28,189,241,0.8); 
	display:inline;
	line-height:88px;
	padding:8px 4px 8px 32px;
}
@media(max-width:1200px){
	.saiyou-message-img-1 h2{
		font-size: 40px;
		line-height:68px;
		padding:8px 4px 8px 32px;;
	}
}
@media(max-width:960px){
	.saiyou-message-img-1 h2{
		font-size: 36px;
		line-height:56px;
		padding:8px 4px 8px 24px;;
	}
}
@media(max-width:768px){
	.saiyou-message-img-1 h2{
		font-size: 28px;
		line-height:44px;
		padding:8px 4px 8px 24px;;
	}
}
@media(max-width:640px){
	.saiyou-message-img-1 h2{
		font-size: 24px;
		line-height:38px;
		padding:8px 4px 8px 16px;;
	}
}
@media(max-width:520px){
	.saiyou-message-img-1 h2{
		font-size: 20px;
		line-height:34px;
		padding:8px 4px 8px 16px;
	}
}
@media(max-width:440px){
	.saiyou-message-img-1 h2{
		font-size: 17px;
		line-height:28px;
		padding:6px 4px 6px 14px;
	}
}


/*自己紹介*/
.introduction{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 120px;
	padding-bottom: 120px;
}
.introduction-text{
	width: 50%;
	padding-right: 24px;
	padding-left: 5%;
	font-size: 20px;
}
.blue-1{
	color: #0070A5;
	font-weight: bolder;
	align-items: center; 
    display: flex; 
}
.blue-1:before{
	background-color: #0070A5; 
	content: "";
	height: 2px; 
	width: 24px; 
}
.blue-1:before {
	margin-right: 8px;
}
.blue-2{
	color: #0070A5;
	font-weight: bolder;
}
.name-img{
	max-width: 200px;
}
.name-img img{
	width: 100%;
	height: auto;
}
.saiyou-message-img-2{
	width: 50%;
	max-width: 768px;
	padding-left: 24px;
}
.saiyou-message-img-2 img{
	width: 100%;
	height: auto;
	border-radius: 30px 0 0 30px;
}
@media(max-width:960px){
	.introduction-text{
		padding-right: 24px;
		padding-left: 5%;
		font-size: 18px;
	}
}
@media(max-width:760px){
	.introduction{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 24px;
		padding-bottom: 80px;
	}
	.introduction-text{
		width: 100%;
		padding-right: 5%;
		padding-left: 5%;
		padding-bottom: 32px;
		margin-right: auto;
		font-size: 18px;
	}
	.blue-1{
		color: #0070A5;
		font-weight: bolder;
		align-items: center; 
		display: flex; 

	}
	.blue-1:before{
		background-color: #0070A5;
		content: "";
		height: 2px;
		width: 24px; 
	}
	.blue-1:before {
		margin-right: 8px;
	}
	.blue-2{
		color: #0070A5;
		font-weight: bolder;
	}
	.name-img{
		max-width: 200px;
	}
	.name-img img{
		width: 100%;
		height: auto;
	}
	.saiyou-message-img-2{
		width: 100%;
		max-width: 900px;
		padding-left: 5%;
		padding-right: 5%;
	}
	.saiyou-message-img-2 img{
		width: 100%;
		height: auto;
		border-radius: 20px;
	}
	.name-img img{
		width: 80%;
		height: auto;
	}
}
@media(max-width:520px){
	.introduction-text{
		width: 100%;
		padding-right: 5%;
		padding-left: 5%;
		padding-bottom: 40px;
		margin-right: auto;
		font-size: 16px;
	}
	.name-img img{
		width: 60%;
		height: auto;
	}
	.introduction{
		padding-top: 24px;
		padding-bottom: 56px;
	}
	.introduction-text{
		padding-bottom: 40px;
		font-size: 18px;
	}
}


/*仕事への想い　具体的な役割*/
.border-1{
	border-top: dashed 3px #0070A5;
	border-radius: 30px;
	width: 50%;
	margin-left: 50%;
}
.border-2{
	border-top: dashed 3px #0070A5;
	border-radius: 30px;
	width: 50%;
	margin-right: 50%;
}
.saiyo-content-background-color{
	background-color: #F6FCFF;
	padding-top: 120px;
	padding-bottom: 8px;
}
.saiyo-content{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 112px;
}
.saiyo-content h3{
	color: #0070A5;
	font-weight: bold;
	font-size: 26px;
	/*background-color:#0070A5;
	color:#fff;
	padding:5px 15px;
	border-radius:3px;
	display:inline-block;*/
}
.saiyo-content p{
	font-size: 20px;
	color:#333333;
}
.saiyo-content ul{
	padding-left: 10px;
}
.saiyo-content li{
	font-weight: bolder;
	font-size: 20px;
	color:#333333;
	display:flex;
	margin-bottom:10px;
}
.saiyo-content li::before{
	content:"";
	display:block;
	height:8px;
	width:8px;
	min-width:8px;
	background-color:#0070A5;
	margin-right:7px;
	margin-top:12px;
	border-radius:100%;
}
.saiyo-content-text-1{
	width: 50%;
	padding-left: 32px;
}
.saiyo-content-text-2{
	width: 50%;
	padding-right: 32px;
}
.saiyou-message-img-3{
	width: 50%;
	padding-right: 32px;
}
.saiyou-message-img-3 img{
	width: 100%;
	height: auto;
	border-radius: 20px;
}
.saiyou-message-img-4{
	width: 50%;
	padding-left: 32px;
}
.saiyou-message-img-4 img{
	width: 100%;
	height: auto;
	border-radius: 20px;
}
@media(max-width:1200px){
	.saiyo-content h3{
		font-size: 24px;
	}
	.saiyo-content p{
		font-size: 18px;
	}
	.saiyo-content li{
		font-size: 18px;
		line-height: 2;
	}
}
@media(max-width:960px){
	.saiyo-content h3{
		font-size: 22px;
	}
	.saiyo-content p{
		font-size: 16px;
	}
	.saiyo-content li{
		font-size: 16px;
		line-height: 2;
	}
}
@media(max-width:760px){
    .border-1{
		border-top: dashed 3px #0070A5;
		border-radius: 30px;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
    .border-2{
		border-top: dashed 3px #0070A5;
		border-radius: 30px;
		width: 90%;
		margin-right: 5%;
		margin-left: 5%;
	}
	.saiyo-content-background-color{
		background-color: #F6FCFF;
		padding-top: 80px;
		padding-bottom: 40px;	
	}
	.saiyo-content{
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.column-reverse{
		flex-direction: column;	
	}
	.saiyo-content h3{
		color: #0070A5;
		font-weight: bold;
		font-size: 22px;
	}
	.saiyo-content p{
		font-size: 16px;
	}
	.saiyo-content li{
		font-size: 16px;
	}
	.saiyo-content-text-1{
		width: 100%;
		padding-left: 0px;
		padding-bottom: 24px;
	}
	.saiyo-content-text-2{
		width: 100%;
		padding-right: 0px;
		padding-bottom: 24px;
	}
	.saiyou-message-img-3{
		width: 100%;
		padding-right: 0px;
	}
	.saiyou-message-img-3 img{
		width: 100%;
		height: auto;
		border-radius: 30px;
	}
	.saiyou-message-img-4{
		width: 100%;
		padding-left: 0px;
	}
	.saiyou-message-img-4 img{
		width: 100%;
		height: auto;
		border-radius: 30px;
	}
}
@media(max-width:520px){
	.saiyo-content-background-color{
		background-color: #F6FCFF;
		padding-top: 56px;
		padding-bottom: 16px;	
	}
	.saiyo-content{
		margin-bottom: 40px;
	}
}


/*メッセージ*/
.saiyo-message{
	text-align: center;
	padding: 128px 0 112px;
	width: 90%;
	margin: 0 auto;
	color: #0070A5;
}
.saiyo-message h4{
	font-size: 26px;
	font-weight: bold;
}
.saiyo-message p{
	font-size: 20px;
	font-weight: bold;
	line-height: 2.4;
	padding-top: 16px;
	padding-bottom: 8px;
}
.message-name{
	font-size: 18px;
	margin-top: 40px;
	color: #4D4D4D;
	display: flex;
	justify-content: center;
	align-items: center;
}
.message-name:before, .message-name:after {
	border-top: 1px solid;
	border-radius: 5px;
	content: "";
	width: 3em; 
}
.message-name:before {
	margin-right: 1em;
}
.message-name:after {
	margin-left: 1em; 
}
@media(max-width:760px){
	.saiyo-message h4{
		font-size: 24px;
		font-weight: bold;
	}
	.saiyo-message p{
		font-size: 18px;
		font-weight: bold;
		line-height: 2.4;
	}
	.message-name{
		font-size: 16px;
		margin-top: 40px;
		color: #4D4D4D;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
@media(max-width:640px){
	.saiyo-message{
	padding: 80px 0 100px;
}
}
@media(max-width:520px){
	.saiyo-message h4{
		font-size: 22px;
		font-weight: bold;
	}
	.saiyo-message p{
		font-size: 16px;
		font-weight: bold;
		line-height: 2.4;
	}
	.message-name{
		font-size: 14px;
		margin-top: 40px;
		color: #4D4D4D;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.message-name:before, .message-name:after {
		border-top: 1px solid;
		content: "";
		width: 2em; 
	}
}
@media(max-width:480px){
	.saiyo-message{
	padding: 60px 0 80px;
}
}
/*採用メインビジュアル*/
.saiyou-main-visual {
	width: 100%;
    background-image: url("../images/message/saiyou-message-0.webp");	
	height:90vh;
	background-size:145%;
	background-position:35% 47%;
	position:relative;
}
.saiyou-main-visual h2{
	color: #fff;
	font-weight: bold;
	font-size: 50px;
	line-height:75px;
	position:absolute;
	right:0;
	top:28%;
	background-color: rgba(28,189,241,0.85); 
	padding:10px 25px;
	margin-bottom:30px;
}
@media(max-width:1400px){
.saiyou-main-visual h2{
	font-size: 40px;
	line-height:60px;
	right:0;
	top:25%;
	padding:10px 25px;
}	
}
@media(max-width:1200px){
.saiyou-main-visual {
	width: 100%;
	height:70vh;
	background-size:145%;
	background-position:25% 50%;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 33px;
	line-height:50px;
	right:0;
	top:42%;
	padding:10px 25px;
}	
}
@media(max-width:1024px){
.saiyou-main-visual {
	width: 100%;
	height:70vh;
	background-size:145%;
	background-position:25% center;
	position:relative;
}
}
@media(max-width:960px){
.saiyou-main-visual {
	width: 100%;
	height:60vh;
	background-size:145%;
	background-position:25% 60%;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 28px;
	line-height:45px;
	right:0;
	top:48%;
	padding:10px 25px;
}	
}
@media(max-width:768px){
.saiyou-main-visual {
	width: 100%;
	height:60vh;
	background-size:155%;
	background-position:30% 70%;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 28px;
	right:0;
	top:48%;
	padding:10px 25px;
}	
}
@media(max-width:640px){
.saiyou-main-visual {
	width: 100%;
	height:50vh;
	background-size:155%;
	background-position:30% 70%;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 25px;
	line-height:40px;
	right:0;
	top:55%;
	padding:10px 25px;
}	
}
@media(max-width:520px){
.saiyou-main-visual {
	width: 100%;
	height:50vh;
	background-size:155%;
	background-position:30% bottom;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 22px;
	line-height:35px;
	right:0;
	top:55%;
	padding:10px 15px;
}
}
@media(max-width:480px){
.saiyou-main-visual {
	width: 100%;
	height:42vh;
	background-size:155%;
	background-position:30% bottom;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 22px;
	right:0;
	top:55%;
	padding:10px 15px;
}
}
@media(max-width:420px){
.saiyou-main-visual {
	width: 100%;
	height:40vh;
	background-size:155%;
	background-position:30% bottom;
	position:relative;
}
.saiyou-main-visual h2{
	font-size: 20px;
	line-height:30px;
	right:0;
	top:55%;
	padding:5px 10px;
}
}
@media(max-width:375px){
.saiyou-main-visual {
	width: 100%;
	height:40vh;
	background-size:155%;
	background-position:30% 60%;
	position:relative;
}
}
.text-bold {
	font-weight:bold;
}