.parts01{
  padding:0;
  width: clamp(268px, 35vw, 670px);
  display:block;
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  position:absolute;
  top:clamp(64px, 8.3vw, 160px);
  left:0;
  z-index: -1;
  mix-blend-mode: overlay;
}

.parts03{
  padding:0;
  width: clamp(220px, 28vw, 550px);
  display:block;
  height:auto;
  aspect-ratio: auto; 
  object-fit: contain;
  position:absolute;
  top:clamp(-64px, -8.3vw, -160px);
  right:0;
  z-index: -1;
  mix-blend-mode: overlay;
}


.jobmeta{
  display:flex;
  gap:clamp(12px, 1.6vw, 32px);
}

.companyname{
  display:flex;
  gap:clamp(12px, 1.6vw, 32px);
}

.career{
  display:flex;
  gap:clamp(12px, 1.6vw, 32px);
}

.parts01{
  padding:0;
  width: clamp(268px, 35vw, 670px);
  display:block;
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  position:absolute;
  top:clamp(64px, 8.3vw, 160px);
  left:0;
  z-index: -1;
  mix-blend-mode: overlay;
}

.parts03{
  padding:0;
  width: clamp(220px, 28vw, 550px);
  display:block;
  height:auto;
  aspect-ratio: auto; 
  object-fit: contain;
  position:absolute;
  top:clamp(-64px, -8.3vw, -160px);
  right:0;
  z-index: -1;
  mix-blend-mode: overlay;
}

.humanstory{
  width: clamp(556px, 73vw, 1390px);
  align-items: center;
  margin: 0 auto;
  margin-bottom: clamp(80px, 9vw, 200px);
}

.captertitle {
  position: relative;
  line-height: 1.9;
  color: #001E56;
  font-weight: 700;
}

.captertitle::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: url("../img/quotation.svg") no-repeat center/contain;
  vertical-align: top;
  padding-top:16px;
}

.captertitle::after {
  
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: url("../img/quotation.svg") no-repeat center/contain;
  vertical-align: top;
  transform: scale(-1, -1);
  padding-top:16px;
}



.capterbody{
  line-height: 1.9;
}

.capter{
  margin-bottom: clamp(24px, 2.4vw, 48px);
}

.main-image{
  width:100%;
  aspect-ratio: 2 / 1;
  display:block;
  margin: clamp(32px, 4.3vw, 80px) auto;
  border-radius: 12px;
  object-fit: cover;
  background: #ddd;
}

.comment{
  position: relative;
  padding:clamp(24px, 2.4vw, 48px);
  border-radius: clamp(16px, 1.6vw, 32px);
  background: #F2F7FF;
  line-height: 1.9;
  color: #2b3a55;
}

.commenttitle {
  display: flex;
  align-items: center; /* ← 垂直中央ぞろえ */
  gap: 8px; /* アイコンと文字の間隔 */
  font-weight: 700;
  color: #001E56;
}

.commenttitle img {
  width:clamp(24px, 2.4vw, 48px);  /* 好みで調整 */
  height:clamp(24px, 2.4vw, 48px);
  display: block;
}

.humanmeta{
  display:flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 32px);
  margin-top: clamp(24px, 2.4vw, 48px);
}

.storytitle{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(32px, 3.4vw, 64px);
  gap: clamp(12px, 1.6vw, 32px);
  flex-wrap: wrap;
}

@media (max-width: 430px){
.card{
  padding:clamp(32px, 2.2vw, 64px) clamp(16px, 4vw, 24px);
  background-color: #FFFFFF;
  border-radius: clamp(32px, 2.2vw, 64px);
  margin-top: clamp(80px, 9vw, 200px);
  margin-bottom:clamp(80px, 9vw, 200px);
}
.comment{
  padding:clamp(16px, 4vw, 24px);
}
.humanstory{
  width: clamp(284px, 88vw, 382px);
}

}