@charset utf-8;

#recruit .vision2045 { position: relative; }
#recruit .vision2045 .img { width: 100%;}
#recruit .vision2045-title { text-align: center; font-weight: bold; font-size: 2rem;}
#recruit .vision2045-usage { max-width: 90%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1em;  }
#recruit .vision2045-usage .pulse-btn { margin-right: 1em; }
#recruit .vision2045 .mainimg { position: relative; max-width: 1400px; margin: 0 auto; }
#recruit .vision2045 svg { width: 100%; position: absolute; left: 0; top: 0; margin: auto; }
#recruit .vision2045 svg polygon { fill: transparent; }
#recruit .vision2045 svg a { cursor: pointer; }

#recruit .vision-modal .title { background: #57a0f3; color: #FFF; text-align: center; border-radius: 10px; line-height: 1.3;  }
#recruit .vision-modal .title span{ display: block; font-size: .7em; }

#recruit .vision-modal .vision-img { max-width: 100%; max-height: 400px; object-fit: contain; }
#recruit .vision-modal .desc { max-width: 500px; margin: 1em auto 0;}
#recruit .vision-modal .list { margin-top: 1em; font-size: 1.125rem; font-weight: bold; }
#recruit .vision-modal .list > li { padding-left: 1em; }
#recruit .vision-modal .list > li::before { content: ''; width: .4em; height: .4em; display: inline-block; margin-left: -1em; margin-right: .6em; background: currentColor; border-radius: 50%; }
#recruit .vision-modal .sdgs { margin-top: 2em; }
#recruit .vision-modal .sdgs .ttl { font-weight: bold; border-bottom: 2px solid #0053A7; color: #0053A7; padding-bottom: .5em margin-bottom: .5em; }
#recruit .vision-modal .sdgs .icons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

#recruit .vision-pulse-01 { position: absolute; top: 42%; left: 26%; margin: auto; pointer-events: none; }
#recruit .vision-pulse-02 { position: absolute; top: 62%; left: 28%; margin: auto; pointer-events: none;  }
#recruit .vision-pulse-03 { position: absolute; top: 70%; left: 61%; margin: auto; pointer-events: none;  }
#recruit .vision-pulse-04 { position: absolute; top: 44%; left: 71%; margin: auto; pointer-events: none;  }
#recruit .vision-pulse-05 { position: absolute; top: 50%; left: 50%; margin: auto; pointer-events: none;  }

@media screen and (max-width: 768px) {
#recruit .vision2045-title { font-size: 1.3rem; }
#recruit .vision-modal .list { font-size: .9rem; }
}

#recruit .recruit-pmv { text-align: center; margin: 80px auto; max-width: 90%; }
#recruit .recruit-pmv h3 { font-weight: bold; text-align: center; font-size: .8rem; margin-bottom: 1em; color: #57a0f3; }
#recruit .recruit-pmv .purpose { font-size: 1.5rem; font-weight: bold; margin-bottom: 2em; }
#recruit .recruit-pmv .mission { font-size: 1.5rem; font-weight: bold; margin-bottom: 2em;  }

#recruit .recruit-pmv .list-value { text-align: left; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 1em; align-items: flex-start;  }
#recruit .recruit-pmv .list-value dt { font-weight: bold; font-size: .9rem; text-align: center; border: 1px solid #CCC; border-radius: 2em; padding: .3em;  }
#recruit .recruit-pmv .list-value dd { padding: 0; }
@media screen and (max-width: 768px) {
#recruit .recruit-pmv .list-value { grid-template-columns: 1fr; gap: .5em; }
#recruit .recruit-pmv .list-value dt { margin-bottom: .5em; }
#recruit .recruit-pmv .list-value dd { margin-bottom: 2em; }
}




#recruit .recruit-message .title { font-size: 2rem; font-weight: bold; margin: 1em 0; text-align: center; }
#recruit .recruit-message p { margin-bottom: 1.5em; }
#recruit .company-button {	max-width: 480px; width: 100%; margin: 32px auto}
#recruit .company-button a {
	width: 100%;
	height: 64px;
	border: 2px solid #0053A7!important;
	text-decoration: none;
	color: #0053A7;
	display:flex; flex-direction:column; justify-content:center; align-items:center;
}


#recruit .sign{ font-weight:500;}
#recruit .sign span{ display:block; font-weight:500; }
#recruit .sign span span{ display:block; font-size:1.3rem; margin-top:1em;}
#recruit .sign img{ width:200px; height:auto;}




