@charset "utf-8";

.company{
  margin-bottom:100px;
}

.greeting{
  margin:2.5rem 0 1.5rem;
}

.greeting h3{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
  border-bottom:1px solid #2E4C99;
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
}

.greeting > div{
  width:90%;
  margin:0 auto;
      display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.greeting > div img{
  width:20%;
}

.greeting > div > div{
  width:75%;
}

.greeting-name{
  text-align:right;
  margin-top:2rem;
  font-size:14px;
}

.greeting-name p:last-child{
  font-size:20px;
}

.greeting-bg{
  padding:1.5rem 5% 2rem;
  background:#F4F6FB;
  font-size:14px;
  margin-bottom:100px;
}

.greeting-bg h3{
  font-size:20px;
  margin-bottom:1rem;
}

.info-list{
  display:flex;
}

.info-list > div:first-child{
  width:30%;
  padding:2rem 40px;
  background:#F4F4F4;
}

.info-list > div:last-child{
  width:70%;
  padding:2rem 40px;
  border-top:1px solid #EBEBEB;
}

.info-list > div iframe{
  width:100%;
  border:none;
  height:370px;
  max-width:600px;
}

@media screen and (max-width: 1280px) {

}


@media screen and (max-width: 1024px) {
  .info-list > div:first-child,
  .info-list > div:last-child{
    padding:1rem;
  }
  .info-list > div iframe{
    height:300px;
  }
  .greeting > div{
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .greeting > div img {
    width: 250px;
  }
  .greeting > div > div {
    width: 100%;
  }
}


@media screen and (max-width: 767px) {
  .greeting-name p:last-child {
    font-size: 18px;
  }
  .greeting-name{
    margin-top: 3rem;
  }
  .greeting-bg {
    padding: 2.5rem 5%;
    margin-bottom: 4rem;
  }
  .info-list > div:first-child{
    padding:12px;
    font-size:12px;
    width: 80px;
  }
  .info-list > div:last-child{
    padding:12px;
    font-size:12px;
    width: calc(100% - 80px);
  }
  .info-list > div iframe {
    height: 180px;
  }
  .company {
    margin-bottom: 4rem;
  }
}