@charset "utf-8";

.profile{
  margin:4rem auto 7.5rem;
  width:80%;
  max-width:1345px;
}

.profile-wrap{
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
}

.profile-img{
  width:40%;
  position:relative;
  z-index:0;
}

.profile-img::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:40px;
  background:#529EA3;
  z-index:-1;
  top:3rem;
  left:3rem;
}

.profile-img img{
  border-radius:40px;
}

.profile-text{
  width:50%;
}

.profile-name{
  margin-bottom:1.5rem;
}

.profile-name p:first-child{
  font-size:clamp(1.5rem, 1.364rem + 0.45vw, 1.875rem);
  font-weight:bold;
}

.profile-name p:nth-child(2){
  font-size:1rem;
  font-weight:bold;
}

.profile-name p:nth-child(3){
  font-size:1rem;
  color:#529EA3;
}

.profile-wrap2{
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
  margin-top: 6rem;
}

.profile-wrap2 > img{
  width:27%;
}

.profile-wrap2 > div{
  width:50%;
}

.profile-wrap2 > div > div{
  display: flex;
  align-items: flex-start;
}

.profile-wrap2 > div > div:not(:last-child){
  margin-bottom:1rem;
}

.profile-wrap2 > div > div p:first-child{
  width:20%;
  color:#529EA3;
  font-weight:bold;
  font-size:1rem;
}

.profile-wrap2 > div > div p:last-child{
  width:80%;
}

.profile-wrap2 > div > div p:last-child span{
  font-weight:bold;
}

.philosophy{
  margin:7.5rem auto;
  width:80%;
  text-align:center;
  max-width:1080px;
  position:relative;
}

.philosophy::before{
  content:"";
  position:absolute;
  width: 23%;
  aspect-ratio: 1 / 1;
  right: 0%;
  bottom: -15%;
  background:url(https://tonolion.co.jp/system_panel/uploads/images/20250515153957137276.png) no-repeat center/contain;
}

.philosophy img{
  width:160px;
  margin:0 auto 1.5rem;
  display:block;
}

.philosophy h3{
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  margin-bottom:2rem;
  line-height: 1.5;
  text-align: center;
}

.company{
  width:80%;
  margin:0 auto;
}

.company .lower-title{
  text-align:left;
}

.company-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.company-wrap > img{
  width:37%;
  border-radius:40px;
}

.company-text{
  width:55%;
}

.company-text > div{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom:1px solid #707070;
  padding-bottom:1rem;
}

.company-text > div:not(:last-child){
  margin-bottom:1rem;
}

.company-text > div > p:first-child{
  width:30%;
  color:#529EA3;
  font-weight:bold;
  padding: 0 1rem;
}

.company-text > div > p:last-child,
.company-text > div > div{
  width:70%;
}

.company-text iframe{
  margin-top:1rem;
  border:none;
}


@media screen and (max-width: 1400px) {
  .profile-wrap2 > div {
    width: 60%;
  }
}

@media screen and (max-width: 1024px) {
  .company-wrap,
  .profile-wrap,
  .profile-wrap2{
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .company-text,
  .profile-text,
  .profile-wrap2 > div{
    width: 100%;
  }
  .company-wrap > img,
  .profile-img{
    width: 70%;
  }
  .profile-wrap{
    gap:5rem;
  }
  .profile-wrap2{
    margin-top: 3rem;
    flex-direction: column-reverse;
  }
  .profile-wrap2 > img {
    width: 40%;
  }
}

@media screen and (max-width: 767px) {
  .profile{
    width: 90%;
    margin: 0rem auto 5rem;
  }
  .company-wrap > img, .profile-img,
  .profile-wrap2 > div > div p:first-child,
  .profile-wrap2 > div > div p:last-child,
  .company-text > div > p:first-child,
  .company-text > div > p:last-child, 
  .company-text > div > div{
    width: 100%;
  }
  .profile-img::before{
    top: 3%;
    left: 3%;
  }
  .profile-wrap {
    gap: 2rem;
  }
  .profile-wrap2 > img {
    width: 200px;
    margin: 0 0 0 auto;
  }
  .profile-wrap2 > div > div{
    flex-direction: column;
  }
  .philosophy{
    width: 95%;
    margin: 5rem auto 7.5rem;
    text-align: left;
  }
  .philosophy::before{
    width: 30%;
    bottom: -15%;
  }
  .company .lower-title{
    text-align:center;
  }
  .company {
    width: 90%;
  }
  .company-text > div{
    flex-direction: column;
  }
  .company-text > div > p:first-child{
    padding:0;
  }
}