.culture-index,.culture{
    background: var(--c-ivory);
}
/* ===== Story list ===== */
.p-culture__list{
    max-width: 1242px;
    margin-inline: auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    padding-top: 50px;
}
.p-culture__list-item{
    background:var(--c-white);
}
.p-culture__card{
    display:block;
    position:relative;
    background:var(--c-white);
    overflow:hidden;
    transition:opacity .25s;
}
.p-culture__card:is(:hover, :focus-visible){
    opacity:.9;
}
.p-culture__card:focus-visible{
    outline:none;
    box-shadow:inset 0 0 0 2px var(--c-blue);
}
.p-culture__card-img{
    overflow:hidden;
    aspect-ratio: 3 / 2;
}
.p-culture__card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s var(--ease);
}
.p-culture__card:is(:hover, :focus-visible) .p-culture__card-img img{
    transform:scale(1.04);
}
.p-culture__card-arrow{
    position:absolute;
    top:0;
    right:0;
    overflow:hidden;
    isolation:isolate;
    width:30px;
    height:30px;
    background:var(--c-ivory);
    display:flex;
    justify-content:center;
    align-items:center;
}
.p-culture__card-arrow::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-culture__card-arrow img{
    width:10px;
    height:20px;
    transition:filter .35s var(--ease);
}
.p-culture__card:is(:hover, :focus-visible) .p-culture__card-arrow::before{
    transform:scaleX(1);
}
.p-culture__card:is(:hover, :focus-visible) .p-culture__card-arrow img{
    filter:var(--filter-white);
}
.p-culture__card-body{
    padding:20px 30px 30px;
    display:flex;
    flex-direction:column;
    gap:15px;
}
.p-culture__card-tags{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--c-blue);
    height:30px;
    padding:0 10px;
    align-self:flex-start;
}
.p-culture__card-num{
    font-family:var(--f-en);
    font-size:0.875rem;
    font-weight:400;
    color:var(--c-white);
    text-transform:uppercase;
    line-height:1;
}
.p-culture__card-tag{
    font-family:var(--f-a1gothic);
    font-size:0.875rem;
    line-height:1;
    color:var(--c-white);
    font-weight:400;
}
.p-culture__card-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:1.25rem;
    line-height:1.5;
    color:var(--c-black);
}
.p-culture__card-meta{
    font-family:var(--f-a1gothic);
    font-size:0.875rem;
    line-height:1.714;
    color:var(--c-black);
    font-weight:400;
}
.p-culture__list-cta{
    max-width: 1242px;
    margin-inline: auto;
    display:flex;
    padding:50px 0 100px;
}
@media(min-width:1440px){
    /* ===== Story list ===== */
    .p-culture__list{
        max-width: 86.25vw;
        padding-top: 3.472vw;
    }
    .p-culture__card-arrow{
        width:2.083vw;
        height:2.083vw;
    }
    .p-culture__card-arrow img{
        width:0.694vw;
        height:1.389vw;
    }
    .p-culture__card-body{
        padding:1.389vw 2.083vw 2.083vw;
    }
    .p-culture__card-tags{
        gap:0.694vw;
        height:2.083vw;
        padding:0 0.694vw;
    }
    .p-culture__card-num{
        font-size:0.972vw;
    }
    .p-culture__card-tag{
        font-size:0.972vw;
    }
    .p-culture__card-ttl{
        font-size:1.389vw;
    }
    .p-culture__card-meta{
        font-size:0.972vw;
    }
    .p-culture__list-cta{
        max-width: 86.25vw;
        padding:3.472vw 0 6.944vw;
    }
}
@media(min-width:896px) and (max-width:1400px) {
    .p-culture__list {
        padding-left: 40px;
        padding-right: 40px;
        grid-template-columns: repeat(3, 1fr);
    }
    .p-culture__list-cta {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(min-width:896px) and (max-width:1024px) {
    .p-culture__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .p-culture__card-img {
        width: 100%;
        height: 100%;
    }
}
@media(max-width:896px){
    .p-culture__list{
        grid-template-columns:1fr;
        gap:20px;
        padding:0 20px;
        padding-top: 30px;
    }
    .p-culture__card-img{
        width: 100%;
        height: 100%;
        aspect-ratio: 181 / 120;
    }
    .p-culture__card-arrow{
        width:30px;
        height:30px;
    }
    .p-culture__card-body{
        padding:20px 20px;
    }
    .p-culture__card-tags {
        gap: 10px;
        height: 24px;
        padding: 0 10px;
    }
    .p-culture__card-num {
        font-size: 0.75rem;
    }
    .p-culture__card-tag {
        font-size: 0.75rem;
    }
    .p-culture__card-ttl{
        font-size:1.25rem;
        line-height:1.2;
    }
    .p-culture__card-meta{
        font-size:0.75rem;
    }
    .p-culture__list-cta{
        padding:50px 20px;
    }
}
/* ===== Hero ===== */
.p-culture__hero{
    display:flex;
    align-items:stretch;
}
.p-culture__hero-photo{
    width:50%;
    aspect-ratio: 240 / 179;
    overflow:hidden;
}
.p-culture__hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.p-culture__hero-band{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:50px;
    width:50%;
    padding:0 50px;
    background:var(--c-blue);
    color:var(--c-white);
}
.p-culture__hero-meta{
    display:flex;
    align-items:center;
    gap:20px;
}
.p-culture__hero-meta-en{
    font-family:var(--f-en);
    font-weight:400;
    font-size:24px;
    line-height:1;
}
.p-culture__hero-meta-tag{
    font-family:var(--f-a1gothic);
    font-size:22px;
    line-height:1;
    font-weight:400;
}
.p-culture__hero-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:34px;
    line-height:1.2;
}
.p-culture__hero-person{
    font-family:var(--f-a1gothic);
    font-size:22px;
    line-height:1;
    font-weight:400;
}
.p-culture__hero-meta-en:not(.is-typed),
.p-culture__hero-meta-tag:not(.is-typed),
.p-culture__hero-ttl:not(.is-typed),
.p-culture__hero-person:not(.is-typed){
    opacity:0;
}
/* ===== Lead ===== */
.p-culture__lead{
    position:relative;
    padding:100px 0 0;
}
.p-culture__lead-inner {
    border-bottom:1px solid var(--c-blue);
}
.p-culture__lead-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:40px;
    line-height:1.5;
    color:var(--c-black);
    max-width: 1240px;
    margin-inline: auto;
    padding-bottom:50px;
}
.p-culture__lead-body{
    font-family:var(--f-a1gothic);
    font-size:1rem;
    line-height:1.875;
    color:var(--c-black);
    padding:50px 0 100px;
    padding-left:100px;
    position:relative;
    max-width: 1240px;
    margin-inline: auto;
    font-weight:400;
}
.p-culture__lead-body:before{
    content:'';
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    left:50px;
    top:0;
    background:var(--c-blue);
}
/* ===== QA ===== */
.p-culture__qa {
    max-width: 1240px;
    margin-inline: auto;
}
.p-culture__qa-q{
    display:flex;
    align-items:center;
    gap:15px;
    padding:30px;
    background:var(--c-blue);
}
.p-culture__qa-q-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:24px;
    height:24px;
    border-radius:2px;
    background:var(--c-white);
    font-family:var(--f-en);
    font-weight:700;
    font-size:16px;
    line-height:1.875;
    color:var(--c-blue);
}
.p-culture__qa-q-text{
    font-family:var(--f-a1gothic);
    font-weight:500;
    font-size:16px;
    color:var(--c-white);
}
.p-culture__qa-a{
    padding:30px;
}
.p-culture__qa-a-text{
    font-family:var(--f-a1gothic);
    font-size:16px;
    line-height:1.875;
    color:var(--c-black);
    text-align:justify;
    font-weight:400;
}
/* ===== Feature ===== */
.p-culture__feature{
    display:flex;
    align-items:center;
    gap:50px;
    padding:100px 0;
    max-width: 1240px;
    margin-inline: auto;
}
.p-culture__feature-photo{
    width:720px;
    aspect-ratio: 360 / 197;
    overflow:hidden;
    flex-shrink:0;
}
.p-culture__feature-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.p-culture__feature-body{
    display:flex;
    flex-direction:column;
    gap:50px;
}
.p-culture__feature-ttl{
    font-family:var(--f-serif);
    font-weight:500;
    font-size:30px;
    line-height:1.5;
    color:var(--c-black);
}
.p-culture__feature-desc{
    font-family:var(--f-a1gothic);
    font-size:16px;
    line-height:1.8;
    color:var(--c-black);
    font-weight:400;
}
/* ===== More stories ===== */
.p-culture__more-label{
    max-width: 1240px;
    margin-inline: auto;
    font-family:var(--f-serif);
    font-weight:500;
    font-size:16px;
    line-height:1.8;
    color:var(--c-blue);
    margin-bottom:40px;
}
.p-culture__more-btn {
    max-width: 1242px;
    margin-inline: auto;
    display: flex;
    padding: 50px 0 100px;
}
@media(min-width:1440px){
    /* ===== Hero ===== */
    .p-culture__hero-band{
        padding:0 3.472vw;
    }
    .p-culture__hero-meta-en{
        font-size:1.667vw;
    }
    .p-culture__hero-meta-tag{
        font-size:1.528vw;
    }
    .p-culture__hero-ttl{
        font-size:2.361vw;
    }
    .p-culture__hero-person{
        font-size:1.528vw;
    }
    /* ===== Lead ===== */
    .p-culture__lead-ttl{
        font-size:2.778vw;
        max-width: 86.111vw;
    }
    .p-culture__lead-body{
        font-size:1.111vw;
        padding:3.472vw 0 6.944vw;
        padding-left:6.944vw;
        max-width: 86.111vw;
    }
    .p-culture__lead-body:before{
        left:3.472vw;
    }
    /* ===== QA ===== */
    .p-culture__qa {
        max-width: 86.111vw;
    }
    .p-culture__qa-q-mark{
        width:1.667vw;
        height:1.667vw;
        font-size:1.111vw;
    }
    .p-culture__qa-q-text{
        font-size:1.111vw;
    }
    .p-culture__qa-a-text{
        font-size:1.111vw;
    }
    /* ===== Feature ===== */
    .p-culture__feature{
        max-width: 86.111vw;
    }
    .p-culture__feature-photo{
        width:50vw;
    }
    .p-culture__feature-ttl{
        font-size:2.083vw;
    }
    .p-culture__feature-desc{
        font-size:1.111vw;
    }
    /* ===== More stories ===== */
    .p-culture__more-label{
        max-width: 86.111vw;
        font-size:1.111vw;
    }
    .p-culture__more-btn {
        max-width: 86.25vw;
        padding: 3.472vw 0 6.944vw;
    }
}
@media(min-width:896px) and (max-width:1400px) {
    .p-culture__hero-band {
        padding-left: 40px;
        padding-right: 40px;
    }
    .p-culture__lead-ttl {
        padding-left: 40px;
        padding-right: 40px;
    }
    .p-culture__more-label {
        padding-left: 40px;
        padding-right: 40px;
    }
    .p-culture__more-btn {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(min-width:896px) and (max-width:1080px) {
    .p-culture__hero {
        flex-direction:column;
    }
    .p-culture__hero-photo{
        width:100%;
    }
    .p-culture__hero-band{
        width:100%;
        padding:50px 40px;
    }
    .p-culture__feature{
        flex-direction:column;
        align-items:stretch;
    }
    .p-culture__feature-photo {
        width: 100%;
    }
    .p-culture__feature-body {
        padding-left: 40px;
        padding-right: 40px;
        gap: 30px;
    }
}
@media(max-width:896px){ 
    .p-culture__hero{
        flex-direction:column;
    }
    .p-culture__hero-photo{
        width:100%;
        aspect-ratio: 67 / 50;
    }
    .p-culture__hero-band{
        width:100%;
        gap:20px;
        padding:30px 20px;
    }
    .p-culture__hero-meta{
        gap:10px;
    }
    .p-culture__hero-meta-en{
        font-size:0.875rem;
    }
    .p-culture__hero-meta-tag{
        font-size:0.75rem;
    }
    .p-culture__hero-ttl{
        font-size:1.5rem;
    }
    .p-culture__hero-person{
        font-size:0.75rem;
    }
    .p-culture__lead{
        padding:50px 0 0;
    }
    .p-culture__lead:before{
        left:40px;
    }
    .p-culture__lead-ttl{
        font-size:1.875rem;
        line-height:1.533;
        padding: 0 20px;
        padding-bottom: 22px;
    }
    .p-culture__lead-body{
        font-size:0.875rem;
        line-height:1.857;
        padding: 28px 0 50px;
        padding-left: 60px;
    }
    .p-culture__lead-body:before {
        left: 40px;
    }
    .p-culture__qa-q{
        gap:15px;
        padding:20px 15px;
    }
    .p-culture__qa-q-text{
        font-size:0.875rem;
    }
    .p-culture__qa-a{
        padding:20px;
    }
    .p-culture__qa-a-text{
        font-size:0.875rem;
        line-height:1.714;
    }
    .p-culture__feature{
        flex-direction:column;
        align-items:stretch;
        gap:30px;
        padding:0 0 50px;
    }
    .p-culture__feature-photo{
        width:100%;
        aspect-ratio: 201 / 110;
    }
    .p-culture__feature-body{
        gap:30px;
        padding:0 20px;
    }
    .p-culture__feature-ttl{
        font-size:1.875rem;
    }
    .p-culture__feature-desc{
        font-size:0.875rem;
        line-height:1.857;
    }
    .p-culture__more-label{
        font-size:0.875rem;
        padding:0 20px;
        margin-bottom: 20px;
    }
    .p-culture__more-btn {
        padding: 50px 20px;
    }
}