@charset "UTF-8";
/* =====================
      title
===================== */
.page__company {
  .sub-mv {
    background-image: url(/assets/img/company/sp-sub-mv.webp);
  }
}
.page__headquarters {
  .sub-mv {
    background-image: url(/assets/img/company/headquarters/sp-sub-mv.webp);
  }
}
.page__qualification {
  .sub-mv {
    background-image: url(/assets/img/company/qualification/sp-sub-mv.webp);
  }
}

/* =====================
      greetings
===================== */
.greetings__block {
  .dec-brackets__image {
    margin-inline: auto;
  }
}
.greetings__image {
  width: 248rem;
  aspect-ratio: 248 / 316;
}
.greetings__text {
  margin-top: 32rem;
}
.greetings-signature {
  margin-top: 24rem;
  line-height: 1.7;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 16rem;
}
.greetings-signature--sm {
  font-size: 15rem;
}
.greetings-signature--name {
  font-size: 20rem;
}

/* =====================
      overview
===================== */
.overview {
  background-color: var(--color-background-lightGray);
}
.iso {
  background-color: var(--color-background);
  margin-top: 48rem;
  padding: 24rem 16rem;
  .title02 {
    text-align: center;
  }
}
.iso-image__wrapper {
  margin-inline: auto;
  width: fit-content;
}
.iso-image {
  width: 230rem;
  aspect-ratio: 230 / 172;
}
.iso-list {
  margin-top: 24rem;
}
.iso-item {
  & + .iso-item {
    margin-top: 16rem;
  }
}
.iso-list-item__title {
  font-size: 15rem;
  line-height: 1.7;
  display: flex;
  column-gap: 6rem;
  margin-bottom: 4rem;
  &::before {
    content: '';
    display: block;
    width: 11rem;
    height: 11rem;
    margin-top: calc((1lh - 10rem) / 2);
    border-radius: 50%;
    border: var(--color-text-primary) solid 2rem;
  }
}

/* =====================
      history
===================== */
.history-list {
  margin-top: -32rem;
}
.history-list-item {
  display: grid;
  grid-template-columns: 123rem 1fr;
  column-gap: 16rem;
  &:first-child {
    .history-list-item__title {
      &::before {
        display: none;
      }
    }
  }
  &:last-child {
    .history-list-item__title {
      &::after {
        background-color: inherit;
        background-image: linear-gradient(0deg, transparent, #deebff);
      }
    }
  }
}
.history-list-item__title {
  color: var(--color-primary);
  padding: 24rem 32rem 24rem 0;
  position: relative;
  height: 100%;
  &::before,
  &::after {
    content: '';
    position: absolute;
    background-color: #deebff;
    width: 10rem;
    right: 32rem;
    z-index: -1;
  }
  &::before {
    top: 0;
    height: 47rem;
  }
  &::after {
    bottom: 0;
    height: calc(100% - 47rem);
  }
  > span {
    display: block;
  }
}
.history-list-item__ad {
  font-size: 32rem;
  position: relative;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    background-color: var(--color-primary);
  }
  &::before {
    width: 10rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    right: 0;
  }
  &::after {
    width: 32rem;
    height: 2rem;
    right: -32rem;
  }
}
.history-list-item__jc {
  font-size: 11rem;
  line-height: 1.7;
}
.history-list-item__body {
  padding-block: 31rem 24rem;
}
.history-list-item__date {
  display: block;
  font-size: 17rem;
  line-height: 1.7;
}
.history-list-item__text {
  margin-top: 8rem;
  font-size: 13rem;
}

/* =====================
      link
===================== */
.company-link__block {
  background-color: var(--color-background-lightGray);
  padding: 8rem 16rem;
}
.company-link__item {
  & + .company-link__item {
    border-top: var(--border) var(--color-list-border);
  }
}
.company-link__content {
  padding-block: 32rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 24rem 18rem;
  & hgroup {
    transition: opacity 0.3s ease;
  }
  .icon {
    width: 28rem;
    height: 8rem;
    transition: transform 0.3s ease-in-out 0s;
  }
  @media (any-hover: hover) {
    &:hover {
      opacity: 1;
      .company-link__image {
        transform: scale(1.08);
      }
      hgroup {
        opacity: 0.8;
      }
      .icon {
        transform: translateX(6rem);
      }
    }
  }
}
.company-link__image--clip {
  width: 100%;
  aspect-ratio: 296 / 184;
  overflow: hidden;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.company-link__image {
  width: 100%;
  aspect-ratio: 296 / 184;
  transition: transform 0.3s ease-in-out 0s;
}
.company-link__title--ja {
  font-size: 20rem;
  line-height: 1.7;
}
.company-link__title--en {
  margin-top: 4rem;
  display: block;
  color: var(--color-primary);
  font-size: 12rem;
}

/* =====================
      headquarters
===================== */
.map {
  margin-top: 32rem;
}
.map-area {
  & iframe {
    width: 326rem;
    aspect-ratio: 326 / 342;
  }
}
.map-info__list {
  margin-top: 24rem;
}
.map-info__item {
  & + .map-info__item {
    margin-top: 16rem;
  }
}
.map-info__title {
  font-size: 16rem;
  line-height: 1.7;
  margin-bottom: 4rem;
}
.facility-list {
  margin-top: 48rem;
}
.facility-list__item {
  & + .facility-list__item {
    margin-top: 32rem;
  }
}
.facility-list__image {
  width: 100%;
  aspect-ratio: 540 / 350;
}
.facility-list__title {
  font-size: 18rem;
  line-height: 1.7;
  display: block;
  margin-top: 12rem;
  text-align: center;
}
.facility-list__description {
  margin-top: 6rem;
}

/* =====================
      machiningCenter
===================== */
.machiningCenter,
.machiningCenter02 {
  .inner {
    padding-block-start: 0;
  }
}

/* =====================
      Qualification Holder / Owned Facility
===================== */
.qualification__container {
  .section__title02 {
    &:nth-child(n + 2) {
      margin-top: 56rem;
    }
  }
}
.qualificationHolder-list__item,
.ownedFacility-list__item {
  display: grid;
  grid-template-columns: 1fr 60rem;
  column-gap: 24rem;
  padding: 24rem 4rem;
  border-bottom: var(--border) var(--color-list-border);
  &:first-child {
    padding-inline-start: 8rem;
  }
}
.ownedFacility-list__item {
  &:last-child {
    border-bottom: none;
  }
}
.qualificationHolder-item__body,
.ownedFacility-item__body {
  text-align: right;
}