/* 社員紹介：Figma「社員紹介」79:2。共通の装飾は style.css。 */
.staff-page-body { background:#fff; color:#606f7b; }
.staff-page-body .site-header { height:137px; padding:0 58px 0 81px; background:#fff; }
.staff-page-body .site-header.is-sticky { height:137px; box-shadow:none; animation:none; }
.staff-page-body .brand { width:299px; }
.staff-page { padding-top:137px; }
.staff-wide { width:min(1200px,calc(100% - 48px)); margin:0 auto; }
.staff-banner { height:300px; position:relative; overflow:hidden; background:#c2e3ff; }
.staff-banner__under,.staff-banner__photo { position:absolute; inset:0; mask-image:url('../img/staff/vector-3.svg'); mask-size:100% 100%; }
.staff-banner__under { background:url('../img/staff/raw-10.jpeg') center bottom / 100% auto no-repeat; }
.staff-banner__photo { background:url('../img/staff/raw-2.jpeg') center 55% / cover no-repeat; }
.staff-banner::after { content:''; position:absolute; inset:0; background:rgb(255 255 255 / 30%); }
.staff-banner__heading { position:relative; z-index:1; display:flex; align-items:center; gap:30px; height:100%; color:#fff; }
.staff-banner h1 { margin:0 10px 0 0; font-size:36px; line-height:1.5; font-weight:700; }
.staff-banner__heading p { font-size:16px; margin:0; font-weight:500; }
.staff-breadcrumb { display:flex; gap:14px; padding:16px 0; font-size:14px; line-height:28px; }
.staff-breadcrumb a { color:#606f7b; text-decoration:none; }
.staff-breadcrumb [aria-current] { color:#000; font-weight:700; }
.staff-team-photo { height:340px; position:relative; overflow:hidden; }
.staff-team-photo img { position:absolute; width:100%; height:auto; top:-31.82%; }
.staff-team-photo::after { content:''; position:absolute; inset:0; background:rgb(194 227 255 / 20%); }
.staff-introduction { text-align:center; padding:20px 0 71px; color:#3d3d3d; }
.staff-introduction h2 { font-size:32px; color:#1565a8; margin:0 0 34px; line-height:1.6; }
.staff-introduction p { font-size:16px; line-height:2; font-weight:700; margin:0; }
.staff-member { padding:60px 24px; background:rgb(194 227 255 / 50%); }
.staff-member--yamaguchi { background:#fff; }
.staff-member__inner { display:grid; grid-template-columns:300px minmax(0,620px); gap:80px; max-width:1000px; margin:0 auto; }
.staff-profile { min-width:0; }
.staff-portrait { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; mask-image:url('../img/staff/vector-5.svg'); mask-size:100% 100%; }
.staff-portrait img { position:absolute; max-width:none; object-fit:fill; }
.staff-portrait--morimoto img { width:160.333%; height:104.25%; left:-37.667%; top:-4.25%; }
.staff-portrait--yamaguchi img { width:200.667%; height:124.75%; left:-55%; top:-12.75%; }
.staff-portrait--otsuka img { width:251%; height:136.5%; left:-71%; top:-33.25%; }
.staff-profile h2 { font-size:24px; color:#1565a8; margin:12px 0 0; line-height:35px; }
.staff-profile__english { font-size:16px; line-height:23px; margin:0; }
.staff-profile__years { margin:20px 0 0; background:#009ce2; color:white; text-align:center; font-size:16px; line-height:23px; }
.staff-member__description { font-size:16px; color:#3d3d3d; line-height:40px; font-weight:500; }
.staff-member__description p { margin:0; }
.staff-interview { padding-top:110px; position:relative; }
.staff-interview__label { position:absolute; top:20px; left:0; margin:0; font-size:clamp(64px,8.89vw,128px); font-weight:700; line-height:1; color:rgb(255 255 255 / 50%); pointer-events:none; }
.staff-member--yamaguchi .staff-interview__label { color:rgb(21 101 168 / 31.5%); }
.staff-question { position:relative; margin-top:34px; }
.staff-interview > .staff-question { margin-top:0; }
.staff-question h3 { font-size:24px; line-height:1.4; font-weight:700; color:#000; margin:0 0 20px; }
.staff-answer { display:grid; grid-template-columns:25px minmax(0,1fr); gap:15px; align-items:start; }
.staff-answer img { margin-top:12px; }
.staff-answer p,.staff-answer-continuation { margin:0; font-size:16px; line-height:25px; font-weight:500; }
.staff-answer-continuation { padding-left:40px; }
.staff-interview__toggle { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; border:0; padding:0; margin-top:32px; color:#1565a8; background:none; font:500 14px/1.5 var(--zen); cursor:pointer; }
.staff-interview__toggle:hover { opacity:.7; }
.staff-interview__toggle:focus-visible { outline:2px solid #1565a8; outline-offset:6px; }
.staff-work-photos { position:relative; margin-top:40px; height:318px; }
.staff-work-photo { position:absolute; overflow:hidden; }
.staff-work-photo img { position:absolute; max-width:none; }
.staff-work-photo--rope { top:0; left:0; width:210px; height:126.757px; transform:rotate(-8deg); }
.staff-work-photo--rope img { width:137.34%; height:282.63%; left:-32%; top:-45%; }
.staff-work-photo--window { top:173px; right:-10px; width:191.996px; height:115.889px; transform:rotate(8.16deg); }
.staff-work-photo--window img { width:114.77%; height:111.3%; left:-3%; top:-12%; }
@media (max-width:1100px) {
 .staff-member__inner { grid-template-columns:260px minmax(0,1fr); gap:40px; }
 .staff-question h3 { font-size:21px; }
 .staff-work-photo--window { right:0; }
}
@media (max-width:768px) {
 .staff-page-body .site-header,.staff-page-body .site-header.is-sticky { height:82px; padding:0 22px; }
 .staff-page-body .brand { width:205px; }
 .staff-page { padding-top:82px; }
 .staff-banner { height:220px; }
 .staff-banner__heading { gap:20px; }
 .staff-banner h1 { font-size:30px; }
 .staff-team-photo { height:auto; aspect-ratio:60/17; }
 .staff-introduction { padding:28px 0 48px; }
 .staff-introduction h2 { font-size:24px; margin-bottom:20px; text-wrap:balance; }
 .staff-introduction p { text-wrap:balance; }
 .staff-introduction br { display:none; }
 .staff-member { padding:40px 24px; }
 .staff-member__inner { grid-template-columns:minmax(0,1fr); gap:28px; }
 .staff-profile { width:min(300px,100%); margin:0; text-align:left; }
 .staff-member__description { line-height:2; }
 .staff-interview { padding-top:92px; }
 .staff-interview__label { font-size:clamp(48px,11vw,80px); top:16px; }
 .staff-question h3 { font-size:20px; line-height:1.5; }
 .staff-work-photos { height:180px; }
 .staff-work-photo--window { top:65px; }
}
@media (max-width:425px) {
 .staff-wide { width:calc(100% - 36px); }
 .staff-banner { height:180px; }
 .staff-banner__heading { gap:14px; }
 .staff-banner h1 { font-size:26px; }
 .staff-banner__heading p { font-size:14px; }
 .staff-introduction h2 { font-size:22px; }
 .staff-member { padding:36px 18px; }
 .staff-question h3 { font-size:18px; }
 .staff-answer { grid-template-columns:25px minmax(0,1fr); gap:10px; }
 .staff-answer-continuation { padding-left:35px; }
}

/* 2つ目の質問から先を薄いグラデーションでプレビュー。 */
.staff-member { --staff-panel-background:#e1f1ff; }
.staff-member--yamaguchi { --staff-panel-background:#fff; }
.staff-interview__more {
    position:relative;
    height:140px;
    overflow:hidden;
    transition:height .45s cubic-bezier(.22,1,.36,1);
}
.staff-interview__inner {
    display:flow-root;
    opacity:.45;
    transition:opacity .45s ease;
}
.staff-interview__more::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent 0%,var(--staff-panel-background) 95%);
    opacity:1;
    transition:opacity .45s ease;
}
.staff-interview__more.is-expanded .staff-interview__inner { opacity:1; }
.staff-interview__more.is-expanded::after { opacity:0; }
.staff-interview__toggle { position:relative; margin-top:12px; }
@media (prefers-reduced-motion:reduce) {
    .staff-interview__more,.staff-interview__inner,.staff-interview__more::after { transition:none; }
}

/* 作業写真もインタビューと連動し、時間差でポップ表示する。 */
.staff-work-photos {
    --staff-photos-height:318px;
    height:0;
    margin-top:0;
    overflow:visible;
    transition:height .45s cubic-bezier(.22,1,.36,1),margin-top .45s ease;
}
.staff-work-photo {
    opacity:0;
    scale:.65;
    translate:0 20px;
    transition:opacity .18s ease,scale .18s ease,translate .18s ease;
}
.staff-work-photo--rope { top:20px; left:12px; }
.staff-work-photo--window { right:12px; }
.staff-member.is-interview-expanded .staff-work-photos {
    height:var(--staff-photos-height);
    margin-top:40px;
}
.staff-member.is-interview-expanded .staff-work-photo {
    opacity:1;
    scale:1;
    translate:0 0;
    transition:opacity .3s ease,scale .42s cubic-bezier(.34,1.56,.64,1),translate .42s cubic-bezier(.34,1.56,.64,1);
    transition-delay:.12s;
}
.staff-member.is-interview-expanded .staff-work-photo--window { transition-delay:.28s; }
@media (max-width:768px) {
    .staff-work-photos { --staff-photos-height:180px; }
}
@media (prefers-reduced-motion:reduce) {
    .staff-work-photos,.staff-work-photo,
    .staff-member.is-interview-expanded .staff-work-photo {
        transition:none;
    }
}

/* 山口さんの縦写真は全体を見せて、森元さんと同じ時間差表示にする。 */
.staff-work-photos--portrait { --staff-photos-height:440px; }
.staff-work-photos--portrait .staff-work-photo { width:150px; height:225px; }
.staff-work-photos--portrait .staff-work-photo--window { top:180px; }
.staff-work-photos--portrait .staff-work-photo img {
    width:100%;
    height:100%;
    left:0;
    top:0;
    object-fit:contain;
}

/* 大塚さんの添付写真もトリミングせず全体表示。 */
.staff-work-photos--otsuka { --staff-photos-height:390px; }
.staff-work-photos--otsuka .staff-work-photo--rope { width:160px; height:197px; }
.staff-work-photos--otsuka .staff-work-photo--window { width:192px; height:137px; top:230px; }
.staff-work-photos--otsuka .staff-work-photo img {
    width:100%;
    height:100%;
    left:0;
    top:0;
    object-fit:contain;
}

/* 1カラムでは作業写真を非表示にし、プロフィールを左寄せにする。 */
@media (max-width:768px) {
    .staff-profile { width:min(300px,100%); margin:0; text-align:left; }
    .staff-profile > .staff-work-photos { display:none; }
}

@media (max-width:425px) {
    .staff-profile { width:100%; }
}

@media (max-width:768px) {
    .staff-interview__label {
        top:48px;
        font-size:clamp(54px,17vw,96px);
        line-height:1;
    }
}

@media (max-width:560px) {
    .staff-introduction__title-second { display:block; }
}

/* ページ見出しの帯は画面幅に合わせて高さを抑える。 */
@media (max-width:1100px) {
    .staff-banner { height:clamp(140px,20vw,220px); }
}
@media (max-width:425px) {
    .staff-banner { height:120px; }
}