/* チーム紹介のプロフィール（scripts/build_team_profile.py が見本 mockups/team_pop から生成。手で直さない） */
.tp-stage{position:relative}
.tp-hot{position:absolute;left:0;width:100%;z-index:6;background:transparent;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tp-hot:focus-visible{outline:3px solid #C8102E;outline-offset:-6px}
.tp-copy{transition:transform .35s ease,opacity .35s ease,filter .35s ease}
.nw{white-space:nowrap}

/* 目印は紹介文の真下に重ねる（文字の高さを変えない＝帯の中の配置がずれない）。白い帯の人は右寄せ（左下に次の人の写真があるため） */
.tp-desc{position:relative}
@media (max-width:767px){.tp-desc{position:absolute}}
.tp-copy--w .tp-desc .tp-cue{left:auto;right:0}
.tp-cue{position:absolute;left:0;top:calc(100% + 12px);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;pointer-events:none;transition:transform .3s ease,background .3s ease,color .3s ease}
.tp-cue i{font-style:normal;transition:transform .3s ease}
.tp-copy.is-on .tp-cue i{transform:translateX(4px)}
html.tp-lock{overflow:hidden}
html.tp-lock .ai-fab,html.tp-acc-on .ai-fab,html.tp-lock #floatcta{display:none!important}

/* 共通のポップアップ */
.tp-pop{position:fixed;inset:0;z-index:1000}
.tp-pop[hidden]{display:none}
.tp-pop-bg{position:absolute;inset:0;background:rgba(20,16,14,.55);opacity:0;transition:opacity .3s ease}
.tp-pop.is-open .tp-pop-bg{opacity:1}
.tp-pop-panel{position:absolute;background:#fffdf8;color:#1a1a1a;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.28);transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.tp-pop-x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid #e5ddd0;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:#333}
@media (min-width:769px){.tp-pop-x{top:26px;right:26px}}
.tp-pop-photo{background:#f3ece1}
.tp-pop-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tp-pop-in{padding:36px 40px 40px}
.tp-pop-role{margin:0;color:#C8102E;font-weight:700;font-size:12px;letter-spacing:.12em}
.tp-pop-name{margin:6px 0 0;font-family:var(--font-serif,"Noto Serif JP",serif);font-size:30px;font-weight:900;letter-spacing:.04em}
.tp-pop-name span{display:inline-block;margin-left:12px;font-family:"Noto Sans JP",sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;color:#8a8178}
.tp-pop-catch{margin:18px 0 22px;font-family:var(--font-serif,"Noto Serif JP",serif);font-size:20px;font-weight:700;line-height:1.6;color:#1a1a1a;background:linear-gradient(transparent 64%,rgba(200,16,46,.14) 64%);display:inline}
.tp-pop-str{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.tp-pop-str.n4,.tp-pop-str.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-pop-str>div{background:#fff;border:1px solid #ece4d6;border-radius:14px;padding:16px 16px 14px}
.tp-pop-str em{display:block;font-style:normal;font-family:"Inter",sans-serif;font-weight:700;color:#C8102E;font-size:13px}
.tp-pop-str b{display:block;margin-top:4px;font-size:15px;line-height:1.45;word-break:auto-phrase}
.tp-pop-str p{margin:6px 0 0;font-size:12.5px;line-height:1.75;color:#555;text-wrap:pretty}
.tp-pop-h{margin:28px 0 10px;font-family:var(--font-serif,"Noto Serif JP",serif);font-size:16px}
.tp-pop-tl{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid #C8102E}
.tp-pop-tl li{position:relative;display:grid;grid-template-columns:70px 1fr;gap:10px;padding:6px 0}
.tp-pop-tl li::before{content:"";position:absolute;left:-22px;top:13px;width:10px;height:10px;border-radius:50%;background:#C8102E}
.tp-pop-tl span{font-weight:700;font-size:13px;color:#C8102E}
.tp-pop-tl p{margin:0;font-size:14px;line-height:1.7}
@media (max-width:768px){
  .tp-pop-in{padding:26px 20px 30px}
  .tp-pop-name{font-size:24px}
  .tp-pop-catch{font-size:17px}
  .tp-pop-str,.tp-pop-str.n2,.tp-pop-str.n4{grid-template-columns:1fr}
  .tp-pop-tl li{grid-template-columns:58px 1fr}
}

/* ===== p5：落款のような赤い印「PROFILE」＋ 墨の帯の名札がついたモーダル ===== */
.tp-head{position:relative}
/* 10/14 YUJI：四角い「PROFILE」を、ローマ字の名前の少し右に（名前の行の中に並べる） */
.tp-cue{position:relative;top:var(--cue-dy,2px);align-self:center;margin:0 0 0 4px;padding:6px 9px 4px;border:1.5px solid #C8102E;border-radius:2px;color:#C8102E;font-family:"Inter",sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;background:rgba(255,255,255,.9);line-height:1}
.tp-copy--k .tp-cue{background:rgba(20,18,18,.85)}
@media (max-width:767px){.tp-cue{display:inline-flex;margin:8px 0 0}}
.tp-copy--k .tp-cue{color:#ff6a7d;border-color:#ff6a7d}
.tp-copy.is-on .tp-cue{background:#C8102E;color:#fff;border-color:#C8102E}
/* 10/14 YUJI：写真は縦長で、浦部・工藤は左／浦口・荒巻は右に交互。浦部・工藤は黒基調、浦口・荒巻は白基調。
   写真の背景は、描き替えた帯の墨・白の質感（make_bg.py）。中身の列だけがスクロールする */
.tp-pop-panel{left:50%;top:50%;width:min(1060px,94vw);height:min(740px,88vh);border-radius:6px;transform:translate(-50%,-50%) rotate(-1.2deg) scale(.95);opacity:0;background:#fbf7ef;display:grid;grid-template-columns:34% minmax(0,1fr);overflow:hidden}
.tp-pop.is-open .tp-pop-panel{transform:translate(-50%,-50%);opacity:1}
.tp-pop-panel.is-right{grid-template-columns:minmax(0,1fr) 34%}
.tp-pop-panel.is-right .tp-pop-photo{order:2}
.tp-pop-photo{position:relative;height:100%;background:#1c1816 center/cover no-repeat;overflow:hidden}
.tp-pop-photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:auto;height:80%;max-width:none;object-fit:contain;filter:drop-shadow(0 0 16px rgba(255,255,255,.32)) drop-shadow(0 0 3px rgba(255,255,255,.35))}
/* 10/14 YUJI：切り抜きの縁を、チーム紹介の帯の写真と同じように少し光らせて背景になじませる */
.tp-pop-photo::after{content:"浦部内製化顧問";position:absolute;left:22px;top:22px;padding:8px 9px;border:2px solid #C8102E;color:#C8102E;font-family:var(--font-serif,"Noto Serif JP",serif);font-weight:900;font-size:12px;writing-mode:vertical-rl;letter-spacing:.2em}
.tp-pop-panel.is-right .tp-pop-photo::after{left:auto;right:22px;top:76px}
.tp-pop-in{height:100%;overflow:auto;padding:52px 46px 44px;overscroll-behavior:contain}
/* 黒基調（浦部・工藤） */
.tp-pop-panel.is-k{background:#151312;color:#f1ece4}
.is-k .tp-pop-role{color:#E8C36A}
.is-k .tp-pop-name{color:#fff}
.is-k .tp-pop-name span{color:rgba(255,255,255,.55)}
.is-k .tp-pop-catch{color:#fff;background:linear-gradient(transparent 64%,rgba(232,195,106,.28) 64%)}
.is-k .tp-pop-str>div{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}
.is-k .tp-pop-str em{color:#E8C36A}
.is-k .tp-pop-str b{color:#fff}
.is-k .tp-pop-str p{color:rgba(255,255,255,.74)}
.is-k .tp-pop-h{color:#fff}
.is-k .tp-pop-tl span{color:#E8C36A}
.is-k .tp-pop-tl p{color:rgba(255,255,255,.88)}
.is-k .tp-pop-tl p .nw,.is-k .tp-pop-str p .nw{color:inherit}
.is-k .tp-pop-x{background:#1f1c1a;border-color:rgba(255,255,255,.25);color:#fff}
@media (max-width:768px){
  .tp-pop-panel,.tp-pop-panel.is-right{grid-template-columns:1fr;height:auto;max-height:88vh;overflow:auto}
  /* パネル全体をスクロールしても閉じるボタンを右上14pxに残す。写真・本文は同じグリッドに重ね、ボタン用の余白を本文に確保する */
  .tp-pop-x{position:sticky;top:14px;right:auto;grid-column:1;grid-row:1 / 3;align-self:start;justify-self:end;margin:0 14px 0 0}
  .tp-pop-panel.is-right .tp-pop-photo{order:0}
  /* 10/14 YUJI：スマホで写真が枠より細く、左右に写真の切れ目（縦の線）が見えていた。横幅いっぱいに広げ、上を基準に胸元まで見せる */
  /* 10/14 YUJI（2回目）：顔が大きすぎる。（3回目）頭のてっぺんの上に常識的な余白を：写真220px＝髪の上に約30px。写真の枠を低くし、写真も小さく。写真は横1000pxで肩まで入れてある（10/25 左右のぼかしは廃止） */
  .tp-pop-photo{grid-column:1;grid-row:1;height:200px}
  .tp-pop-photo img{top:auto;bottom:0;left:50%;transform:translateX(-50%);width:auto;height:190px}
  .tp-pop-in{grid-column:1;grid-row:2;height:auto;overflow:visible;padding:26px 72px 30px 20px}
  .tp-pop-panel.is-right .tp-pop-photo::after{right:auto;left:16px;top:16px}
  .tp-pop-photo::after{left:16px;top:16px}
}

.tp-pop-str.n3{grid-template-columns:1fr}