@charset "UTF-8";

:root{
    --font-inter: 'Inter', sans-serif;
    --text-color: #4A5565;
    --blue-text: #4379B8;
}

.inner{
  margin: 0 auto;
}

.mv{
  position: relative;
  background-color: #EEF5FD;
  overflow-x: clip;
}

.bg__wireframe{
  aspect-ratio: 417/1043;
  max-width: 26.0625rem;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

.mv__inner{
  max-width: 80rem;
  padding: 9.375rem 2.5rem;
  margin: 0 auto;
}

.mv__content{
  display: flex;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.mv__left{
  max-width: 30.4375rem;
}

.mv__right{
  max-width: 39.3125rem;
  position: relative;
  z-index: 10;
}

.mv__category{
  display: inline-block;
  color: var(--text-color);
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 1.1875rem;
  padding-bottom: .6316em;
  position: relative;
}

.mv__category::after{
  content: "";
  width: 100%;
  height: .3125rem;
  background: linear-gradient(90deg, #293D6B 0%, #2976CF 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}


.mv__title{
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
  background: linear-gradient(90deg, #293D6B 0%, #2976CF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 9.0625rem;
  font-weight: 600;
  font-family: var(--font-inter);
  line-height: 1;
}

.mv__title span{
  line-height: 1.12;
  font-size: 4.4375rem;
  padding-bottom: 0.15em;
}

.mv__title--bottom{
  color: var(--text-color);
  margin-top: 1.125rem;
  font-weight: 500;
  font-size: 1.3125rem;
  letter-spacing: .1875rem;
}

.mv__text{
  margin-top: 4.9375rem;
  font-weight: 350;
  line-height: 1.8;
  font-size: 16px;
  color: var(--text-color);
}


/* ====================================
  MESSAGE
====================================== */

.message{
  position: relative;
  padding-block: 9.375rem;
  overflow-x: clip;
}

.message::before{
  content: "";
  background-color: #EEF5FD;
  width: 100%;
  height: 5rem;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.message::after{
  content: "";
  background: linear-gradient(
    to bottom,
    #ffffff 6%,
    #EEF5FD 100%
  );
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.message__flex{
  margin-top: 3.875rem;
  display: flex;
  gap: 1.4375rem;
  justify-content: space-between;
  align-items: flex-start;
}

.message__left{
  max-width: 32.5rem;
}

.message__right{
  max-width: 41.3125rem;
}

.message__title{
  line-height: 1.5;
  font-size: 1.1875rem;
  color: var(--blue-text);
  font-weight: 700;
}

.message__text{
  margin-top: .875rem;
  font-weight: 350;
  line-height: 1.8;
  font-size: 16px;
}

.name__block{
  width: fit-content;
  text-align: left;
  margin-top: 1.25rem;
  margin-left: auto;
}

.message__role{
  display: block;
  line-height: 1.7;
  color: var(--text-color);
  font-size: 1.0625rem;
  font-weight: 350;
}

.message__name{
  display: flex;
  gap: 1.0625rem;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-color);
  letter-spacing: 18%;
}

.message__name span{
  display: inline-block;
  line-height: 2;
  font-size: .875rem;
  letter-spacing: 15%;
  color: var(--blue-text);
}

@media screen and (max-width: 767px) {
  .message::after{
    content: "";
    background: linear-gradient(
      to bottom,
      #FEFEFF 0%,
      #F7FAFE 10%,
      #EEF5FD 100%
    );
  }
}
/* ====================================
  SUMMARY
====================================== */
.summary{
  background-color: #EEF5FD;
  padding-bottom: 9.375rem;
}

.company-info__list{
  margin-top: 3.875rem;
  padding: 3.125rem 5.125rem;
  background-color: #fff;
  border-radius: 1rem;
}

.company-info__item{
  display: grid;
  grid-template-columns: 17.75rem 1fr;
  align-items: flex-start;
  padding: .9375rem 0.5rem 1.0625rem;
  border-bottom: .0625rem solid #DDDDDD;
}

.company-info__item dt{
  color: var(--blue-text);
  font-weight: 700;
  line-height: 1.8;
  font-size: 16px;
}

.company-info__item dd{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
}

.sp__wire{
  display: none;
}


@media screen and (max-width:767px) {
  .summary{
    padding-bottom: 6.25rem;
  }

  .mv__inner{
    padding: 26.7vw 16px 35.7vw;
    position: relative;
    overflow: hidden;
  }

  .bg__wireframe{
    display: none;
  }

  .sp__wire{
    display: block;
    max-width: 100%;
    position: absolute;
    left: 50%;
    top: -45.8vw;
    z-index: 8;
    transform: rotate(0deg) translateX(-50%);
  }

  .mv__content{
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .mv__right{
    max-width: 100%;
  }
  .mv__right img{
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .mv__category{
    font-size: max(4.3vw,16px);
    padding-bottom: calc(0.3125rem + 0.3125em);
  }

  .mv__title{
    font-size: max(22vw,82px);
  }

  .mv__title span{
    font-size: max(10.8vw,40.5px);
  } 

  .mv__title--bottom{
    font-size: max(4.3vw,16px);
  }

  .mv__text{
    margin-top: 27px;
    font-size: max(3.7vw,14px);
  }

  .message{
    padding-block: 35.2vw 9.375rem;
  }

  .message::before{
    height: 17.33vw;
    background: url(../img/about-bg-polygon--blue.svg) no-repeat center center / contain;
    width: 100%;
  }

  .message__flex{
    flex-direction: column-reverse;
    align-items: center;
    margin-top: 3rem;
    gap: 0;
  }

  .message__right{
    max-width: 100%;
    margin-bottom: 11vw;
  }
  
  .message__right picture{
    display: block;
  }

  .message__right img{
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .message__left{
    max-width: 100%;
    margin-top: -13vw;
  }

  .message__title{
    font-size: max(4.8vw,18px);
  }

  .message__text{
    font-size: min(4.3vw, 16px);
  }

  .name__block--top{
    text-align: right;
  }

  .name__block{
    display: inline-block;
    max-width: 100%;
    width: auto;
    margin-top: 6.7vw;
  }

  .message__role{
    font-size: max(4.5vw,17px);
  }

  .message__name{
    font-size: max(5.9vw,22px);
  }

  .message__name span{
    font-size: max(3.7vw,14px);
  }
  
  .company-info__list{
    padding: 35px 2.67vw 37px;
  }

  .company-info__item{
    grid-template-columns: 1fr;
  }

  .company-info__item:last-of-type{
    border-bottom: none;
  }

  .company-info__item dt{
    font-size: max(4.3vw,16px);
  }

  .company-info__item dd{
    font-size: max(3.7vw,14px);
  }
  .company-info__item dd .empty{
    display: inline-block;
  }
}