@charset "UTF-8";
/* =========================================================================
   about.css — About（Figma 実体フレーム 16070:26101・1440×5579）
   縦方向はセクション間のローカル差（次要素Y −（前要素Y＋高さ））で積む。
   ========================================================================= */

/* ---------- ヒーロー（1420×700。about-hero-bg.svg＝紺＋曲線＋角丸13込み） ---------- */
.about-hero {
  position: relative; width: 142rem; height: 70rem; margin: 1.2rem auto 0;
  background: url("../img/about/about-hero-bg.svg") center / 100% 100% no-repeat;
  border-radius: 1.3rem;
}
.about-hero__body { display: flex; align-items: flex-start; padding-left: 17.373rem; }
.about-hero__info { width: 51.7rem; flex-shrink: 0; margin-top: 8.09rem; display: flex; flex-direction: column; align-items: flex-start; }
.about-hero__text { display: flex; flex-direction: column; gap: 0.5rem; }
.about-hero__desc { color: var(--color-text-on-dark); }
.about-hero__buttons { margin-top: 2.4rem; }
.about-hero__photo {
  width: 49.9965rem; height: 34.2867rem; margin: 4.297rem 0 0 5.337rem; flex-shrink: 0;
  border-radius: var(--radius-card); overflow: hidden;
}
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 医院の写真（1070×365.037・角丸16。ヒーロー下端に重なって手前） ---------- */
.about-clinic {
  position: relative; z-index: 1;
  width: 107rem; height: 36.5037rem; margin: -19.805rem auto 0;
  border-radius: var(--radius-card); overflow: hidden;
}
.about-clinic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Our impact numbers ---------- */
.impact { width: 107rem; margin: 12rem auto 0; display: flex; align-items: flex-start; }
.impact__photo { width: 56.9965rem; height: 40.1781rem; flex-shrink: 0; border-radius: var(--radius-card); overflow: hidden; }
.impact__photo img { width: 100%; height: 100%; object-fit: cover; }
.impact__content { width: 47rem; flex-shrink: 0; margin-left: 3rem; padding-top: 2.495rem; }
.impact__title { white-space: nowrap; }
.impact__desc { width: 43.5rem; margin-top: 1.2rem; white-space: pre-wrap; }
/* 数字カード：左端は写真の上に重なる（x=631） */
.impact__stats { position: relative; display: flex; justify-content: space-between; margin: 3.706rem 0 0 -15.306rem; }
.stat-card {
  width: 19.1691rem; height: 15.2908rem; padding: 1.792rem 1.726rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--color-neutral-100); border-radius: var(--radius-card);
}
.stat-card__icon { position: relative; width: 3rem; height: 3rem; border-radius: 0.8rem; background: var(--color-primary-200); }
.stat-card__icon img { position: absolute; width: 2rem; height: 2rem; }
.stat-card__text { display: flex; flex-direction: column; font-weight: 500; white-space: pre; }
.stat-card__num { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-primary-400); }
.stat-card__label { font-size: 1.6rem; line-height: 1.8rem; color: var(--color-neutral-800); }

/* ---------- Meet our wonderful team（白の帯 1440×916.65） ---------- */
.about-team { margin-top: 12rem; padding: 12rem 0; background: var(--color-neutral-100); text-align: center; }
.about-team__title { width: 37.7725rem; margin-inline: auto; }
.about-team__desc { width: 40.2246rem; margin: 1rem auto 0; }
.about-team__grid {
  display: grid; grid-template-columns: repeat(3, 34.3317rem); column-gap: 2.129rem; justify-content: center;
  margin-top: 3.2rem; text-align: left;
}
.about-team__buttons { justify-content: center; margin-top: 3.2rem; }

/* ---------- Values that drive our dental office ---------- */
.values { width: 106.98rem; margin: 11.959rem auto 0; display: flex; align-items: flex-start; }
.values__intro { width: 43.3rem; flex-shrink: 0; }
.values__title { width: 43.2rem; }
.values__desc { width: 43.3rem; margin-top: 1rem; }
.values__card {
  width: 43.2rem; height: 39.3rem; margin-top: 4rem; padding: 8.5rem 0 0 6.3rem;
  background: url("../img/about/about-values-card-bg.svg") center / 100% 100% no-repeat;
  border-radius: var(--radius-card);
}
.values__card-title { width: 30.7rem; }
.values__card-desc { width: 30.7rem; margin-top: 1rem; color: var(--color-text-on-dark); }
.values__card-btn { display: flex; width: fit-content; margin: 2.7rem 0 0 -1.3rem; }
.values__list {
  display: grid; grid-template-columns: repeat(2, 27rem); column-gap: 3rem; row-gap: 3.2rem;
  margin: 4.3rem 0 0 6.653rem;
}
.value__icon { position: relative; display: block; width: 4rem; height: 4rem; border-radius: 0.8rem; background: var(--color-primary-200); }
.value__icon img { position: absolute; }
.value__title { margin-top: 3.2rem; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-neutral-800); white-space: nowrap; }
.value__desc { width: 27rem; margin-top: 1rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-700); }

