@charset "UTF-8";
/* ==========================================================
   07 — 導入前の不安解消 + 専門家チーム（MTG決定で刷新）
   ワンスクロールで収まるコンパクト設計
   ========================================================== */

.anshin {
  background: var(--bg-tint);
  padding: 88px 0 88px;
}

.anshin__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 44px;
}

/* チームの後に続く「よくある不安」見出し（同一セクション内の2ブロック目） */
.anshin__faq-head { margin-top: 80px; }

.anshin__card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.anshin__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
  font-feature-settings: "palt" 1;
}
.anshin__q-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--asagi);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 16px;
  transform: translateY(-1px);
}
.anshin__a {
  margin-top: 10px;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  /* 2026-09-17 村上FB: 本文はプロポーショナル詰め（palt）と文節改行で文字の縦列がそろわず読みにくい → 等幅グリッドの通常組みに戻す */
  font-feature-settings: normal;
  text-wrap: wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---------- 専門家チーム（見出し + メンバー5人） ---------- */
.anshin__team {
  margin-top: 0; /* セクション先頭に配置 */
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 44px 40px 40px;
}
.anshin__team-head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
/* 見出しは共通 .sec-head を継承（ラベル18px/浅葱アクセント）。h2(38px)より一段下の32pxに */
.anshin__team-title {
  font-size: 32px;
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
  text-wrap: balance;
}
.anshin__team-text {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}
/* メンバー: 淡色タイル + 切り抜き人物（下端揃え） + 名前ピル（タイル下辺に半分乗る） */
.team {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 18px; /* 行間はピルのはみ出し(約17px)ぶんを含む */
}
.team__member {
  flex: 0 1 calc((100% - 18px * 4) / 5);
  min-width: 0;
  text-align: center;
}
.team__photo {
  position: relative;
  aspect-ratio: 3 / 4; /* 支給写真(約0.68)に近い比率。上詰めで頭が切れない */
  border-radius: 14px;
  background: var(--bg-tint);
  overflow: hidden;
  isolation: isolate; /* 乗算合成をタイル内で完結させる */
  transition: transform .3s, box-shadow .3s;
}
/* 白背景のスタジオ写真を乗算で載せ、背景をタイル色に同化させる（切り抜き不要） */
.team__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
  mix-blend-mode: multiply;
  transition: transform .3s;
}
.team__member:hover .team__photo {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 30, 40, .12);
}
.team__member:hover .team__photo img { transform: scale(1.03); }

/* 名前ピル: タイル下辺に半分乗せる */
.team__name {
  position: relative;
  z-index: 1;
  display: block; /* inline-blockだと親のline-heightストラットで下にずれるためブロック化 */
  width: fit-content;
  margin: -17px auto 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
  background: var(--asagi);
  border-radius: 40px;
  padding: 6px 20px;
  box-shadow: 0 6px 16px rgba(0, 30, 40, .16);
  font-feature-settings: "palt" 1;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .25s;
}
.team__member:hover .team__name { background: var(--ink-strong); }
.team__role {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--asagi);
  font-feature-settings: "palt" 1;
  letter-spacing: .02em;
}
/* 見出し・役職の折返しは意味の切れ目（、／の後）だけに限定 */
.anshin__team-title > span,
.team__role span { display: inline-block; }
.team__msg {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--gray);
  font-feature-settings: "palt" 1;
  text-wrap: pretty;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .anshin { padding: 64px 0; }
  .anshin__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .anshin__faq-head { margin-top: 64px; }
  .anshin__team { padding: 36px 28px 32px; }
  .team { gap: 36px 16px; }
  .team__member { flex-basis: calc((100% - 16px * 2) / 3); }
}

@media (max-width: 768px) {
  .anshin { padding: 48px 0; }
  .anshin__faq-head { margin-top: 52px; }
  .anshin__card { padding: 20px 18px; }
  .anshin__q { font-size: 17px; }
  .anshin__a { padding-left: 0; }
  .anshin__team { padding: 28px 18px 26px; }
  .anshin__team-title { font-size: 26px; } /* 3セグメント（最長8字）なので375pxでも語中で折れない */
  .team { margin-top: 28px; gap: 32px 12px; }
  .team__member { flex-basis: calc((100% - 12px) / 2); }
  .team__name { font-size: 14px; padding: 5px 16px; margin-top: -15px; }
  .team__role { font-size: 12.5px; }
  .team__msg { font-size: 12.5px; }
}

/* 2026-09-17 村上FB: SPの横スクロールは廃止し、5人を全部表示（上の ≤768 ルールの2列。5人目は中央寄せ）。
   3列も試したが1列約90pxで役職・一言が読みづらいため2列に */
}