.page-title {
  align-items: center;
  text-align: center;
  margin-top: clamp(40px, 5vw, 100px);
  margin-bottom: clamp(32px, 2.2vw, 64px);
  color: #fff;
}

@media (max-width: 768px) {
  .page-title {
  padding-top:clamp(80px, 9vw, 200px)
  }
}

.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;
}

.vision-title {
  color: #001E56;
  margin-bottom: clamp(32px, 2.4vw, 64px);
  align-items: center;
  text-align: center;
}

.line {
  width: 2px;          /* 線の太さ */
  background: #ccc;   
  margin:120px 40px; /* 線の色 */
  align-self: stretch;   
}


.company-vision{
  display: grid;
  grid-template-columns: 1fr 2px 1fr;   /* 左:等幅 / 仕切り2px / 右:等幅 */
  align-items: start;
  column-gap: clamp(24px, 2.4vw, 48px); /* 仕切りの左右余白 */
  margin-bottom: clamp(102px, 8vw, 200px);
  text-align: center;
}

.mission { 
  grid-column: 1; display:flex; flex-direction:column; gap:clamp(24px,2.4vw,48px); }
.vision  { 
  margin: clamp(18px, 1.7vw, 42px) clamp(42px, 4vw, 106px);
  margin-top: clamp(80px, 9vw, 200px);
  margin-bottom: clamp(80px, 9vw, 200px);
  grid-column: 3; display:flex; flex-direction:column; gap:clamp(24px,2.4vw,48px); }

  
@media (max-width: 768px) {
.company-vision{
  display: flex;
  flex-direction: column;
  }
.line {
  display:none;
  }
.mission{
  margin-bottom:clamp(102px, 8vw, 200px);
}
.vision-title {
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.vision  { 
  margin: 0 auto;
}
}

.value{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: center;
  text-align: center;
  gap: clamp(24px, 2.4vw, 48px);
}

@media (max-width: 767px){
  .value{   grid-template-columns: repeat(1, minmax(0,1fr));
 }
}

.value-item{
  padding:clamp(24px, 3.3vw, 64px)clamp(18px, 1.8vw, 32px);
  background-color:#F2F9FF;
  border-radius: clamp(16px, 1.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap:clamp(12px, 1.2vw, 24px);
  align-items: center;
  margin:0 auto;
}

.value-item h5{
  color: #001E56;
  font-weight: 600;
}

.ceomesseage {
  display:flex;
  justify-content: space-between;
}

@media (max-width: 767px){
.ceomesseage {
  flex-direction: column;
  align-items: center;
}
.value-item{
  max-width:280px;
}

}

.ceo-text{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.4vw, 48px);
  margin-left: clamp(32px, 3.2vw, 64px);
}

.ceomesseage img{
  display:block;
  width: clamp(248px, 32.5vw, 624px);
  height:auto;
  aspect-ratio: 117 / 100;  
  object-fit: contain;
}


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

/* 前の引用符 
.message::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: url("img/quotation.svg") no-repeat center/contain;
  vertical-align: middle;
}

/* 後の引用符 
.message::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: url("img/quotation.svg") no-repeat center/contain;
  vertical-align: middle;
  transform: scale(-1, -1); /* 閉じる用に反転 
}*/

.ceo{
  padding:clamp(40px, 5vw, 100px) clamp(102px, 8vw, 200px);
  background-color: #fff;
  border-radius: clamp(16px, 3vw, 40px);
  margin:clamp(12px, 1.2vw, 24px);
}

.value-item img{
  width: clamp(96px, 8.3vw, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}

.parts02{
  width: clamp(290px, 38vw, 730px);
  display:block;
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  position:absolute;
  top:clamp(580px, 68vw, 1080px);
  left:50%;
  transform:translateX(-50%);
} 

@media (max-width: 430px){
.ceomesseage img{
  width:clamp(280px, 74vw, 320px);
  margin-bottom:clamp(24px, 2.4vw, 48px) ;
}
.ceo-text{
  margin-left:0;
}
.ceo{
  padding:32px;
}
.card {
    padding: clamp(50px, 6.6vw, 128px) clamp(12px, 1.2vw, 24px);
}
}