/* ---------- The Dentalflow dentist experience（白の帯）＋拠点スライダー ---------- */
.visit { margin-top: 12rem; padding: 12rem 0 12.442rem; background: var(--color-neutral-100); }
.visit__head { display: flex; align-items: flex-end; padding-left: 18.506rem; }
.visit__title { width: 39.8rem; flex-shrink: 0; }
.visit__buttons { margin-left: 26.6rem; }
.visit__locations { margin-top: 3.2rem; }

/* ---------- FAQ（横3枚のカード＋左右矢印。contact のアコーディオンとは別の作り） ---------- */
.about-faq { width: 107rem; margin: 12rem auto 0; }
.about-faq__title { width: 39.8rem; margin-inline: auto; text-align: center; }
.about-faq__slider { margin-top: 3.435rem; }
.about-faq__list { display: flex; gap: 3.103rem; }
.faq-card {
  width: 33.598rem; height: 25.308rem; flex-shrink: 0; padding: 5.082rem 2.129rem 0;
  background: var(--color-neutral-100); border-radius: var(--radius-card);
}
.faq-card__q { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; color: var(--color-neutral-800); }
.faq-card__a { margin-top: 1rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-700); }
.about-faq__nav { display: flex; justify-content: space-between; margin-top: 2.6rem; padding-inline: 0.086rem; }
.about-faq__nav .arrow-btn { box-shadow: 0 0.4rem 0.5rem rgba(92, 92, 92, 0.1); }

main + .site-footer { margin-top: 12rem; }

/* =========================================================================
   SP（<1024px）— SPカンプなし：1カラム化（index の SP と同じ規約）
   ========================================================================= */
@media (max-width: 1023px) {
  .about-hero {
    width: auto; height: auto; margin: 0.8rem 1.2rem 0; padding-bottom: 9.6rem;
    background: var(--color-neutral-800) url("../img/about/about-hero-bg.svg") center top / cover no-repeat;
  }
  .about-hero .site-header { margin-inline: 1.6rem; }
  .about-hero__body { flex-direction: column; max-width: 75.2rem; margin-inline: auto; padding: 0 1.6rem; }
  .about-hero__info { width: 100%; margin-top: 3.2rem; }
  .about-hero__buttons { margin-top: 2.4rem; }
  .about-hero__photo { width: 100%; max-width: none; height: auto; aspect-ratio: 499.965 / 342.867; margin: 3.2rem 0 0; }

  .about-clinic { width: auto; height: auto; aspect-ratio: 1070 / 365.037; max-width: 72rem; margin: -6.4rem var(--sp-inset) 0; }

  .impact { width: auto; flex-direction: column; margin: var(--space-section) var(--sp-inset) 0; }
  .impact__photo { width: 100%; height: auto; aspect-ratio: 569.965 / 401.781; }
  .impact__content { width: 100%; margin: 3.2rem 0 0; padding-top: 0; }
  .impact__title { white-space: normal; }
  .impact__desc { width: auto; }
  .impact__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 3.2rem 0 0; }
  .stat-card:last-child { grid-column: 1 / -1; }
  .stat-card { width: auto; height: 15.2908rem; }

  .about-team { margin-top: var(--space-section); padding: var(--space-section) var(--sp-inset); }
  .about-team__title, .about-team__desc { width: auto; max-width: 40.2246rem; }
  .about-team__grid { grid-template-columns: minmax(0, 34.3317rem); row-gap: 2.4rem; }
  .about-team__buttons { margin-top: 3.2rem; }

  .values { width: auto; flex-direction: column; margin: var(--space-section) var(--sp-inset) 0; }
  .values__intro, .values__title, .values__desc { width: auto; }
  .values__card {
    width: 100%; max-width: 43.2rem; height: auto; padding: 4.8rem 2.4rem;
    background: var(--color-neutral-800) url("../img/about/about-values-card-bg.svg") center / cover no-repeat;
  }
  .values__card-title, .values__card-desc { width: auto; }
  .values__card-btn { margin: 2.4rem 0 0; }
  .values__list { grid-template-columns: minmax(0, 1fr); row-gap: 3.2rem; margin: 4.8rem 0 0; width: 100%; }
  .value__title { margin-top: 2rem; white-space: normal; }
  .value__desc { width: auto; }

  .visit { margin-top: var(--space-section); padding: var(--space-section) 0; }
  .visit__head { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 0 var(--sp-inset); }
  .visit__title { width: auto; }
  .visit__buttons { margin-left: 0; }
  .visit__locations { margin-top: 2.4rem; }

  .about-faq { width: auto; margin: var(--space-section) 0 0; }
  .about-faq__title { width: auto; padding: 0 var(--sp-inset); }
  .about-faq__slider {
    margin-top: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-inset);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .about-faq__slider::-webkit-scrollbar { display: none; }
  .about-faq__list { width: max-content; gap: 1.2rem; padding-inline: var(--sp-inset); }
  .faq-card { width: 28rem; height: auto; min-height: 22rem; padding: 3.2rem 2rem; scroll-snap-align: start; }
  .faq-card__q { font-size: 2rem; line-height: 2.5rem; }
  .about-faq__nav { margin: 2rem var(--sp-inset) 0; padding: 0; }

  main + .site-footer { margin-top: var(--space-section); }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .about-team__grid { grid-template-columns: repeat(2, minmax(0, 34.3317rem)); column-gap: 2.129rem; }
  .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .impact__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-card:last-child { grid-column: auto; }
}