/* ============================================
   株式会社Tip — メンバー(/members/) Bocek型
   ============================================ */

/* 濃色ヒーロー */
.mb-hero{
  background:linear-gradient(160deg,var(--navy3) 0%,var(--navy) 70%);
  padding:150px clamp(20px,4vw,52px) 76px;position:relative;overflow:hidden;
}
.mb-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
.mb-hero .wrap{max-width:var(--maxw);position:relative;z-index:1}
.mb-hero .sec-en{
  color:rgba(255,255,255,.55);display:block;margin-bottom:14px;
  font-size:.7rem;letter-spacing:.28em;font-weight:600;
}
.mb-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:18px;line-height:1.5}
.mb-hero p{color:rgba(255,255,255,.76);font-size:.92rem;max-width:680px;line-height:2.1}

/* パンくず */
.mb-crumb{
  max-width:var(--maxw);margin:0 auto;padding:22px clamp(20px,4vw,52px) 0;
  font-size:.72rem;color:var(--ink3);letter-spacing:.06em;text-align:right;
}
.mb-crumb a{border-bottom:1px solid var(--line2)}
.mb-crumb a:hover{color:var(--navy)}

/* 一覧グリッド（4列・枠なし写真） */
.mb-section{padding:56px clamp(20px,4vw,52px) 100px}
.mb-section .wrap{max-width:var(--maxw)}
.mb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:52px 30px}
.mb-item{display:block;color:inherit}
.mb-item-photo{
  aspect-ratio:1/1;overflow:hidden;background:var(--wash);margin-bottom:18px;
}
.mb-item-photo img,.mb-item-photo svg{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.mb-item:hover .mb-item-photo img,.mb-item:hover .mb-item-photo svg{transform:scale(1.04)}
.mb-item-kana{
  display:block;font-family:var(--en);font-size:.66rem;color:var(--ink3);
  letter-spacing:.12em;margin-bottom:7px;
}
.mb-item-name{
  font-size:1.06rem;font-weight:700;color:var(--navy3);
  letter-spacing:.06em;line-height:1.6;margin-bottom:7px;
}
.mb-item-role{font-size:.78rem;color:var(--ink2);line-height:1.75;margin-bottom:10px}
.mb-item-excerpt{
  font-size:.78rem;color:var(--ink3);line-height:1.95;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mb-item:hover .mb-item-name{color:var(--mikan-deep)}

/* 詳細ページ */
.mb-detail{padding:46px clamp(20px,4vw,52px) 90px}
.mb-detail .wrap{max-width:var(--maxw)}
.mb-detail-grid{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(36px,5vw,72px);
  align-items:start;
}
.mb-detail-photo{aspect-ratio:1/1;overflow:hidden;background:var(--wash);margin-bottom:18px}
.mb-detail-photo img,.mb-detail-photo svg{width:100%;height:100%;object-fit:cover;display:block}
.mb-detail-side .mb-item-kana{text-align:center;margin-bottom:10px;letter-spacing:.18em}
.mb-detail-side h1{
  font-size:1.45rem;font-weight:700;color:var(--navy3);text-align:center;
  letter-spacing:.08em;line-height:1.6;margin-bottom:10px;
}
.mb-detail-side .mb-detail-role{
  font-size:.8rem;color:var(--ink2);text-align:center;line-height:1.8;
}
.mb-detail-side .mb-detail-dept{
  font-size:.72rem;color:var(--mikan-deep);text-align:center;
  font-weight:600;letter-spacing:.12em;margin-top:6px;
}
.mb-detail-links{display:flex;gap:12px;justify-content:center;margin-top:20px}
.mb-detail-links a{
  width:38px;height:38px;border:1px solid var(--line2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  color:var(--ink2);transition:background .3s,color .3s,border-color .3s;
}
.mb-detail-links a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.mb-block{margin-bottom:44px}
.mb-block h2{
  font-size:1.16rem;font-weight:700;color:var(--navy3);letter-spacing:.08em;
  margin-bottom:20px;padding-left:14px;border-left:4px solid var(--mikan);line-height:1.7;
}
.mb-block p{color:var(--ink2);font-size:.9rem;line-height:2.25;margin-bottom:16px}
.mb-block p:last-child{margin-bottom:0}
.mb-career{padding:0;margin:0}
.mb-career li{
  list-style:none;display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;
  font-size:.87rem;color:var(--ink2);line-height:1.95;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.mb-career li b{color:var(--navy3);font-weight:600;font-size:.84rem}
.mb-tags{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.mb-tags li{
  list-style:none;font-size:.8rem;color:var(--navy2);
  border:1px solid var(--line2);padding:6px 16px;border-radius:999px;
}
.mb-back{margin-top:12px}

@media(max-width:1020px){
  .mb-grid{grid-template-columns:repeat(2,1fr);gap:44px 26px}
  .mb-detail-grid{grid-template-columns:230px minmax(0,1fr);gap:36px}
}
@media(max-width:640px){
  .mb-hero{padding:118px 22px 52px}
  .mb-section{padding:36px 22px 70px}
  .mb-grid{grid-template-columns:1fr 1fr;gap:34px 18px}
  .mb-item-name{font-size:.95rem}
  .mb-item-excerpt{-webkit-line-clamp:2}
  .mb-detail-grid{grid-template-columns:1fr;gap:30px}
  .mb-detail-photo{max-width:260px;margin:0 auto 18px}
  .mb-career li{grid-template-columns:1fr;gap:2px;padding:11px 0}
}

/* 「少人数だからできること」カード */
.mb-strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.mb-strength{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--mikan);
  padding:30px 28px;
}
.mb-strength b{
  display:block;font-size:1.02rem;color:var(--navy3);margin-bottom:14px;
  line-height:1.85;letter-spacing:.05em;
}
.mb-strength p{font-size:.86rem;color:var(--ink2);line-height:2.1;margin:0}
@media(max-width:1020px){.mb-strengths{grid-template-columns:1fr}}