@charset "UTF-8";
/* ============================================================
   monstyle Basic ─ プロフィールページ専用
   置き場所: swell_child/assets/css/msb-profile.css
   ※ msb-common.css の後に読み込まれる前提
   ============================================================ */

/* ------------------------------------------------------------
   0. ページ全体
   ------------------------------------------------------------ */
.msb-profile{ width:100%; max-width:none; margin:0; padding:0; }
.msb-profile .msb-wrap{ width:min(1240px, 92%); margin-inline:auto; }
.msb-profile img{ display:block; max-width:100%; }
.msb-profile ul{ list-style:none; margin:0; padding:0; }
.msb-profile a{ text-decoration:none; }

/* ------------------------------------------------------------
   1. ページ見出し
   ------------------------------------------------------------ */
.msb-pageHero{ padding:80px 0 36px; }
.msb-pageHero .jp-main{
  display:block; font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem); letter-spacing:.16em; color:var(--msb-ink);
  line-height:1.2; margin:0;
}
.msb-pageHero .en-sub{
  display:inline-flex; align-items:center; gap:14px; margin-top:.5em;
  font-family:var(--msb-serif); font-style:italic; font-size:1.05rem;
  letter-spacing:.14em; color:var(--msb-muted);
}
.msb-pageHero .en-sub::before{ content:""; width:44px; height:1px; background:var(--msb-gold); }

/* ------------------------------------------------------------
   2. レイアウト（目次＋本文）
   ------------------------------------------------------------ */
.profile-layout{
  display:grid; grid-template-columns:210px 1fr; gap:72px;
  align-items:start; padding-bottom:110px;
}
.msb-toc{ position:sticky; top:120px; }
.msb-toc .toc-label{
  font-family:var(--msb-serif); font-style:italic; letter-spacing:.16em;
  color:var(--msb-gold-deep); font-size:.9rem; margin-bottom:18px;
}
.msb-toc a{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; color:var(--msb-muted);
  font-family:var(--msb-serif); font-size:1.06rem; letter-spacing:.12em;
  border-bottom:1px solid var(--msb-line);
  transition:color .3s ease;
}
.msb-toc a small{ font-family:var(--msb-mincho); font-size:.7rem; letter-spacing:.2em; }
.msb-toc a::before{
  content:""; width:0; height:1px; background:var(--msb-gold);
  transition:width .35s ease;
}
.msb-toc a.is-active{ color:var(--msb-navy); }
.msb-toc a.is-active::before{ width:22px; }

.p-section{ padding:26px 0 84px; scroll-margin-top:120px; }
.p-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:34px; }
.p-head .en{
  font-family:var(--msb-serif); font-size:clamp(1.9rem,3.4vw,2.6rem);
  color:var(--msb-navy); letter-spacing:.05em; line-height:1;
}
.p-head .jp{
  font-family:var(--msb-mincho); font-size:.82rem;
  letter-spacing:.3em; color:var(--msb-muted);
}

/* ------------------------------------------------------------
   3. ごあいさつ
   ------------------------------------------------------------ */
.msg-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.msg-catch{
  font-family:var(--msb-mincho); font-weight:600; color:var(--msb-ink);
  font-size:clamp(1.18rem,2.05vw,1.5rem); line-height:1.95; letter-spacing:.03em;
  margin:0 0 1.4em;
}
.msg-catch .mc{ display:inline-block; }
.msg-body{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.98rem; line-height:2.2;
}
.msg-body p{ margin:0 0 1.6em; }
.msg-photo{
  border-radius:12px; overflow:hidden; position:sticky; top:130px;
  box-shadow:0 26px 54px -32px rgba(110,147,180,.45);
}
.msg-photo img{ width:100%; display:block; }

/* ------------------------------------------------------------
   4. 経歴カード
   ------------------------------------------------------------ */
.prof-card{
  position:relative; border-radius:20px; padding:46px 50px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
}
.prof-card::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}
.prof-name-en{
  font-family:var(--msb-serif); font-style:italic;
  color:var(--msb-gold-deep); letter-spacing:.12em;
}
.prof-name{
  font-family:var(--msb-mincho); font-weight:600;
  font-size:clamp(1.5rem,4.6vw,1.9rem); letter-spacing:.1em;
  color:var(--msb-ink); margin:.15em 0 .4em;
}
.prof-role{
  font-family:var(--msb-mincho); color:var(--msb-navy);
  font-size:.98rem; line-height:2; margin:0 0 1.4em;
}
.prof-bio{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.94rem; line-height:2.1; margin:0 0 1.8em;
}
.prof-list{ border-top:1px solid var(--msb-line); }
.pl-group{
  display:grid; grid-template-columns:120px 1fr; gap:18px;
  padding:16px 4px; border-bottom:1px solid var(--msb-line);
}
.pl-label{
  color:var(--msb-gold-deep); font-size:.78rem; letter-spacing:.14em;
  font-family:var(--msb-gothic); padding-top:.35em;
}
.pl-items li{
  font-family:var(--msb-mincho); font-size:.92rem; color:var(--msb-ink);
  line-height:1.85; padding:8px 0;
  border-bottom:1px solid rgba(228,220,205,.45);
}
.pl-items li:first-child{ padding-top:2px; }
.pl-items li:last-child{ border-bottom:none; padding-bottom:2px; }
.pl-sub{
  display:block; font-family:var(--msb-gothic); font-size:.78rem;
  color:var(--msb-muted); line-height:1.8; margin-top:.25em;
}
.prof-note{
  font-family:var(--msb-mincho); font-size:.88rem; color:var(--msb-muted);
  margin-top:18px; letter-spacing:.02em;
}
.prof-book{
  margin-top:26px; padding:20px 24px;
  border:1px solid var(--msb-gold-soft); border-radius:12px;
  font-family:var(--msb-mincho); font-size:.94rem; color:var(--msb-ink);
  background:rgba(255,255,255,.5);
}
.prof-book small{
  display:block; color:var(--msb-muted); font-size:.78rem; margin-top:.3em;
}

