/* SHINYAプロフィールページ ── home.css の続き。デザイン言語（色・黒フチ・ずれ影）を踏襲 */

.phero{position:relative;background:var(--olive);color:var(--paper);
  border-bottom:3px solid var(--ink);padding:110px 20px 40px;overflow:hidden;
  min-height:46svh;display:flex;align-items:flex-end}
.phero-inner{max-width:1000px;margin:0 auto;width:100%;position:relative;z-index:2}
.phero-title{font-size:clamp(52px,15vw,140px);font-weight:900;letter-spacing:-.04em;
  line-height:.9;margin-top:8px}
/* PROFILE ラベル：カプセルにせず、小文字と短い下線だけで示す（ボタンに見せない） */
.phero .hero-kicker{border:0;border-radius:0;padding:0;background:none;display:block;
  font-size:11px;font-weight:800;letter-spacing:.3em;color:var(--paper);opacity:.85}
.phero .hero-kicker::after{content:"";display:block;width:26px;height:3px;
  background:var(--paper);opacity:.7;margin-top:7px}
.phero-sub{margin-top:10px;font-size:clamp(12px,3vw,15px);font-weight:700;opacity:.9}
.phero-photo{position:absolute;right:2%;bottom:0;z-index:1;height:88%;max-height:340px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));pointer-events:none;
  object-fit:contain;object-position:bottom;opacity:.95}
@media (max-width:759px){
  .phero{padding:96px 20px 30px;min-height:40svh}
  .phero-photo{height:56%;max-height:190px;right:0}
}

.wrap.narrow{max-width:680px}
.sec-title.sm{font-size:clamp(26px,6.5vw,40px);margin-top:36px}
.sec-title.sm:first-child{margin-top:0}
.pf-lead{font-size:14.5px;font-weight:600;line-height:1.9;margin-bottom:8px}

/* 紹介文の右上に添える、右に少し傾いた吹き出し。
   つまみ（しっぽ）は下辺のやや左寄りから、下に飛び出す三角で作る。
   外側(-wrap)は data-reveal の出現アニメーション専用（transform:none で戻される）。
   傾きは内側の .pf-callout に持たせ、出現後もずっと傾いたままにする。 */
/* スマホ：吹き出しを見出しの「上」に出す（DOM は見出しが先なので order を逆に）。
   PC：見出しと同じ高さで右に置く。float は使わない。float だと吹き出しの高さの
   ぶんだけ本文が回り込み、改行位置が乱れてしまうため。 */
.pf-head{display:flex;flex-direction:column-reverse;margin-bottom:6px}
.pf-callout-wrap{margin:0 auto 18px;max-width:82%}
.pf-callout{position:relative;background:var(--khaki);border:2px solid var(--ink);
  border-radius:12px;padding:10px 12px;font-size:11px;font-weight:800;
  line-height:1.6;color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(3deg)}
/* しっぽ：黒フチぶん大きい三角(::before)の上に、中身の色の三角(::after)を重ねる */
.pf-callout::before,.pf-callout::after{content:"";position:absolute;
  width:0;height:0;border-style:solid;border-color:transparent}
.pf-callout::before{left:26px;top:100%;
  border-width:15px 12px 0 0;border-top-color:var(--ink)}
.pf-callout::after{left:29px;top:calc(100% - 2px);
  border-width:11px 8px 0 0;border-top-color:var(--khaki)}
@media (max-width:759px){
  .pf-callout{transform:rotate(2deg)}
}
@media (min-width:760px){
  .pf-head{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .pf-callout-wrap{margin:0;max-width:300px;flex-shrink:0}
}

.pf-facts{display:flex;margin:30px 0 10px;padding:14px 0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.pf-fact{flex:1;text-align:center}
.pf-fact+.pf-fact{border-left:2px solid var(--ink)}
.pf-fact-n{display:block;font-size:clamp(22px,6vw,32px);font-weight:900;color:var(--ink);
  letter-spacing:-.03em}
.pf-fact-u{font-size:11px;font-weight:800;margin-left:2px}
.pf-fact p{font-size:10px;font-weight:700;opacity:.6;margin-top:4px}
.pf-asof{font-size:10px;font-weight:700;color:var(--ink);text-align:right;margin-top:6px}

.pf-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 34px}
.pf-tags .tag{font-size:12px;font-weight:800;padding:7px 14px;border-radius:20px;
  border:2px solid var(--ink);background:var(--khaki);color:var(--ink)}

.pf-note{font-size:11px;font-weight:600;opacity:.55;line-height:1.9;margin:10px 0 26px;
  padding:14px 16px;border:2px dashed var(--line);border-radius:12px}

.pf-cta{margin-top:22px;display:inline-flex}

/* キーボードで動かしたときだけ、金の枠を出す（指やマウスでは出ない）。
   ブラウザ既定の青い枠は藍と金の世界観から浮くため。 */
:focus-visible{outline:2px solid #d8b25c;outline-offset:2px}