#recruit .list-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em 2em; }
#recruit .list-jobs .title { background: none; padding: 0; margin: 1em 0 .5em; color: #000; font-size: 1.2rem; }
#recruit .list-jobs img { width: 100%; }
#recruit .list-jobs .workplace { font-size: .8em; margin-bottom: 1em; }

@media screen and (max-width: 768px) {
#recruit .recruit-pmv { margin: 50px auto; }
#recruit .recruit-pmv .purpose { font-size: 1.25rem; }
#recruit .recruit-pmv .mission { font-size: 1.25rem; }
#recruit .list-jobs { grid-template-columns: 1fr; }
}

#recruit .list-benefits { border-top: 1px solid #CCC; }
#recruit .list-benefits > div { display: flex; border-bottom: 1px solid #CCC; padding: 1.5em 0; }
#recruit .list-benefits dt { width: 30%; font-weight: bold; padding: 0; }
#recruit .list-benefits dd { width: 70%; padding: 0 0 0 1em; }

@media screen and (max-width: 768px) {
#recruit .list-benefits > div { flex-wrap: wrap; }
#recruit .list-benefits dt { width: 100%; }
#recruit .list-benefits dd { width: 100%; padding: .5em 0 0 ;}
}

#recruit .work-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; }
#recruit .work-data > li { border: 1px solid #74b9fe; padding: 1em; border-radius: 8px; }
#recruit .work-data .ttl { font-weight: bold; text-align: center; margin-bottom: 1em ;font-size: .9rem;  }
#recruit .work-data .num { font-size: 2.5rem; line-height: 1; font-weight: bold;  margin: 0 .2em;}
#recruit .work-data .year { font-size: .7em; color: #666; display: block; }
#recruit .work-data .ikukyu { width: 100%; font-size: .8rem; }
#recruit .work-data .ikukyu th { text-align: center; }
#recruit .work-data .ikukyu tr + tr { border-top: 1px solid #CCC; }
#recruit .work-data .ikukyu .num { font-size: 1.5rem;} 

@media screen and (max-width: 768px) {
#recruit .work-data {  grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media screen and (max-width: 450px) {
#recruit .work-data {  grid-template-columns: 1fr; }
}
#recruit .faq-title {  }
#recruit .list-faq { margin-bottom: 100px; }
#recruit .list-faq > div { border-bottom: 1px solid #CCC; padding-bottom: 1.5em; margin-bottom: 1.5em;}
#recruit .list-faq dt { font-weight: bold; padding-left: 2rem; margin-bottom: .5em; }
#recruit .list-faq dt::before { content: 'Q.'; font-size: 1.25em; margin-left: -2rem; width: 2rem; display: inline-block; }


.js-modal[hidden] { display: none; }
.js-modal { position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: 1000;}
.modal__bg { position: absolute; inset: 0; background: rgb(255 255 255 / 70%); }

.modal__content { position: relative; z-index: 1; width: 90%; max-width: 1000px; margin: 5vh auto; background: #FFF; border-radius: 20px;
padding: 2rem 5%; border: 2px solid #007aff; }
.modal__content img { display: block; width: fit-content; height: auto; margin: 0 auto; }
.modal__close { position: absolute; top: -40px; right: 0; padding: 0; font-size: 2rem; background: none; border: none; height: 1em; }

@media screen and (max-width: 768px) {
.modal__content { padding: 1.5em 5%;}
}


.pulse-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: #57a0f3; box-shadow: 0 0 20px #1da1f2; cursor: pointer; border: 2px solid #FFF; }
/* ボタンの波紋 */
.pulse-btn::before, .pulse-btn::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; border: 1px solid #1da1f2; border-radius: 50%; box-sizing: border-box; pointer-events: none; animation: pulsate 2s linear infinite; }
.pulse-btn::after { animation-delay: 1s; }

/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% { transform: scale(1); opacity: 1;}
  100% {transform: scale(2); opacity: 0;}
}

.gray {
	background: #eee;
	padding: 2rem;
}
.gray .mynavi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 32px;
}
.gray .mynavi div {
	font-weight: bold;
	font-size: 18px;
	display:flex; flex-direction:column; justify-content:center;
}
@media screen and (max-width: 767px) {
	.gray .mynavi div {
		font-size: 16px;
	}
}