@charset "utf-8";

.about-page {
  color: #000;
  padding-bottom: 0;
}

.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
}

.about-page > .inner {
  padding-top: 10.8rem;
}

.about-page h1,
.about-page h2 {
  font-family: "Inter", sans-serif;
  font-weight: 300;
}

.about-hero h1 {
  margin: 0;
  font-size: 4.8rem;
  line-height: 1.345;
  letter-spacing: 0;
}

.about-hero-sub {
  margin: 0 0 var(--design-space-red);
  font-size: 3rem;
  line-height: 1.333;
}

.about-lead,
.about-section-lead {
  margin: 0;
  font-size: var(--design-body-size);
  line-height: var(--design-body-leading);
}

.about-lead {
  margin-bottom: var(--design-space-orange);
  max-width:68rem;
}

.about-section-lead {
  margin-bottom: var(--design-space-red);
}

.about-hero-visual {
  width: 100%;
  margin: 0;
}

.about-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.about-strength {
  max-width: 72rem;
  margin: 0 0 var(--design-space-blue);
  padding-top: var(--design-space-orange);
  font-size: var(--design-body-size);
  line-height: var(--design-body-leading);
}

.about-strength ul {
  margin: 0 0 var(--design-space-red);
  font-size: 2rem;
  line-height: 2;
  li{
    padding-left:1em;
    text-indent:-1em;
  }
}

.about-strength li::before {
  content: "・";
}

.about-strength p {
  margin: 0 0 var(--design-space-red);
  line-height: var(--design-body-leading);
  max-width:68rem;
}

.about-strength .about-statement {
  margin-top: var(--design-space-red);
  font-size: 2rem;
  line-height: 4rem;
}

.about-strength .about-statement span {
  font-size: 2rem;
  display:block;
  margin-bottom: 0;
}

.about-section {
  margin-bottom: var(--design-space-blue);
  scroll-margin-top: 8rem;
}

.about-section > h2 {
  margin: 0 0 var(--design-heading-gap, 2.6rem);
  font-size: 3.6rem;
  line-height: 1.222;
}

.about-philosophy {
  max-width: 66.2rem;
  margin-bottom: var(--design-space-blue);
}

.philosophy-row {
  display: grid;
  grid-template-columns: 21.4rem minmax(0, 1fr);
  gap: 4rem;
  padding: 3.6rem 0 3rem;
  border-top: .1rem solid #111;
}

.philosophy-row:nth-of-type(3) {
  border-bottom: .1rem solid #111;
}

.philosophy-label {
  align-self: start;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.333;
}

.philosophy-row h3 {
  margin: 0 0 1.3rem;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.333;
}

.philosophy-row > div > p {
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--design-body-leading);
}

.philosophy-concept {
  display: grid;
  grid-template-columns: 21.4rem minmax(0, 1fr);
  gap: 4rem;
  padding: 4rem 0 4.8rem;
  border-bottom: .1rem solid #111;
}

.philosophy-word {
  justify-self: start;
  margin: 0;
  margin-top:0.3em;
  font-size: 2.4rem;
  line-height: 1.35;
  writing-mode: vertical-rl;
}

.philosophy-word ruby {
  ruby-position: over;
  margin-bottom: 0.3em;
}

.philosophy-word rt {
  font-size: 1rem;
  margin-left:0.5em;
}

.philosophy-copy p {
  margin: 0 0 2rem;
  font-size: var(--design-body-size);
  line-height: var(--design-body-leading);
  &:last-child{
    margin-bottom:0px;
  }
}

.about-client {
  margin-bottom: 1.7rem;
}

.about-client .about-section-lead {
  max-width: 67rem;
  margin-bottom: 2rem;
  width:100%;
}

.about-member > h2 {
  margin-bottom: var(--design-heading-gap, 2.6rem);
}

.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* First-row artwork begins 68px into each 500px-wide logo canvas. */
  margin: calc(var(--design-heading-gap, 2.6rem) - 3.4%) 0 0;
  padding: 0;
  list-style: none;
      left: -4.5rem;
  position: relative;
}

.client-logo-grid li {
  aspect-ratio: 5 / 2;
}

.client-logo-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.client-note {
  margin: 2.4rem 0 var(--design-space-blue);
  font-size: 1.2rem;
  line-height: 2;
}

.executive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12.8rem;
  margin-bottom: var(--design-space-red);
}

.executive-photo {
  width: 25.3rem;
  margin: 0 0 2.2rem;
}

.executive-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.member-role {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  line-height: 1.333;
}

.executive h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
}

.member-name-en {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.267;
}

.member-bio {
  margin: 2.8rem 0 0;
  font-size: 1.5rem;
  line-height: 1.867;
}

.member-career {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.867;
}

.member-bio + .member-career,
.member-career.JP + .member-career.EN {
  margin-top: 2.8rem;
}

.member-grid {
  display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}

.member-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #eef3f4;
}

.member-card h3 {
  margin: 0.6rem 0 0.1rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.267;
  white-space: nowrap;
}

.member-card p {
  margin: 0;
  color: #888;
  font-size: 1.2rem;
  line-height: 1.25;
}

.about-outline {
  margin-bottom: 0;
}

.outline-list {
  max-width: 76rem;
  margin: 0;
}

.outline-list > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
  &:last-child{
    margin-bottom:0px;
  }
}

.outline-list dt,
.outline-list dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--design-body-leading);
  p{
    padding-left:1em;
    text-indent:-1em;

  }
  span{
    min-width:8em;
    display: inline-block;
  }
}

.outline-list a {
  color: inherit;
}

.kenko-logo {
  width: 12rem;
  margin: 1rem 0 0 15rem;
}

.kenko-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .about-page {
    padding-bottom: 10rem;
  }

  .about-page > .inner {
    width: 100%;
    padding-top: 5rem;
  }

  .about-hero h1 {
    font-size: 3.2rem;
  }

  .about-hero-sub {
    margin: 1rem 0 3rem;
    font-size: 1.9rem;
  }

  .about-lead,
  .about-section-lead {
    margin-bottom: 3.5rem;
    line-height: var(--design-body-leading);
  }

  .about-strength {
    margin-bottom: 9rem;
    padding-top: 2rem;
    line-height: 1.9;
  }

  .about-strength .about-statement {
    font-size: 1.5rem;
  }

  .about-section {
    margin-bottom: 9rem;
  }

  .about-section > h2 {
    margin-bottom: var(--design-heading-gap, 2.6rem);
    font-size: 2.8rem;
  }

  .philosophy-row,
  .philosophy-concept {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .philosophy-concept {
    padding: 3rem 0;
  }

  .philosophy-word {
    font-size: 2.4rem;
    writing-mode: horizontal-tb;
  }

  .client-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(var(--design-heading-gap, 2.6rem) - 6.8%);
    left:0;
  }

  .executive-grid {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .executive-photo {
    width: 60%;
    max-width: 22.4rem;
  }

  .member-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .outline-list > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
  }


  .kenko-logo {
    margin-left: 10rem;
  }
}