/* ==============================
   弁護士紹介ページ CSS
   ※ FV・パンくず・FVアニメーションは page-common.css に集約
   ============================== */

/* ==============================
   代表弁護士（詳細セクション）
   ============================== */
.lawyer-lead {
  background: var(--color-bg);
  padding: 80px 0 100px;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* 上段：写真 + プロフィール */
.lawyer-lead__upper {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 0 20px;
  margin-bottom: 48px;
}

.lawyer-lead__photo {
  flex: 0 0 300px;
  border-radius: var(--radius);
  overflow: hidden;
}

.lawyer-lead__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.lawyer-lead__profile-area {
  flex: 1;
  min-width: 0;
}

/* 下段：メッセージ（全幅） */
.lawyer-lead__lower {
  padding: 0 20px;
}

.lawyer-lead__role {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(45, 184, 122, 0.08);
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.lawyer-lead__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-text);
  line-height: var(--line-height-heading);
  margin-bottom: 24px;
}

.lawyer-lead__kana {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  margin-left: 12px;
  letter-spacing: 0.08em;
}

/* 一言キャッチ */
.lawyer-lead__catch {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

/* プロフィールテーブル */
.lawyer-lead__profile {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}

.lawyer-lead__profile th,
.lawyer-lead__profile td {
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

.lawyer-lead__profile th {
  width: 120px;
  color: #666;
  font-weight: 500;
  padding-right: 16px;
  white-space: nowrap;
}

.lawyer-lead__profile td {
  color: var(--color-text);
}

/* メッセージ */
.lawyer-lead__message {
  margin-bottom: 24px;
}

.lawyer-lead__subtitle {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-primary);
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--color-primary);
  line-height: 1.4;
}

.lawyer-lead__message p {
  font-size: 15px;
  line-height: var(--line-height-body);
  color: #555;
  margin-bottom: 28px;
}

/* 3つのポイント */
.lawyer-lead__points {
  list-style: none;
  counter-reset: point;
  margin-bottom: 28px;
}

.lawyer-lead__points li {
  counter-increment: point;
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: var(--line-height-body);
  color: #555;
}

.lawyer-lead__points li:last-child {
  margin-bottom: 0;
}

.lawyer-lead__points li::before {
  content: counter(point);
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-english);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lawyer-lead__points li strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}

.lawyer-lead__points li span {
  color: #555;
}

/* 締めの一文 */
.lawyer-lead__closing {
  font-size: 15px;
  line-height: var(--line-height-body);
  color: var(--color-text);
  font-weight: 500;
  padding: 16px 20px;
  background: rgba(45, 184, 122, 0.05);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

/* 趣味 */
.lawyer-lead__hobby {
  font-size: 14px;
  line-height: 1.6;
  color: #888;
  padding-left: 16px;
  border-left: 3px solid var(--color-primary);
}

/* ==============================
   所属弁護士一覧セクション
   ============================== */
.lawyer-members {
  background: #F5F5F5;
  padding: 80px 0 100px;
}

.lawyer-members__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* セクション見出し → page-common.css .section-heading に集約 */

.lawyer-members__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.lawyer-members__card {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 28px 32px;
  text-align: center;
}

.lawyer-members__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
}

.lawyer-members__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.lawyer-members__body {
  text-align: left;
}

.lawyer-members__role {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(45, 184, 122, 0.08);
  padding: 3px 12px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.lawyer-members__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
  line-height: var(--line-height-heading);
  margin-bottom: 16px;
  text-align: center;
}

.lawyer-members__kana {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  margin-left: 8px;
  letter-spacing: 0.08em;
}

/* 担当分野タグ */
.lawyer-members__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.lawyer-members__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  border: 1px solid rgba(45, 184, 122, 0.3);
  background: rgba(45, 184, 122, 0.06);
  padding: 3px 12px;
  border-radius: 20px;
  line-height: 1.4;
}

