.work{
    background: var(--c-ivory);
}
/* ===== Jump nav ===== */
.p-work__jump{
    max-width: 1242px;
    margin:50px auto 0;
    display:flex;
    justify-content:center;
    gap:30px;
}
.p-work__jump-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:605px;
    height:70px;
    font-family:var(--f-serif);
    font-size:1rem;
    font-weight:500;
    color:var(--c-blue);
    line-height:1;
    padding:0 20px;
    border:1px solid var(--c-blue);
    transition:color .35s var(--ease);
}
.p-work__jump-btn::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--c-blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s var(--ease);
}
.p-work__jump-btn img{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%) rotate(90deg);
    transition:filter .35s var(--ease);
}
.p-work__jump-btn:is(:hover, :focus-visible){
    color:var(--c-white);
}
.p-work__jump-btn:is(:hover, :focus-visible)::before{
    transform:scaleX(1);
}
.p-work__jump-btn:is(:hover, :focus-visible) img{
    filter: var(--filter-white);
}
.p-work__jump-btn:focus-visible{
    outline:none;
    box-shadow:inset 0 0 0 2px var(--c-white), inset 0 0 0 3px var(--c-blue);
}
@media(min-width:1440px){
    .p-work__jump{
        max-width: 86.25vw;
        margin-top:3.472vw;
        gap:2.083vw;
    }
    .p-work__jump-btn{
        max-width:42.014vw;
        height:4.861vw;
        font-size:1.111vw;
        padding:0 1.389vw;
    }
    .p-work__jump-btn img{
        right:1.389vw;
    }
}
@media(min-width:896px) and (max-width:1400px){
    .p-work__jump{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(max-width:896px){
    .p-work__jump{
        margin-top:50px;
        padding:0 20px;
        gap:10px;
    }
    .p-work__jump-btn{
        justify-content:flex-start;
        font-size:0.875rem;
        height:62px;
        padding:0 20px;
    }
    .p-work__jump-btn img{
        right:15px;
    }
}
/* ===== Sections ===== */
.p-work__sections{
    max-width: 1242px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:100px;
    padding:100px 0 50px;
}
.p-work__section-head{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-bottom:30px;
    border-bottom:1px solid var(--c-line);
}
.p-work__section-label{
    font-family:var(--f-en);
    font-weight:500;
    font-size:0.875rem;
    color:var(--c-blue);
    text-transform:uppercase;
    line-height:1;
}
.p-work__section-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:1.875rem;
    line-height:1.4;
    color:var(--c-black);
}
.p-work__lead{
    font-family:var(--f-a1gothic);
    font-weight:400;
    font-size:1rem;
    line-height:1.4;
    color:var(--c-black);
    margin-top:50px;
}
.p-work__row{
    display:flex;
    align-items:stretch;
    gap:30px;
    margin-top:50px;
}
.p-work__row--reverse{
    flex-direction:row-reverse;
}
.p-work__row-photo{
    flex-shrink:0;
    width:500px;
    overflow:hidden;
}
.p-work__row-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.p-work__cards{
    display:flex;
    flex-direction:column;
    gap:30px;
    flex:1;
    min-width:0;
}
.p-work__card{
    background:var(--c-white);
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:30px;
}
.p-work__card-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:1.375rem;
    line-height:1.2;
    color:var(--c-black);
}
.p-work__card-body{
    font-family:var(--f-a1gothic);
    font-weight:400;
    font-size:1rem;
    line-height:1.875;
    color:var(--c-black);
}
.p-work__tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    height:28px;
    padding:0 10px;
    border:1px solid var(--c-blue);
    color:var(--c-blue);
    font-family:var(--f-a1gothic);
    font-size:0.875rem;
    font-weight:400;
    white-space:nowrap;
    line-height:1;
}
.p-work__note{
    font-size:0.750rem;
    font-weight:400;
}
@media(min-width:1440px){
    .p-work__sections{
        max-width: 86.25vw;
        gap:6.944vw;
        padding:6.944vw 0;
    }
    .p-work__section-head{
        gap:1.389vw;
        padding-bottom:2.083vw;
    }
    .p-work__section-label{
        font-size:0.972vw;
    }
    .p-work__section-ttl{
        font-size:2.083vw;
    }
    .p-work__lead{
        font-size:1.111vw;
        margin-top:2.083vw;
    }
    .p-work__row{
        gap:2.083vw;
        margin-top:3.472vw;
    }
    .p-work__row-photo{
        width:34.722vw;
    }
    .p-work__cards{
        gap:2.083vw;
    }
    .p-work__card{
        gap:2.083vw;
        padding:2.083vw;
    }
    .p-work__card-ttl{
        font-size:1.528vw;
    }
    .p-work__card-body{
        font-size:1.111vw;
    }
    .p-work__tag{
        height:1.944vw;
        padding:0 0.694vw;
        font-size:0.972vw;
    }
    .p-work__note{
        font-size:0.833vw;
    }
}
@media(min-width:896px) and (max-width:1400px){
    .p-work__sections{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(min-width:896px) and (max-width:1080px){
    .p-work__row-photo{
        width:280px;
    }
}
@media(max-width:896px){
    .p-work__sections{
        gap:50px;
        padding:50px 0;
    }
    .p-work__section-head{
        padding:0 20px 30px;
        gap: 16px;
    }
    .p-work__section-label {
        font-size: 0.75rem;
    }
    .p-work__section-ttl{
        font-size:1.25rem;
        line-height:1.5;
    }
    .p-work__lead{
        font-size:0.875rem;
        padding:0 20px;
        margin-top:30px;
    }
    .p-work__row{
        flex-direction:column;
        margin-top:30px;
    }
    .p-work__row-photo{
        width:100%;
    }
    .p-work__row-photo--01,
    .p-work__row-photo--02{
        aspect-ratio: 402 / 270;
    }
    .p-work__cards{
        gap:20px;
        padding:0 20px;
    }
    .p-work__card{
        padding:30px 20px;
    }
    .p-work__card-ttl{
        font-size:1.25rem;
        line-height:1.4;
    }
    .p-work__card-body{
        font-size:0.75rem;
        line-height:1.8;
    }
    .p-work__tag{
        height:auto;
        padding: 3px 4px 2px;
        font-size:0.625rem;
    }
    .p-work__note{
        font-size:0.625rem;
    }
}
/* ===== CTA ===== */
.p-work__cta{
    max-width: 1242px;
    margin-inline: auto;
    display:flex;
    padding:0 0 100px;
}
@media(min-width:1440px){
    .p-work__cta{
        max-width: 86.25vw;
        padding:0 0 6.944vw;
    }
}
@media(min-width:896px) and (max-width:1400px){
    .p-work__cta{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(max-width:896px){
    .p-work__cta{
        padding:0 20px 50px;
    }
}
@media(max-width:375px){
    .p-work__card-ttl {
        font-size: 5.067vw;
    }
}