@charset "UTF-8";

/* ===========================
   監修者一覧（/supervisor/）
   サイトマップ「ページ一覧」532行目 ／ Figma 27552:78553（PC）
   2026-09-07 上野（Claude作成）

   SPのデザインが無いため、PCのFigmaをもとにレスポンシブ化している。
   ・SP（833px以下） … 写真を上・本文を下の縦積み。写真は120px角。
   ・PC（834px以上） … Figma実寸。コンテンツ幅1026px、カードは背景 #F8F2ED、
                       内側の余白は上下43px・左右24px、写真150px、写真と本文の間24px、
                       本文の幅は626px（Figmaの本文テキストボックスの幅）。
=========================== */

/* ---------- 共通（SPが基準） ---------- */

.supervisor-page .container {
  max-width: 1026px;
  margin: 0 auto;
}

.supervisor-page .supervisor-lead {
  margin: 24px 0 24px;
  font-size: 14px;
  line-height: 1.86;
  color: var(--gray800);
  text-align: center;
}

.supervisor-page .supervisor-card {
  padding: 24px 16px;
  background: #F8F2ED;
}
.supervisor-page .supervisor-card + .supervisor-card {
  margin-top: 24px;
}

.supervisor-page .supervisor-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.supervisor-page .supervisor-photo {
  flex: 0 0 auto;
}
.supervisor-page .supervisor-photo img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.supervisor-page .supervisor-body {
  width: 100%;
}

.supervisor-page .supervisor-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #121212;
}

.supervisor-page .supervisor-role {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
  color: #121212;
}

.supervisor-page .supervisor-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #121212;
}

/* ---------- PC（834px以上）＝ Figma実寸 ---------- */
@media (min-width: 834px) {

  .supervisor-page .supervisor-lead {
    margin: 40px 0;
    font-size: 16px;
    line-height: 29.8px;
  }

  .supervisor-page .supervisor-card {
    padding: 43px 24px;
  }
  .supervisor-page .supervisor-card + .supervisor-card {
    margin-top: 40px;
  }

  .supervisor-page .supervisor-card-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  .supervisor-page .supervisor-photo img {
    width: 150px;
    height: 150px;
  }

  /* Figmaの本文テキストボックスは626px。カード幅いっぱいには広げない */
  .supervisor-page .supervisor-body {
    width: auto;
    max-width: 626px;
  }

  .supervisor-page .supervisor-name {
    font-size: 18px;
    line-height: 28px;
  }

  .supervisor-page .supervisor-role,
  .supervisor-page .supervisor-text {
    font-size: 15px;
    line-height: 28px;
  }
  .supervisor-page .supervisor-role {
    margin-top: 10px;
  }
}

/* ---------- 最後のカードと店舗CTAの間（Figma 90px） ---------- */
.supervisor-page {
  margin-bottom: 40px;
}
@media (min-width: 834px) {
  .supervisor-page {
    margin-bottom: 90px;
  }
}