/* プロフィールテーブル */
.lawyer-members__profile {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.lawyer-members__profile th,
.lawyer-members__profile td {
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  vertical-align: top;
}

.lawyer-members__profile th {
  width: 100px;
  color: #888;
  font-weight: 500;
  padding-right: 12px;
  white-space: nowrap;
}

.lawyer-members__profile td {
  color: var(--color-text);
}

/* メッセージ */
.lawyer-members__message p {
  font-size: 14px;
  line-height: var(--line-height-body);
  color: #555;
  margin-bottom: 14px;
}

.lawyer-members__message p:last-child {
  margin-bottom: 0;
}

/* ==============================
   アニメーション
   ============================== */
/* FV keyframes → page-common.css に集約 */

/* --- @keyframes 定義 --- */
@keyframes lawyerPhotoSlideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lawyerProfileSlideRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lawyerLowerFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerSubtitleBorder {
  from { border-left-color: transparent; }
  to   { border-left-color: var(--color-primary); }
}

@keyframes lawyerPointScaleIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes lawyerClosingExpand {
  from { opacity: 0; transform: scaleX(0.92); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes lawyerMembersFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerStaggerFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerPhotoScaleIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* SP用 keyframes */
@keyframes lawyerPhotoScaleInSp {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lawyerProfileFadeUpSp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerLowerFadeUpSp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerMembersFadeUpSp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerStaggerFadeUpSp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lawyerPhotoScaleInSpMember {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ==============================
   代表弁護士：上段アニメーション
   — 写真（左から）とプロフィール（右から）が対で登場
   ============================== */
.lawyer-lead.fade-in {
  opacity: 1;
}

.lawyer-lead__photo {
  opacity: 0;
}

.lawyer-lead.is-visible .lawyer-lead__photo {
  animation: lawyerPhotoSlideLeft 1.0s ease both;
  animation-delay: 0.4s;
}

.lawyer-lead__profile-area {
  opacity: 0;
}

.lawyer-lead.is-visible .lawyer-lead__profile-area {
  animation: lawyerProfileSlideRight 1.0s ease both;
  animation-delay: 0.55s;
}

/* ==============================
   代表弁護士：下段メッセージアニメーション
   — サブタイトルのボーダー伸長 + ポイント番号スケールイン
   ============================== */
.lawyer-lead__lower {
  opacity: 0;
}

.lawyer-lead.is-visible .lawyer-lead__lower {
  animation: lawyerLowerFadeUp 1.0s ease both;
  animation-delay: 0.8s;
}

/* サブタイトル：左ボーダーが伸びる */
.lawyer-lead__subtitle {
  border-left-color: transparent;
}

.lawyer-lead.is-visible .lawyer-lead__subtitle {
  animation: lawyerSubtitleBorder 1.0s ease both;
  animation-delay: 1.0s;
}

/* 3つのポイント：番号円スケールイン */
.lawyer-lead__points li::before {
  transform: scale(0);
}

.lawyer-lead.is-visible .lawyer-lead__points li:nth-child(1)::before {
  animation: lawyerPointScaleIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.1s;
}

.lawyer-lead.is-visible .lawyer-lead__points li:nth-child(2)::before {
  animation: lawyerPointScaleIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.25s;
}

.lawyer-lead.is-visible .lawyer-lead__points li:nth-child(3)::before {
  animation: lawyerPointScaleIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.4s;
}

/* 締めボックス：背景が広がる */
.lawyer-lead__closing {
  opacity: 0;
  transform-origin: left center;
}

.lawyer-lead.is-visible .lawyer-lead__closing {
  animation: lawyerClosingExpand 1.0s ease both;
  animation-delay: 1.5s;
}

/* ==============================
   所属弁護士：カード + 円形写真アニメーション
   ============================== */
.lawyer-members.fade-in {
  opacity: 0;
}

.lawyer-members.fade-in.is-visible {
  animation: lawyerMembersFadeUp 1.0s ease both;
  animation-delay: 0.4s;
}

/* カードstagger */
.lawyer-members__grid .stagger-child {
  opacity: 0;
}

.lawyer-members__grid .stagger-child.is-visible {
  animation: lawyerStaggerFadeUp 1.0s ease both;
}

/* 円形写真：スケールイン */
.lawyer-members__photo {
  opacity: 0;
}

.lawyer-members__grid .stagger-child.is-visible .lawyer-members__photo {
  animation: lawyerPhotoScaleIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.4s;
}

/* カードhover */
.lawyer-members__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lawyer-members__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* ==============================
   レスポンシブ: タブレット (≤1024px)
   ============================== */
@media (max-width: 1024px) {
  .lawyer-lead__upper {
    gap: 32px;
  }

  .lawyer-lead__photo {
    flex: 0 0 240px;
  }

  .lawyer-lead__name {
    font-size: 24px;
  }

  .lawyer-lead__catch {
    font-size: 18px;
  }

  .lawyer-lead__lower {
    padding: 0 20px;
  }

  .lawyer-lead__points li {
    font-size: 14px;
  }

  .lawyer-members__grid {
    gap: 24px;
  }

  .lawyer-members__card {
    padding: 32px 24px 28px;
  }
}

/* ==============================
   レスポンシブ: SP (≤768px)
   ============================== */
@media (max-width: 768px) {
  /* FV・パンくず → page-common.css に集約 */

  /* 代表弁護士: 縦積み */
  .lawyer-lead {
    padding: 48px 0 64px;
  }

  .lawyer-lead__upper {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
  }

  .lawyer-lead__photo {
    flex: none;
    width: 200px;
    margin: 0 auto;
  }

  .lawyer-lead__name {
    font-size: 22px;
    text-align: center;
  }

  .lawyer-lead__role {
    display: block;
    text-align: center;
  }

  .lawyer-lead__kana {
    display: block;
    margin-left: 0;
    margin-top: 4px;
    text-align: center;
  }

  .lawyer-lead__catch {
    font-size: 17px;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }

  .lawyer-lead__profile th {
    width: 90px;
    font-size: 13px;
  }

  .lawyer-lead__profile td {
    font-size: 13px;
  }

  .lawyer-lead__lower {
    margin-top: 8px;
  }

  .lawyer-lead__subtitle {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .lawyer-lead__message p {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .lawyer-lead__points li {
    padding-left: 30px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .lawyer-lead__points li::before {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .lawyer-lead__points li strong {
    font-size: 14px;
  }

  .lawyer-lead__closing {
    font-size: 14px;
    padding: 14px 16px;
  }

  .lawyer-lead__hobby {
    font-size: 13px;
  }

  /* 所属弁護士 */
  .lawyer-members {
    padding: 48px 0 64px;
  }

  /* セクション見出しSP → page-common.css .section-heading に集約 */

  .lawyer-members__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lawyer-members__card {
    padding: 24px 20px 20px;
  }

  .lawyer-members__photo {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }

  .lawyer-members__name {
    font-size: 20px;
  }

  .lawyer-members__kana {
    display: block;
    margin-left: 0;
    text-align: center;
  }

  .lawyer-members__tags {
    justify-content: center;
  }

  .lawyer-members__profile th {
    font-size: 13px;
    width: 90px;
  }

  .lawyer-members__profile td {
    font-size: 13px;
  }

  .lawyer-members__message p {
    font-size: 14px;
  }

  /* SP animation adjustments */

  /* 写真：SPは縦積みなので左右スライドではなくスケールイン */
  .lawyer-lead.is-visible .lawyer-lead__photo {
    animation-name: lawyerPhotoScaleInSp;
    animation-delay: 0.4s;
  }

  /* プロフィール：SPはフェードアップ（横スライドだと縦積み時に不自然） */
  .lawyer-lead.is-visible .lawyer-lead__profile-area {
    animation-name: lawyerProfileFadeUpSp;
    animation-delay: 0.5s;
  }

  /* 下段メッセージ：移動量縮小 */
  .lawyer-lead.is-visible .lawyer-lead__lower {
    animation-name: lawyerLowerFadeUpSp;
    animation-delay: 0.7s;
  }

  /* ポイント番号：遅延を短縮（SP幅でもたつき防止） */
  .lawyer-lead.is-visible .lawyer-lead__points li:nth-child(1)::before {
    animation-delay: 0.9s;
  }
  .lawyer-lead.is-visible .lawyer-lead__points li:nth-child(2)::before {
    animation-delay: 1.0s;
  }
  .lawyer-lead.is-visible .lawyer-lead__points li:nth-child(3)::before {
    animation-delay: 1.1s;
  }

  /* 締めボックス：遅延短縮 */
  .lawyer-lead.is-visible .lawyer-lead__closing {
    animation-delay: 1.2s;
  }

  /* 所属弁護士：移動量縮小 */
  .lawyer-members.fade-in.is-visible {
    animation-name: lawyerMembersFadeUpSp;
  }

  .lawyer-members__grid .stagger-child.is-visible {
    animation-name: lawyerStaggerFadeUpSp;
  }

  /* 円形写真：スケール初期値を調整 */
  .lawyer-members__grid .stagger-child.is-visible .lawyer-members__photo {
    animation-name: lawyerPhotoScaleInSpMember;
  }

  /* hover無効化 */
  .lawyer-members__card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  /* FV入場遅延短縮 → page-common.css に集約 */
}

/* ==============================
   アクセシビリティ
   ============================== */
/* FVのreduced-motion → page-common.css に集約 */
@media (prefers-reduced-motion: reduce) {
  .lawyer-lead__photo,
  .lawyer-lead__profile-area,
  .lawyer-lead__lower,
  .lawyer-lead__subtitle,
  .lawyer-lead__points li::before,
  .lawyer-lead__closing,
  .lawyer-members.fade-in,
  .lawyer-members__grid .stagger-child,
  .lawyer-members__photo {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .lawyer-lead__subtitle {
    border-left-color: var(--color-primary) !important;
  }
}