@charset "utf-8";
/*---------------------------
  About Us
---------------------------*/
.about-us__sections-wrap{
  width: calc(100% - 32px);
  display: grid;
  gap: 96px;
  padding: 96px 10px;
  margin: 0 auto;
  background-color: var(--transparent);
}
/*------Philosophy------*/
.section__bg.philosophy{
  padding-top: 0;
  padding-bottom: 176px;  
}
.section__bg::after{
  top: auto;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(252, 248, 245, 1) 0%,
    rgba(252, 248, 245, 1) 10%,
    rgba(252, 248, 245, 0.7) 50%,
    rgba(252, 248, 245, 0) 100%
  ), var(--page-bg-image);
  --page-bg-image: url('../img/latelier-office-logo.jpg');
  background-position:  center;
  background-repeat: no-repeat;
  background-size: cover;  
}
.section__bg.philosophy .section-container{
  padding: 0 0 64px;
  background-color: inherit;
}
/* For TB */
@media (512px < width) {
  .section__bg.philosophy{
    padding-bottom: 320px;  
  }
  .section__bg::after{
    --page-bg-image: url('../img/latelier-office.jpg');
  }
}
/* For PC */
@media (1000px < width) {
  .section__bg.philosophy{
    padding-bottom: 400px;  
  }
  .section__bg::after{
    aspect-ratio: 16 / 7;
    background: linear-gradient(
    to bottom,
    rgba(252, 248, 245, 1) 0%,
    rgba(252, 248, 245, 1) 20%,
    rgba(252, 248, 245, 0) 100%
  ),var(--page-bg-image);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  }  
}

/*------Message------*/
.message__wrap,.message__contents-section,
.message__title,.message__text-wrap{
  display: grid;
}
.message__wrap{
  gap: 48px;
}
.message__contents-section,
.message__title{
  gap: 32px;
}
.message__text-wrap{
  gap: 24px;
}
.message__image{
  max-height: 600px;
  margin: 0 auto;
  overflow: hidden;
}
.message__image img{
  height: 100%;
}
.message__title{
  font-size: 2rem;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--accent-color);
}
.message__writer-name{
  font-size: 2.4rem;
  margin-bottom: 10px;
}
.message__writer-position{
  font-size: 1.8rem;
  margin-bottom: 32px;
}
.message__text-wrap{
  padding: 0 1em;
}
/* For PC */
@media (912px < width) {
  .message__wrap{
    grid-template-columns: 1fr 1.2fr;
  }
  .message__image{
    max-height: 100%;
  }
}

/*------Commitment------*/
.commitment__card-list,
.commitment__card,
.commitment__card-contents{
  display: grid;
}
.commitment__card-list{
  gap: 96px;
}
.commitment__card{
  gap: 40px;
}
.commitment__card-contents{
  gap: 32px;
}
.commitment__card{
  padding: 56px 16px;
  background-color: var(--transparent);
}
.commitment__card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}
.commitment__card-image img{
  width: 100%;
  height: 100%;
}
.commitment__card-heading{
  padding: 0 1em 32px;
  border-bottom: 1px solid var(--accent-color);
  font-size: 1.8rem;
}
.commitment__card-text{
  padding: 0 1em;
}
/* For PC */
@media (1000px < width) {
  .commitment__card{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 56px 48px;
  }
  .commitment__card:nth-child(even) .commitment__card-image{
    grid-column: 2/ -1;
  }
  .commitment__card-image{
    aspect-ratio: inherit;
    max-height: 100%;
  }
  .commitment__card:nth-child(even) .commitment__card-contents{
    grid-column: 1;
    grid-row: 1;
  }
  .commitment__card-heading{
    font-size: 2.4rem;
  }
}

/*------Business------*/
.business__list,
.business__list-item,
.business__item-contents{
  display: grid;
}
.business__list{
  gap: 72px;
}
.business__list-item{
  gap: 40px;
}
.business__item-contents{
  gap: 32px;
}
.business__image{
  width: 100%;
  aspect-ratio: 16/ 9;
  min-height: 0;
  overflow: hidden;
}
.business__heading--main-line{
  display: block;
  padding: 0 0 1.0rem 1.6rem;
  font-size: 2.4rem;
}
.business__heading--sub-line{
  display: block;
  padding: 1.6rem 0 0 1.6rem;
  border-top: 1px solid var(--accent-color);
  font-size: 1.8rem;
}
.business__item-text{
  padding: 0 1em;
}
.business.button--big{
  width: min(70%, 300px);
}
.lapin{
  display: grid;
  gap: 16px;
  padding: 0 1.6rem;
}
/* For PC */
@media (912px < width) {
  .business__list-item{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .business__list{
    gap: 96px;
  }
  .business__item-contents{
    gap: 48px;
  }
  .business.button--big{
    margin: 0;
    margin-left: auto;
  }
  .business__list-item.--lapin .business__image{
    aspect-ratio: inherit;
    grid-column: 2;
  }
}