/* ------------------------------------------------------------
   5. 活動実績カード（トップと同じ見た目）
   ------------------------------------------------------------ */
.msb-profile .sec-lead{
  font-family:var(--msb-mincho); color:var(--msb-muted);
  font-size:.98rem; line-height:2; margin-bottom:34px; max-width:640px;
}
.msb-profile .lead-note{
  display:inline-block; font-size:.8rem; color:var(--msb-gold-deep); margin-top:.4em;
}
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.msb-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -34px rgba(150,130,90,.38);
  transition:transform .35s ease, box-shadow .35s ease;
}
.msb-card:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -26px rgba(110,147,180,.5); }
.card-thumb{ aspect-ratio:16/10; overflow:hidden; background:#E9E1D2; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.msb-card:hover .card-thumb img{ transform:scale(1.04); }
.card-cat{
  align-self:flex-start; margin:18px 22px 10px;
  font-family:var(--msb-gothic); font-size:.74rem; letter-spacing:.08em;
  color:var(--msb-navy); border:1px solid var(--msb-gold-soft);
  border-radius:3px; padding:.2em 1em;
}
.card-title{
  margin:0 22px 12px; font-family:var(--msb-mincho); font-weight:600;
  font-size:1.02rem; line-height:1.7; color:var(--msb-ink); flex-grow:1;
}
.card-date{
  margin:0 22px 20px; font-family:var(--msb-gothic);
  font-size:.82rem; color:var(--msb-muted);
}
.msb-profile .more{ text-align:center; margin-top:44px; }
.msb-btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:1em;
  min-width:420px; max-width:100%; border-radius:999px;
  border:1px solid transparent; color:var(--msb-navy);
  background:linear-gradient(#FDFBF7,#FDFBF7) padding-box,
             linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
  font-family:var(--msb-mincho); font-weight:500; letter-spacing:.16em;
  padding:1.05em 2em; transition:background .3s ease;
}
.msb-btn-outline:hover{
  background:linear-gradient(100deg,#FFF4E4,#FCE8CE) padding-box,
             linear-gradient(120deg,#D9BC85 0%,#C9A25E 45%,#E7CFA0 100%) border-box;
}

/* ------------------------------------------------------------
   6. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .profile-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .profile-layout > *{ min-width:0; }

  /* 目次を横スクロールのタブに */
  .msb-toc{
    position:sticky; top:var(--swl-headerH, 62px); z-index:30;
    display:flex; flex-wrap:nowrap; gap:8px; padding:10px 0;
    background:rgba(253,251,247,.92);
    border-bottom:1px solid rgba(255,255,255,.7);
    box-shadow:0 10px 26px -22px rgba(150,130,90,.3);
    margin-bottom:10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .msb-toc::-webkit-scrollbar{ display:none; }
  .msb-toc .toc-label{ display:none; }
  .msb-toc a{
    border-bottom:none; padding:5px 18px; white-space:nowrap;
    border:1px solid var(--msb-line); border-radius:999px; font-size:.84rem;
  }
  .msb-toc a::before{ display:none; }
  .msb-toc a small{ display:none; }
  .msb-toc a.is-active{
    background:var(--msb-navy); color:#fff; border-color:var(--msb-navy);
  }

  .msg-grid{ grid-template-columns:1fr; gap:32px; }
  .msg-photo{ position:static; max-width:440px; margin:0 auto; }
  .prof-card{ padding:32px 24px; }
  .pl-group{ grid-template-columns:1fr; gap:8px; padding:16px 2px; }
  .pl-label{ padding-top:0; }
  .pl-items li{ font-size:.9rem; }
  .card-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}

@media (max-width:959px){
  /* iOS対策：すりガラスを外す */
  .prof-card,
  .msb-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,.82) !important;
  }
}

@media (max-width:620px){
  .msb-pageHero{ padding:52px 0 26px; }
  .p-section{ padding:20px 0 62px; }
  .msb-profile .msb-wrap{ width:min(1240px, 86%); }
  .msb-btn-outline{ min-width:0; width:100%; font-size:.86rem; padding:.85em 1.6em; }
  .msg-catch{ font-size:1.14rem; }
  .msg-body{ font-size:.94rem; }
}




/* ============================================================
   目次：追従をやめる
   ============================================================ */
.msb-toc{
  position:static !important;
  top:auto !important;
}
@media (max-width:1080px){
  .msb-toc{
    background:transparent !important;
    border-bottom:none !important;
    box-shadow:none !important;
    margin-bottom:24px !important;
    padding:0 0 4px !important;
  }
}
/* 著書：Amazonリンク（控えめ） */
.prof-book__links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; }
.prof-book__links a{
  font-family:var(--msb-gothic); font-size:.76rem; letter-spacing:.06em;
  color:var(--msb-navy); text-decoration:none;
  border-bottom:1px solid var(--msb-gold-soft); padding-bottom:2px;
  display:inline-flex; align-items:center; gap:.4em;
}
.prof-book__links a::after{ content:"↗"; font-size:.7rem; color:var(--msb-gold); }
.prof-book__links a:hover{ border-color:var(--msb-gold); }