/* 下層ページ（about__） */
.about { padding-top: 80px; }
@media (max-width: 767px) {
  .about { padding-top: 60px; }
}

.about__crumb-bar { padding-block: 24px; background: var(--color-white); }
@media (max-width: 767px) {
  .about__crumb-bar { padding-block: 16px; }
}
.about__crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--color-text-sub); }
.about__crumb-item:not(:last-child)::after { content: "/"; margin-left: 8px; }

.about__hero {
  padding-block: 72px 64px;
  background: var(--color-brand-pale) url("../images/about-hero.webp") center / cover;
}
@media (max-width: 767px) {
  .about__hero {
    padding-block: 44px 40px;
    background-image: url("../images/about-hero-sp.webp");
  }
}
.about__hero .common__heading { margin-bottom: 0; }

.about__text { margin: 0 0 1.6em; font-size: 15px; line-height: 2.2; text-align: start; }
@media (max-width: 767px) {
  .about__text { font-size: 14px; }
}

.about__section { overflow: hidden; }
.about__section .common__inner { width: 100%; max-width: none; }
/* 画像とテキストカードを重ねる（TOPの CONCEPT / POINT と同じ見せ方）。1つ目は画像が左、2つ目は画像が右 */
.about__story { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); align-items: start; }
.about__story--rev { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.about__story + .about__story { margin-top: clamp(96px, 12vw, 200px); }
.about__story-img { grid-column: 1; grid-row: 1; width: 100%; height: clamp(380px, 40vw, 720px); object-fit: cover; border-radius: 0; box-shadow: none; }
.about__story--rev .about__story-img { grid-column: 2; }
.about__story-card {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 2;
  margin-left: -10vw;
  margin-top: clamp(60px, 9vw, 200px);
  padding: clamp(36px, 4.5vw, 88px) max(var(--gutter), 4vw) clamp(36px, 4.5vw, 88px) clamp(36px, 4.5vw, 88px);
  background: var(--color-brand-pale);
  box-shadow: 0 24px 60px var(--color-card-shadow);
}
.about__story--rev .about__story-card { grid-column: 1; margin-left: 0; margin-right: -10vw; padding: clamp(36px, 4.5vw, 88px) clamp(36px, 4.5vw, 88px) clamp(36px, 4.5vw, 88px) max(var(--gutter), 4vw); }
@media (max-width: 767px) {
  .about__story, .about__story--rev { grid-template-columns: 1fr; }
  .about__story + .about__story { margin-top: 56px; }
  .about__story-img, .about__story--rev .about__story-img { grid-column: 1; height: 280px; }
  .about__story-card, .about__story--rev .about__story-card { grid-column: 1; grid-row: 2; margin: -40px 0 0 var(--gutter); padding: 36px var(--gutter) 36px 28px; }
  .about__story--rev .about__story-card { margin: -40px var(--gutter) 0 0; padding: 36px 28px 36px var(--gutter); }
}
/* スクロールで、画像とカードが左右から向かい合うように入る */
.about__story.is-anim .about__story-img { opacity: 0; transform: translateX(-14vw); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.about__story.is-anim .about__story-card { opacity: 0; transform: translateX(14vw); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1) .15s, opacity 1.2s ease .15s; }
.about__story--rev.is-anim .about__story-img { transform: translateX(14vw); }
.about__story--rev.is-anim .about__story-card { transform: translateX(-14vw); }
.about__story.is-anim.is-in .about__story-img,
.about__story.is-anim.is-in .about__story-card { opacity: 1; transform: none; }
.about__story-title { margin: 0 0 20px; font-family: var(--font-mincho); font-weight: 500; font-size: 26px; line-height: 1.7; letter-spacing: 0.08em; }
@media (max-width: 767px) {
  .about__story-title { font-size: 21px; }
}

.about__info { background: var(--color-white); }
.about__table { width: min(800px, 100%); margin-inline: auto; border-collapse: collapse; font-size: 14px; }
.about__table th, .about__table td { padding: 20px 16px; border-bottom: 1px solid var(--color-line); text-align: start; vertical-align: top; line-height: 1.9; }
.about__table th { width: 28%; font-weight: 500; color: var(--color-brand); white-space: nowrap; }
@media (max-width: 767px) {
  .about__table th, .about__table td { display: block; width: 100%; padding: 4px 0; border: 0; }
  .about__table th { padding-top: 18px; }
  .about__table td { padding-bottom: 18px; border-bottom: 1px solid var(--color-line); }
}