/* 職員インタビュー：本文を主役に、実際の表情と仕事・休日の写真を織り込む。 */
.staff-story { color: #354b40; background: #fffefa; }
.staff-story figure { margin: 0; }
.story-hero { padding: 24px 0 72px; background: linear-gradient(125deg,#fff1e1,#fbf9ed 60%,#ecf5ed); }
.story-hero .breadcrumbs { margin-bottom: 44px; }
.story-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.story-eyebrow { font: 700 13px/1.8 var(--font-body); letter-spacing: .13em; color: #61785d; margin: 0 0 24px; }
.story-hero h1 { font-family: var(--font-message); font-weight: 500; font-size: clamp(28px,3.2vw,46px); line-height: 1.7; letter-spacing: .03em; margin: 0 0 36px; }
.story-person { margin: 0; }
.story-person span { display: block; font-size: 13px; line-height: 1.9; }
.story-person strong { display: block; font-size: 22px; margin: 10px 0; }
.story-person small { font-size: 12px; color: #637467; }
.story-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 100px 12px 12px 12px; }
.story-reading { width: min(720px,calc(100% - 48px)); margin-inline: auto; }
.story-intro { padding: 36px 0 24px; font-size: 16px; line-height: 2.15; }
.story-date { font-size: 12px; color: #6b756e; margin-top: 22px; }
.story-index { padding: 20px 0; border-block: 1px solid #dbe4d8; }
.story-index > p { margin: 0 0 14px; font-size: 13px; font-weight: 700; }
.story-index ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.story-index a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; font-size: 14px; line-height: 1.7; color: #3c6050; }
.story-index a:hover,.story-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.story-index a span { flex: none; color: #829778; font-size: 12px; }
.story-chapter { padding: 48px 0 0; scroll-margin-top: 100px; }
.story-chapter h2 { font: 500 clamp(23px,2.2vw,30px)/1.8 var(--font-message); margin: 0 0 24px; }
.staff-story .story-scene { max-width: 640px; width: calc(100% - 48px); margin: 24px auto 0; }
.story-scene img { display: block; width: 100%; height: auto; border-radius: 12px; }
.story-scene figcaption,.story-off-photos figcaption { font-size: 12px; color: #637467; line-height: 1.8; padding-top: 10px; }
.story-qa { margin-bottom: 8px; }
.story-qa p { font: 400 16px/2.15 var(--font-body); margin: 0 0 20px; }
.story-text-link { display: inline-block; color: #386451; font-size: 14px; line-height: 1.8; padding: 12px 0; border-bottom: 1px solid #bad0c0; }
.story-off-photos { width: min(720px,calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.story-off-photos img { width: 100%; height: auto; display: block; border-radius: 12px; }
.story-closing { margin-top: 48px; padding: 40px 0; background: linear-gradient(115deg,#fff1e1,#fcf9e6 55%,#e9f2e8); }
.story-closing h2 { font: 500 17px/2 var(--font-body); margin: 0; }
.story-closing blockquote { font: 500 clamp(28px,3.5vw,44px)/1.8 var(--font-message); margin: 32px 0 8px; }
.story-next { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-block: 64px; }
.story-next h2 { font: 500 22px/1.8 var(--font-message); margin: 0 0 24px; }
.story-next .story-text-link { display: block; width: fit-content; margin-top: 16px; }
.story-next > div { min-width: 0; }
@media(max-width:767px) {
 .story-hero { padding: 18px 0 36px; }
 .story-hero .breadcrumbs { margin-bottom: 28px; }
 .story-hero-grid { grid-template-columns: 1fr; gap: 28px; }
 .story-hero h1 { font-size: clamp(27px,7.3vw,36px); line-height: 1.65; margin-bottom: 24px; }
 .story-eyebrow { margin-bottom: 16px; }
 .story-portrait img { border-top-left-radius: 56px; }
 .story-reading { width: calc(100% - 40px); }
 .story-intro { padding: 36px 0 24px; font-size: 15px; }
 .story-index a { font-size: 13px; gap: 12px; }
 .story-chapter { padding-top: 36px; }
 .story-chapter h2 { font-size: 23px; margin-bottom: 20px; }
 .staff-story .story-scene { width: calc(100% - 40px); margin-bottom: 0; }
 .story-qa p { font-size: 15px; line-height: 2.05; }
 .story-off-photos { width: calc(100% - 40px); grid-template-columns: 1fr 1fr; gap: 12px; }
 .story-closing { margin-top: 52px; padding: 44px 0; }
 .story-next { grid-template-columns: 1fr; gap: 36px; padding-block: 44px; }
}