/* 松坂孝紀｜プロフィール: responsive layout on fluid.css. Figma 15:106 is the visual reference. */
.pf-hero .f-hero-media{object-position:center 22%}
.pf-roman{font:400 var(--fs-sm)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.pf-role{font:400 var(--fs-body)/1.7 "Noto Serif JP",serif;color:var(--navy)}
.pf-catch{font:400 clamp(24px,1rem + 1.6vw,40px)/1.45 "Noto Serif JP",serif;color:var(--navy)}

.pf-exp-inner{display:grid;gap:clamp(28px,3vw,40px)}
.pf-exp-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}
.pf-exp-title span{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--navy)}
.pf-exp-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.pf-exp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.pf-exp-photo{position:relative;aspect-ratio:4/3}
.pf-exp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pf-num{position:absolute;left:12px;bottom:12px;box-sizing:border-box;padding:2px 10px 0 6px;background:rgba(255,255,255,.95);font:400 clamp(26px,1rem + 2vw,40px)/1.15 "Noto Serif JP",serif;color:var(--navy)}
.pf-exp-body{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);padding:clamp(16px,1.8vw,22px)}
.pf-exp-body h3{font:700 var(--fs-h3)/1.5 "Noto Serif JP",serif;color:var(--navy)}
.pf-exp-body p{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}

.pf-story-photo{aspect-ratio:417/225;object-position:0 50%}

.pf-themes-inner{display:grid;gap:clamp(24px,3vw,40px)}
.pf-theme-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.pf-theme{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.2vw,14px);box-sizing:border-box;padding:clamp(20px,2.2vw,28px) clamp(14px,1.6vw,20px);border:1px solid var(--border);background:#fff;border-radius:4px}
.pf-icon{position:relative;width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);overflow:hidden}
.pf-icon>img{display:block;width:100%;height:100%}
.pf-icon span{position:absolute}
.pf-icon span img{position:absolute;display:block;width:auto;height:auto;max-width:none!important}
.pf-theme h3{font:700 var(--fs-sm)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.pf-theme p{font:400 var(--fs-xs)/1.7 "Noto Sans JP",sans-serif;color:var(--muted)}

.pf-stat{background:var(--surface);padding-block:clamp(28px,3vw,44px)}
.pf-stat-inner{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 10px}
.pf-stat-icon{width:clamp(26px,2.2vw,32px);height:clamp(26px,2.2vw,32px)}
.pf-stat-text{font:400 var(--fs-body)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.pf-stat-text strong{display:inline-block;margin:0 6px;font:700 clamp(24px,1rem + 1.4vw,34px)/1.3 "Noto Sans JP",sans-serif}

@media(max-width:1023px){
 .pf-exp-list,.pf-theme-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The tablet copy column (56% of container) is too narrow for the 15-character third catch line at the default clamp size. */
 .pf-catch{font-size:24px}
}
@media(max-width:767px){
 .pf-hero .f-hero-media{object-position:50% 18%}
 .pf-catch{font-size:22px}
 .pf-exp-title{flex-direction:column;align-items:flex-start;gap:6px}
 .pf-exp-list,.pf-theme-list{grid-template-columns:1fr}
 .pf-story-photo{aspect-ratio:4/3}
 .pf-stat-inner{justify-content:flex-start;text-align:left}
}

/* 経歴。講演依頼ページの略歴より詳しいものを、本来の置き場であるここに置く。 */
.pf-history-inner{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.pf-history-list{list-style:none;margin:0;padding:0;max-width:44em}
.pf-history-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--border)}
.pf-history-list li:last-child{border-bottom:1px solid var(--border)}
.pf-history-year{font:700 var(--fs-sm)/1.8 "Noto Sans JP",sans-serif;color:var(--terracotta)}
.pf-history-text{font:400 var(--fs-body)/1.9 "Noto Sans JP",sans-serif;color:var(--ink)}
@media(max-width:767px){
 .pf-history-inner{grid-template-columns:1fr;gap:20px}
 .pf-history-list li{grid-template-columns:1fr;gap:4px;padding:14px 0}
}

/* 経歴の下に置く、本人の発信先・所属先へのリンク。 */
.pf-links-title{margin-top:clamp(36px,4vw,56px)}
.pf-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:18px;padding:0;list-style:none}