/*----------------------------------------------

  ABOUT PAGE CONTENTS

----------------------------------------------*/
.aboutPage-contents {
  display: grid;
  gap: min(calc( 50 / var(--screen-width) * 100vw ), 100px);
  /*---------------------------------------
   heading
  ---------------------------------------*/
  /*---------------------------------------
   description
  ---------------------------------------*/
  /*---------------------------------------
   members
  ---------------------------------------*/
  /*---------------------------------------
   products
  ---------------------------------------*/
}
.aboutPage-contents__heading {
  display: grid;
  gap: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  margin-bottom: max(calc( -25 / var(--screen-width) * 100vw ), -50px);
}
.aboutPage-contents__heading h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min(calc( 35 / var(--screen-width) * 100vw ), 35px);
  line-height: 1.2;
  color: var(--color__primary);
  text-align: center;
  letter-spacing: 0.1em;
}
.aboutPage-contents__heading small {
  display: block;
  text-align: center;
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  color: var(--color__primary);
  line-height: 1.5;
}
.aboutPage-contents__description {
  display: grid;
  gap: min(calc( 25 / var(--screen-width) * 100vw ), 50px);
  justify-items: center;
  /* heading
  ---------------------------------------*/
  /* description
  ---------------------------------------*/
}
.aboutPage-contents__description .heading {
  font-size: min(calc( 42 / var(--screen-width) * 100vw ), 42px);
  color: var(--color__primary);
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}
.aboutPage-contents__description .description {
  display: grid;
  gap: min(calc( 15 / var(--screen-width) * 100vw ), 25px);
  width: 100%;
  max-width: 550px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.aboutPage-contents__description .description p {
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  letter-spacing: 0.2em;
  line-height: 2.4;
}
.aboutPage-contents__description .description p:first-child {
  font-size: min(calc( 16 / var(--screen-width) * 100vw ), 16px);
  font-weight: bold;
}
.aboutPage-contents__members {
  position: relative;
  display: grid;
  gap: min(calc( 25 / var(--screen-width) * 100vw ), 50px);
  justify-items: center;
  /* heading
  ---------------------------------------*/
  /* members
  ---------------------------------------*/
  /* description
  ---------------------------------------*/
}
.aboutPage-contents__members:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color__text);
  position: absolute;
  left: 0;
  top: max(calc( -25 / var(--screen-width) * 100vw ), -50px);
}
.aboutPage-contents__members .heading {
  font-size: min(calc( 16 / var(--screen-width) * 100vw ), 16px);
  font-weight: bold;
  text-align: center;
}
.aboutPage-contents__members .members {
  display: grid;
  gap: min(calc( 15 / var(--screen-width) * 100vw ), 15px) min(calc( 65 / var(--screen-width) * 100vw ), 65px);
}
@media (min-width: 960px) {
  .aboutPage-contents__members .members {
    display: flex;
    justify-content: center;
  }
}
.aboutPage-contents__members .members dl dt picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(calc( 60 / var(--screen-width) * 100vw ), 60px);
  margin-bottom: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
}
.aboutPage-contents__members .members dl dt picture img {
  display: block;
  width: auto;
  height: 100%;
}
.aboutPage-contents__members .members dl dt span {
  display: block;
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  line-height: 1.5;
  text-align: center;
  height: 3em;
}
.aboutPage-contents__members .members dl dd {
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
}
.aboutPage-contents__members .members dl dd.role {
  border-top: 1px solid var(--color__text);
  border-bottom: 1px solid var(--color__text);
  padding: min(calc( 10 / var(--screen-width) * 100vw ), 10px) 0;
  margin-top: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  text-align: center;
}
.aboutPage-contents__members .members dl dd.anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(calc( 15 / var(--screen-width) * 100vw ), 15px);
  margin-top: min(calc( 20 / var(--screen-width) * 100vw ), 20px);
}
.aboutPage-contents__members .members dl dd.anchors a {
  --url: var(--url__home);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: var(--color__text);
  border-radius: min(calc( 6 / var(--screen-width) * 100vw ), 6px);
  width: min(calc( 25 / var(--screen-width) * 100vw ), 25px);
}
.aboutPage-contents__members .members dl dd.anchors a:before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: min(calc( 15 / var(--screen-width) * 100vw ), 15px);
  background-color: #fff;
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
}
.aboutPage-contents__members .members dl dd.anchors a.instagram {
  --url: var(--url__instagram);
}
.aboutPage-contents__members .members dl.lancers dt picture img {
  height: min(calc( 40 / var(--screen-width) * 100vw ), 40px);
}
@media (min-width: 960px) {
  .aboutPage-contents__members .members dl {
    flex-shrink: 0;
    width: min(calc( 150 / var(--screen-width) * 100vw ), 150px);
  }
}
.aboutPage-contents__members .description {
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  width: 100%;
  max-width: 475px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.aboutPage-contents__products {
  position: relative;
}
.aboutPage-contents__products:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color__text);
  position: absolute;
  left: 0;
  top: max(calc( -25 / var(--screen-width) * 100vw ), -50px);
}
.aboutPage-contents__products .products {
  display: grid;
  gap: min(calc( 50 / var(--screen-width) * 100vw ), 100px);
  max-width: 720px;
  margin: auto;
}
.aboutPage-contents__products .products dl {
  position: relative;
  display: grid;
  grid-template-columns: min(calc( 75 / var(--screen-width) * 100vw ), 75px) 1fr;
  gap: min(calc( 20 / var(--screen-width) * 100vw ), 30px);
}
.aboutPage-contents__products .products dl:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color__text);
  position: absolute;
  left: 0;
  top: max(calc( -25 / var(--screen-width) * 100vw ), -50px);
}
.aboutPage-contents__products .products dl dt {
  padding: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  background-color: #EAEDEF;
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aboutPage-contents__products .products dl dd ul {
  list-style: none;
  font-size: min(calc( 12 / var(--screen-width) * 100vw ), 12px);
  line-height: 1.5;
  display: grid;
  gap: 0.5em 1em;
  grid-template-columns: repeat(2, 1fr);
}
.aboutPage-contents__products .products dl dd ul:has(> :nth-child(-n+3):last-child) {
  grid-template-columns: auto;
}
.aboutPage-contents__products .products dl dd p {
  font-size: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  padding-top: min(calc( 15 / var(--screen-width) * 100vw ), 15px);
  margin-top: min(calc( 15 / var(--screen-width) * 100vw ), 15px);
  border-top: 1px solid var(--color__text);
}