@charset "utf-8";
/* CSS Document */

/*人を知る*/
h1{
	width:90%;
	max-width:1200px;
	margin:auto auto 50px auto;
}
.people-content-back{
	background-color:#F5F8F2;
	padding:50px 0;
}
.former-back{
	background-color:#ECF1F7;
}
.people-content1{
	width:80%;
	max-width:1200px;
	margin:0 auto;
}
h2{
	display:flex;
	align-items:center;
	margin:0 0 40px 0;
	width:80%;
	max-width:1200px;
}
h2::before{
	content:"●";
	color:#417E13;
	font-size:16px;
	margin-right:10px;
}
.former-content1 h2::before{
	color:#0D519E;
}


.people-content1{
}
.people-content1 ul{
	padding-left:0;
	list-style:none;
	display:flex;
	justify-content:flex-start;
	gap:30px;
}
.people-content1 ul li{
	width:25%;
	min-width:230px;
}
.people-content1 ul li a{
	display:block;
	width:100%;
	position:relative;
}
.people-img{
	width:100%;
}
.people-img img{
	width:100%;
	display:block;
	border-radius:15px;
	box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1);
}
.people-content1 .name{
	
}
.people-content1 .name{
	font-size:18px;
	margin:10px 0;
}
.people-content1 .name span{
	color:#417E13;
	margin-right:10px;
	font-size:15px;
	display:block;
}
.former-content1 .name span{
	color:#0D519E;
}
@media(max-width:640px){
.people-content1 ul{
	padding-left:0;
	list-style:none;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:30px;
	flex-direction:column;
}	
}
@media(max-width:480px){
h2{
	margin:0 0 40px 0;
	font-size:22px;
}
h2::before{
	font-size:16px;
	margin-right:10px;
}	
}
/*矢印部分*/
.people-content1 ul li a p{
	position:absolute;
	bottom:0;
	right:0;
	background-color:#417E13;
	margin:0;
	display:flex;
	align-items:center;
	padding:0 20px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
}
.former-content1 ul li a p{
	background-color:#0D519E;
}
.arrow1 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 4px;
  margin: 18.4px 0;
  border-radius: 9999px;
  background-color: #fff;
}

.arrow1::before,
.arrow1::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 15px;
  height: 4px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 2px) 50%;
}

.arrow1::before {
  transform: rotate(45deg);
}

.arrow1::after {
  transform: rotate(-45deg);
}
.people-content1 ul li a p .arrow1{
	margin-left:10px;
}
/* aタグにhoverしたとき、pの背景と文字色を反転 */
.people-content1 ul li a:hover p {
  background-color: #fff;
  color: #417E13;
  transition: background-color 0.3s, color 0.3s;
}

/* aタグにhoverしたとき、矢印の色も変更 */
.people-content1 ul li a:hover .arrow1,
.people-content1 ul li a:hover .arrow1::before,
.people-content1 ul li a:hover .arrow1::after {
  background-color: #417E13;
  transition: background-color 0.3s;
}

.former-content1 ul li a:hover p {
  color: #0D519E;
}

/* aタグにhoverしたとき、矢印の色も変更 */
.former-content1 ul li a:hover .arrow1,
 .former-content1 ul li a:hover .arrow1::before,
 .former-content1 ul li a:hover .arrow1::after {
  background-color: #0D519E;
}
/*矢印部分ここまで*/