@charset "utf-8";
/*------------------------------------------------------------
	about
------------------------------------------------------------*/
.pageTitle {
  background-image: url(../img/about/page_title_bg.webp);
}
#main .message {
  padding: 14.1rem 0 15rem;
}
#main .message img {
  border-radius: 0.6rem;
}
#main .message .name {
  margin-top: 1.3rem;
  display: block;
  text-align: right;
  letter-spacing: 0.03em;
}
#main .message .name span {
  margin-top: 1px;
  display: block;
  font-size: 2rem;
  font-weight: 500;
}
#main .message p {
  line-height: 2.18;
  letter-spacing: 0.026em;
}
#main .reason {
  padding: 9.2rem 8rem 15.1rem;
  background-image: linear-gradient(to bottom, #0c5c91 0%, #021e53 100%);
  border-radius: 1rem;
}
#main .reason .headLine03 {
  margin-bottom: 6.2rem;
  color: #fff;
}
#main .reason .headLine03::before {
  background-color: #fff;
}
#main .reason .topText {
  margin-bottom: 6.7rem;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.03em;
}
#main .reason .imgBox {
  margin-bottom: 3rem;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
#main .reason .imgBox:last-child {
  margin-bottom: 0 !important;
}
#main .reason .pho {
  width: 33.4rem;
}
#main .reason img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .reason .textBox {
  width: calc(100% - 33.4rem);
  padding: 5.2rem 7rem 1rem;
}
#main .reason .title {
  width: 28.1rem;
  margin: 0 0 2.3rem -7rem;
  padding: 0.7rem 2rem 0.8rem 7rem;
  color: #fff;
  line-height: 1.5;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background-color: #075c91;
  clip-path: polygon(0 0, calc(100% - 2rem) 0%, 100% 100%, 0% 100%);
}
#main .reason .ttl {
  margin-bottom: 2.1rem;
  color: #075c91;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
#main .reason p {
  line-height: 1.875;
  letter-spacing: 0.03em;
}
#main .philosophy {
  padding: 11.3rem 0 15.2rem;
}
#main .philosophy p {
  font-size: 2rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
}
@media all and (min-width: 897px) {
  #main .message .headLine03 {
    margin-bottom: -4.2rem;
  }
  #main .message .imgBox {
    align-items: center;
  }
  #main .message .pho {
    width: 17.2rem;
    margin: 1.2rem 0 0 auto;
    order: -1;
  }
  #main .message .textBox {
    margin: 9rem 0 0;
  }
  #main .philosophy .imgBox {
    padding-top: 1rem;
    align-items: center;
  }
  #main .philosophy .pho {
    width: 40.9rem;
  }
  #main .philosophy .textBox {
    width: 60rem;
  }
}
@media all and (max-width: 896px) {
  .pageTitle {
    background-image: url(../img/about/page_title_bg_sp.webp);
  }
  #main .message {
    padding: 5.3rem 0 6.6rem;
  }
  #main .message .imgBox {
    margin-top: -0.3rem;
    display: block;
  }
  #main .message .pho {
    margin-top: 5.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  #main .message img {
    width: 17.2rem;
  }
  #main .message .name {
    margin: 0 1.6rem -0.4rem 0;
    order: -1;
  }
  #main .message .name span {
    margin-top: 0;
    font-size: 1.6rem;
  }
  #main .message p {
    line-height: 1.71;
  }
  #main .reason {
    margin: 0 -2.4rem;
    padding: 6rem 2.4rem 6.6rem;
    border-radius: 0;
  }
  #main .reason .headLine03 {
    margin-bottom: 4.8rem;
  }
  #main .reason .topText {
    margin-bottom: 6.4rem;
    font-size: 1.4rem;
    line-height: 1.71;
  }
  #main .reason .imgBox {
    margin-bottom: 3.1rem;
    display: block;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
  }
  #main .reason .pho {
    width: auto;
  }
  #main .reason .textBox {
    width: auto;
    padding: 3.2rem 2.4rem 2.3rem;
  }
  #main .reason .title {
    width: 23.8rem;
    margin: 0 0 1.7rem -2.4rem;
    padding-left: 2.5rem;
  }
  #main .reason .ttl {
    margin-bottom: 1rem;
    font-size: 2rem;
  }
  #main .reason p {
    line-height: 1.71;
    letter-spacing: 0.026em;
  }
  #main .philosophy {
    padding: 6.3rem 0 6.7rem;
  }
  #main .philosophy .imgBox {
    padding-top: 0.2rem;
    display: block;
  }
  #main .philosophy p {
    font-size: 1.4rem;
    line-height: 1.71;
  }
  #main .philosophy .pho {
    margin-top: 4.4rem;
  }
  #main .philosophy img {
    width: 100%;
  }
}