@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap'); :root {
    --blue: #0865bd;
    --deep: #063b78;
    --sky: #eaf7ff;
    --pale: #f5fbff;
    --yellow: #ffd829;
    --text: #143a61;
    --line: #cfe6f6
}

/* Interview: daily schedule timeline */
.interview-page .daily-flow>.lower-section-title {
    display: flex;
    align-items: baseline;
    gap: 34px;
    margin-bottom: 44px;
    text-align: left;
}

.interview-page .daily-flow>.lower-section-title p {
    flex: 0 0 auto;
    margin: 0;
    font-size: 40px;
    letter-spacing: 0;
}

.interview-page .daily-flow>.lower-section-title h2 {
    margin: 0;
    font-size: 20px;
}

.interview-page .daily-flow .process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0;
}

.interview-page .daily-flow .process-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 111px;
    left: 8.333%;
    right: 8.333%;
    height: 5px;
    border-top: 2px solid #8db9e3;
    border-bottom: 2px solid #8db9e3;
}

.interview-page .daily-flow .process-grid article {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.interview-page .daily-flow .process-grid article::after {
    display: none;
}

.interview-page .daily-flow .process-grid b {
    display: block;
    margin-bottom: 15px;
    font-size: clamp(22px, 2vw, 30px);
}

.schedule-icon {
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin: 0 auto 22px;
    border: 3px solid #1762bd;
    border-radius: 50%;
    background: #fff;
}

.schedule-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: invert(30%) sepia(88%) saturate(1288%) hue-rotate(181deg) brightness(84%) contrast(96%);
}

.interview-page .daily-flow .process-grid p {
    max-width: 150px;
    margin: 0 auto;
    color: #244d7b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
}

@media (max-width: 760px) {
    .interview-page .daily-flow>.lower-section-title {
        gap: 20px;
    }

    .interview-page .daily-flow .process-grid {
        grid-template-columns: repeat(6, 160px) !important;
        padding-bottom: 18px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .interview-page .daily-flow .process-grid::before {
        left: 80px;
        right: 80px;
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: auto
}

body {
    margin: 0;
    color: var(--text);
    background: #fff;
    font-family: "Noto Sans JP",sans-serif;
    line-height: 1.85
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

/* Keep WordPress admin-bar avatars isolated from theme and core image rules. */
#wpadminbar img.avatar {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover
}

#wpadminbar #wp-admin-bar-user-info img.avatar {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important
}

.header {
    height: 76px;
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 3.4vw;
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 16px rgba(20,70,110,.07)
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px
}

.brand img {
    width: 116px
}

.brand span {
    font: 700 9px Montserrat,sans-serif;
    letter-spacing: .2em;
    color: #6a8ca8
}

.header nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1.7vw
}

.header nav a {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

.header nav .entry {
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0 20px;
    border-radius: 25px;
    background: var(--yellow);
    color: #22425f
}

.header-entry-mobile,
.menu {
    display: none
}

.hero {
    position: relative;
    min-height: 760px;
    height: 100vh;
    overflow: hidden;
    padding: 150px 7vw 80px;
    background: radial-gradient(circle at 75% 38%,#fff 0 13%,transparent 40%),linear-gradient(135deg,#effaff 0%,#fff 52%,#e9f7ff 100%)
}

.hero:before,.hero:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid #c6e9fc
}

.hero:before {
    width: 380px;
    height: 380px;
    left: -180px;
    top: 140px
}

.hero:after {
    width: 680px;
    height: 680px;
    right: -260px;
    bottom: -330px
}

.hero-copy {
    position: relative;
    z-index: 3;
    width: 47%
}

.kicker,.label {
    font: 700 11px Montserrat,sans-serif;
    letter-spacing: .2em;
    color: var(--blue)
}

.hero h1 {
    font-size: clamp(42px,4.8vw,72px);
    line-height: 1.45;
    letter-spacing: .05em;
    margin: 22px 0
}

.hero h1 span {
    color: var(--blue)
}

.hero-copy>p:last-of-type {
    font-size: 14px
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.pill {
    min-width: 215px;
    height: 52px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 28px;
    background: var(--yellow);
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 8px 18px rgba(15,71,120,.1)
}

.pill.pale {
    background: #fff;
    border: 1px solid #8bc4ea
}

.pill b {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--blue)
}

.hero-world {
    position: absolute;
    z-index: 1;
    inset: 90px 0 0 42%
}

.hero-world img {
    position: absolute;
    object-fit: contain
}

.hero-world .factory {
    width: 76%;
    right: 3%;
    top: 0
}

.hero-world .workers {
    width: 56%;
    right: 23%;
    bottom: 1%
}

.hero-world .team {
    width: 20%;
    left: -4%;
    bottom: 3%
}

.scroll {
    position: absolute;
    right: 28px;
    bottom: 24px;
    font: 700 8px Montserrat;
    letter-spacing: .25em;
    writing-mode: vertical-rl
}

.section {
    max-width: 1280px;
    margin: auto;
    padding: 120px 6vw
}

.message {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: center;
    gap: 8vw
}

.section-copy h2,.side-title h2,.section-head h2,.movie h2,.flow h2,.faq h2 {
    font-size: clamp(31px,3.3vw,48px);
    line-height: 1.55;
    margin: 16px 0 28px
}

.section-copy>p:last-child,.side-title>p {
    font-size: 13px;
    color: #55738d
}

.photo-collage {
    display: grid;
    grid-template-columns: 1.25fr .8fr;
    gap: 14px
}

.photo {
    background: linear-gradient(145deg,#dff2ff,#fff);
    border-radius: 30px 8px 30px 8px;
    overflow: hidden;
    min-height: 205px
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.main-photo {
    grid-row: span 2;
    min-height: 470px
}

.about {
    padding: 100px 0;
    background: linear-gradient(180deg,#eef9ff,#fff);
    overflow: hidden
}

.about-hero {
    max-width: 1280px;
    margin: auto;
    padding: 0 6vw 70px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center
}

.big-en {
    font: 800 clamp(54px,7vw,100px)/1 Montserrat;
    color: var(--blue);
    letter-spacing: .06em;
    margin: 0
}

.about-hero h2 {
    font-size: 30px;
    line-height: 1.7
}

.about-hero img {
    width: 100%;
    max-height: 520px;
    object-fit: contain
}

.about-grid {
    max-width: 1120px;
    margin: auto;
    display: grid;
    gap: 22px
}

.about-grid article {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    padding: 28px 36px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(31,104,158,.08)
}

.about-grid article>b {
    font: 800 30px Montserrat;
    color: var(--blue)
}

.about-grid small {
    font: 700 8px Montserrat;
    color: #74a5c9
}

.about-grid h3 {
    font-size: 23px;
    margin: 2px 0
}

.about-grid p {
    margin: 0 0 5px;
    font-size: 13px
}

.about-grid a {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700
}

.work {
    display: grid;
    grid-template-columns: .54fr 1.46fr;
    gap: 7vw;
    max-width: 1380px
}

.side-title h3 {
    font-size: 27px;
    line-height: 1.7
}

.jobs {
    padding: 30px;
    border-radius: 26px;
    background: #f1faff
}

.job-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}

.job-tabs b {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    background: #fff;
    color: var(--blue)
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px
}

.job-grid a {
    min-height: 110px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px
}

.job-grid span {
    font: 700 10px Montserrat;
    color: #73abd0
}

.job-grid strong {
    font-size: 13px;
    margin: auto 0
}

.job-grid i {
    font-style: normal;
    color: var(--blue);
    align-self: flex-end
}

.people {
    padding: 120px max(6vw,calc((100vw - 1280px)/2));
    background: linear-gradient(180deg,#f1faff,#fff)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px
}

.section-head h2 {
    margin-bottom: 0
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-top: 60px
}

.people-grid article>div {
    height: 315px;
    background: #fff;
    border-radius: 120px 120px 10px 10px;
    overflow: hidden
}

.people-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.people-grid small {
    display: block;
    color: var(--blue);
    font-weight: 700;
    margin-top: 16px
}

.people-grid h3 {
    font-size: 16px;
    min-height: 52px
}

.people-grid a {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font: 700 10px Montserrat
}

.crosstalk {
    margin-top: 110px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    background: #eaf8ff;
    border-radius: 40px;
    overflow: hidden
}

.crosstalk img {
    width: 100%;
    height: 410px;
    object-fit: contain
}

.crosstalk>div {
    padding: 40px
}

.crosstalk h2 {
    font-size: 31px
}

.crosstalk p:not(.label) {
    font-size: 13px
}

.environment {
    max-width: 1380px
}

.env-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-top: 55px
}

.env-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff
}

.env-grid span {
    font: 700 12px Montserrat;
    color: var(--blue)
}

.env-grid h3 {
    font-size: 19px
}

.env-grid p {
    font-size: 12px;
    color: #5c7790
}

.numbers {
    position: relative;
    margin-top: 45px;
    min-height: 300px;
    padding: 60px 50% 40px 4vw;
    border-radius: 28px;
    background: #eaf8ff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.numbers>div {
    background: #fff;
    border-radius: 18px;
    padding: 25px
}

.numbers small {
    font-weight: 700
}

.numbers strong {
    display: block;
    color: var(--blue);
    font: 800 45px Montserrat
}

.numbers em {
    font: 700 13px "Noto Sans JP"
}

.numbers img {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: 52%;
    max-height: 310px;
    object-fit: contain
}

.movie {
    display: grid;
    grid-template-columns: .62fr 1.38fr;
    gap: 7vw;
    align-items: center;
    background: linear-gradient(180deg,#fff,#f3faff)
}

.movie-main {
    position: relative;
    height: 440px;
    border-radius: 25px;
    overflow: hidden;
    background: #d9efff
}

.movie-main img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.movie-main button {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 74px;
    height: 74px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: 25px
}

.movie-main strong {
    position: absolute;
    left: 25px;
    bottom: 20px;
    font-size: 20px
}

.flow {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 7vw;
    align-items: center
}

.flow-photo {
    height: 630px;
    border-radius: 20px 120px 20px 120px;
    background: #e9f7ff;
    overflow: hidden
}

.flow-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.flow-copy ol {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.flow-copy li {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 15px
}

.flow-copy li b {
    font: 800 12px Montserrat;
    color: var(--blue)
}

.flow-copy li span {
    font-weight: 700;
    font-size: 13px
}

.faq {
    text-align: left
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 22px;
    margin-top: 35px
}

.faq-grid button {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    padding: 18px;
    text-align: left;
    display: grid;
    grid-template-columns: 30px 1fr 20px;
    gap: 6px;
    align-items: center;
    font: 700 12px "Noto Sans JP"
}

.faq-grid button span {
    color: var(--blue)
}

.faq-grid button b {
    font-size: 18px;
    color: var(--blue)
}

.faq-grid small {
    grid-column: 2/4;
    font-weight: 400;
    color: #69839a
}

.entry-cta {
    max-width: 1280px;
    margin: 40px auto 100px;
    min-height: 260px;
    padding: 55px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: linear-gradient(135deg,#e9f7ff,#f8fbff)
}

.entry-cta>div {
    position: relative;
    z-index: 2
}

.entry-cta p {
    font-size: 27px;
    line-height: 1.6;
    font-weight: 900;
    margin: 0
}

.entry-cta>img {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 39%;
    max-height: 300px;
    object-fit: contain
}

.mega {
    padding: 60px 5vw;
    display: grid;
    grid-template-columns: 1.6fr repeat(6,1fr);
    gap: 25px;
    background: #edf8ff
}

.footer-brand img {
    width: 130px
}

.footer-brand b {
    display: block;
    font-size: 13px;
    margin-top: 10px
}

.mega>div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mega strong {
    font-size: 12px;
    color: var(--blue)
}

.mega a {
    font-size: 10px
}

.legal {
    padding: 24px 5vw;
    background: var(--deep);
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 9px
}

.legal a {
    font-weight: 700
}

.legal nav {
    display: flex;
    align-items: center;
    gap: 14px
}

.legal a:hover,
.legal a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px
}

.menu i {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--deep)
}

@media(max-width: 900px) {
    .header {
        height:66px
    }

    .brand img {
        width: 100px
    }

    .brand span {
        display: none
    }

    .header-entry-mobile {
        display: grid;
        place-items: center;
        height: 36px;
        margin-left: auto;
        padding: 0 12px;
        border-radius: 999px;
        background: var(--yellow);
        color: #22425f;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap
    }

    .menu {
        display: grid;
        gap: 5px;
        margin-left: 12px;
        border: 0;
        background: none
    }

    .header nav {
        position: fixed;
        inset: 68px 0 auto;
        background: #fff;
        padding: 22px;
        display: none;
        height: auto;
        flex-direction: column;
        align-items: stretch
    }

    .header nav.open {
        display: flex
    }

    .header nav .entry {
        display: none
    }

    .hero {
        height: auto;
        min-height: 780px;
        padding: 110px 24px 30px
    }

    .hero-copy {
        width: 100%
    }

    .hero-copy>p:last-of-type {
        font-size: 12px
    }

    .hero-world {
        inset: 390px 0 0 8%
    }

    .hero-world .factory {
        width: 85%
    }

    .hero-world .workers {
        width: 72%;
        right: 10%
    }

    .hero-world .team {
        display: none
    }

    .section {
        padding: 80px 24px
    }

    .message,.work,.movie,.flow {
        grid-template-columns: 1fr
    }

    .photo-collage {
        margin-top: 30px
    }

    .main-photo {
        min-height: 330px
    }

    .about {
        padding: 80px 0
    }

    .about-hero {
        grid-template-columns: 1fr;
        padding: 0 24px 50px
    }

    .about-grid {
        padding: 0 24px
    }

    .job-grid {
        grid-template-columns: 1fr 1fr
    }

    .section-head {
        align-items: start;
        flex-direction: column
    }

    .people {
        padding: 80px 24px
    }

    .people-grid {
        grid-template-columns: 1fr 1fr
    }

    .people-grid article>div {
        height: 250px
    }

    .crosstalk {
        grid-template-columns: 1fr
    }

    .crosstalk img {
        height: 300px
    }

    .env-grid {
        grid-template-columns: 1fr 1fr
    }

    .numbers {
        padding: 35px;
        min-height: 470px
    }

    .numbers img {
        width: 90%;
        right: 5%;
        opacity: .45
    }

    .numbers>div {
        position: relative;
        z-index: 2
    }

    .movie-main {
        height: 300px
    }

    .flow-photo {
        height: 420px
    }

    .faq-grid {
        grid-template-columns: 1fr
    }

    .entry-cta {
        margin: 20px 20px 70px;
        padding: 40px 28px;
        display: block
    }

    .entry-cta img {
        opacity: .28;
        width: 70%
    }

    .mega {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/3
    }

    .legal {
        gap: 16px;
        flex-wrap: wrap
    }
}

/* Recruitment: company session and factory tour */
.recruit-session-section > .lower-section-title {
    margin-bottom: clamp(36px, 4vw, 64px);
    text-align: center;
}

.recruit-session-section .session-panel {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    gap: clamp(30px, 4vw, 72px);
    align-items: stretch;
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfe6f5;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(24, 93, 145, .05);
}

.recruit-session-section .session-panel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 6vw, 48px) 0 clamp(36px, 6vw, 48px) clamp(56px, 6vw, 80px);
}

.recruit-session-section .session-panel-copy h3 {
    margin: 0 0 clamp(30px, 3vw, 46px);
    color: var(--deep);
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.75;
    letter-spacing: .04em;
}

.recruit-session-section .session-panel-copy .pill {
    width: min(100%, 390px);
}

.recruit-session-section .session-panel-illustration {
    width: 100%;
    height: 100%;
    min-height: 500px;
    box-sizing: border-box;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 900px) {
    .recruit-session-section .session-panel {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .recruit-session-section .session-panel-copy {
        align-items: center;
        padding: 48px 32px 12px;
        text-align: center;
    }

    .recruit-session-section .session-panel-illustration {
        min-height: 320px;
        padding: 20px 28px 36px;
    }
}

@media (max-width: 520px) {
    .recruit-session-section > .lower-section-title * {
        text-align: center;
    }

    .recruit-session-section .session-panel {
        border-radius: 24px;
    }

    .recruit-session-section .session-panel-copy {
        padding: 40px 24px 8px;
    }

    .recruit-session-section .session-panel-copy h3 {
        font-size: 22px;
    }

    .recruit-session-section .session-panel-illustration {
        min-height: 260px;
        padding: 16px 20px 28px;
    }
}

/* Department cards: TOP photography with an accessible hover/tap description */
.department-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px
}

.soft-panel .department-card-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.work-page .job-family>.lower-section-title,
.work-page .department-admin-section>.lower-section-title,
.work-page .department-manufacturing-section>.lower-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.work-page .job-family>.lower-section-title span,
.work-page .department-admin-section>.lower-section-title span,
.work-page .department-manufacturing-section>.lower-section-title span {
    margin-top: 12px;
    font-size: clamp(17px,1.6vw,23px);
    font-weight: 700;
    color: var(--deep)
}

.work-page .department-admin-section {
    padding: 88px clamp(28px,4vw,58px);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(6,59,120,.06)
}

.work-page .department-manufacturing-section .department-card-grid {
    width: 80%;
    margin-inline: auto;
    grid-template-columns: 1fr
}

.department-card {
    position: relative;
    min-height: 350px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px 58px 18px 18px;
    background: var(--deep);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: default;
    box-shadow: 0 12px 30px rgba(6,59,120,.1);
    transition: none
}

.department-card:nth-child(even) {
    border-radius: 58px 18px 18px 18px
}

.department-card>img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: none
}

.department-card-number {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--blue);
    font: 800 14px/1 var(--en)
}

.department-card-title {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 26px;
    background: linear-gradient(0deg,rgba(3,35,72,.94),rgba(3,35,72,.12));
    transition: none
}

.department-card-title h3 {
    margin: 0;
    font-size: 24px;
    color: #fff
}

.department-card-title i {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%
}

.department-card-title i:before,
.department-card-title i:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    margin: 15px 0 0 10px;
    background: #fff
}

.department-card-title i:after {
    transform: rotate(90deg)
}

.department-card-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px 30px;
    background: linear-gradient(145deg,rgba(6,59,120,.95),rgba(8,101,189,.88));
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: none
}

.department-card-overlay strong {
    font-size: 21px;
    line-height: 1.55
}

.department-card-overlay p {
    margin: 14px 0 18px;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,.9)
}

.department-card-overlay small {
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.7);
    font-weight: 700
}

.department-card:hover,
.department-card:focus-visible,
.department-card[aria-expanded="true"] {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(6,59,120,.2)
}

.department-card:hover>img,
.department-card:focus-visible>img,
.department-card[aria-expanded="true"]>img {
    transform: scale(1.05);
    filter: saturate(.8)
}

.department-card:hover .department-card-overlay,
.department-card:focus-visible .department-card-overlay,
.department-card[aria-expanded="true"] .department-card-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s
}

@media(max-width: 900px) {
    .soft-panel .department-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .work-page .department-admin-section {
        padding: 68px 28px
    }

    .work-page .department-manufacturing-section .department-card-grid {
        width: 90%
    }
}

@media(max-width: 620px) {
    .department-card-grid,
    .soft-panel .department-card-grid {
        grid-template-columns: 1fr
    }

    .department-card,
    .department-card>img {
        min-height: 0;
        height: clamp(210px,58vw,270px)
    }

    .department-card-overlay {
        padding: 28px 24px
    }

    .work-page .department-admin-section {
        padding: 58px 18px
    }

    .work-page .department-manufacturing-section .department-card-grid {
        width: 100%
    }
}

@media(max-width: 520px) {
    .hero h1 {
        font-size:36px
    }

    .pill {
        width: 100%
    }

    .photo-collage {
        grid-template-columns: 1fr
    }

    .main-photo {
        grid-row: auto
    }

    .about-grid article {
        grid-template-columns: 48px 1fr;
        padding: 22px
    }

    .people-grid,.env-grid,.flow-copy ol {
        grid-template-columns: 1fr
    }

    .people-grid article>div {
        height: 330px
    }

    .numbers {
        grid-template-columns: 1fr
    }

    .entry-cta .actions {
        display: grid
    }

    .legal {
        display: grid
    }

    .big-en {
        font-size: 52px
    }
}

/* Reference-design reconstruction */
:root {
    --blue: #086bc1;
    --deep: #06417d;
    --yellow: #ffda22;
    --text: #154a76;
    --line: #cfe8f7;
    --jp: "Zen Kaku Gothic New",sans-serif;
    --en: "Lato",sans-serif
}

body {
    font-family: var(--jp);
    font-weight: 500;
    background: #fff;
    color: var(--text)
}

.brand span,.kicker,.label,.big-en,.scroll,.job-grid span,.people-grid a,.numbers strong,.flow-copy li b {
    font-family: var(--en)!important
}

.header {
    height: 68px;
    padding: 0 2.7vw;
    border-bottom: 1px solid #edf6fb;
    box-shadow: none
}

.header nav {
    gap: 1.45vw
}

.header nav a {
    font-size: 11px
}

.header nav .entry {
    height: 38px;
    padding: 0 18px
}

main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: url("../images/backgrounds/top_background_dot_line_patterns_transparent_v01.png") center top/1440px auto repeat-y, linear-gradient(180deg,#f8fdff 0,#fff 9%,#f6fbff 25%,#fff 42%,#f4fbff 58%,#fff 78%,#f4fbff 100%)
}

main:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 620px 0 0;
    background: url("../images/backgrounds/top_background_soft_shapes_transparent_v01.png") center top/1440px auto repeat-y;
    opacity: .72;
    pointer-events: none
}

.hero {
    height: 720px;
    min-height: 720px;
    padding: 125px 6.2vw 70px;
    background: url("../images/hero/recruit-hero-background-v04-clean.png") center center/100% 100% no-repeat, #f7fcff
}

.hero-copy {
    position: relative;
    z-index: 3;
    width: 43%
}

.hero h1 {
    font-size: clamp(42px,4.35vw,64px);
    line-height: 1.42;
    letter-spacing: .045em;
    margin: 15px 0 20px
}

.hero-copy>p:last-of-type {
    font-size: 12px;
    line-height: 2
}

.hero-world {
    display: none
}

.hero-illustration {
    position: absolute;
    z-index: 2;
    right: 1.2vw;
    top: 50%;
    translate: 0 -48%;
    width: min(60vw,980px);
    height: calc(100% - 82px);
    object-fit: contain;
    object-position: center
}

.actions {
    margin-top: 24px
}

.pill {
    min-width: 188px;
    height: 44px;
    padding: 0 16px;
    font-size: 11px
}

.section {
    padding-top: 105px;
    padding-bottom: 105px
}

.message {
    position: relative;
    grid-template-columns: .68fr 1.32fr;
    gap: 7vw;
    min-height: 700px
}

.message:after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid #d7eefb;
    border-radius: 50%;
    left: -190px;
    bottom: -70px
}

.section-copy h2,.side-title h2,.section-head h2,.movie h2,.flow h2,.faq h2 {
    font-size: clamp(30px,3vw,43px);
    line-height: 1.65;
    letter-spacing: .035em
}

.section-copy>p:last-child,.side-title>p {
    line-height: 2.15
}

.message-title {
    display: grid;
    gap: .05em
}

.message-title span {
    display: block;
    white-space: nowrap
}

.photo-slot {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 150px;
    overflow: hidden;
    background: linear-gradient(135deg,rgba(228,241,249,.96),rgba(196,220,236,.92)), repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.2) 12px 13px);
    color: #7195ad;
    border: 1px solid rgba(113,159,191,.3)
}

.photo-slot:before,.photo-slot:after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,.55);
    height: 1px;
    width: 150%;
    rotate: 32deg
}

.photo-slot:after {
    rotate: -32deg
}

.photo-slot span,.photo-slot small {
    position: relative;
    z-index: 2
}

.photo-slot span {
    position: absolute;
    top: 16px;
    left: 18px;
    font: 900 9px var(--en);
    letter-spacing: .22em
}

.photo-slot small {
    text-align: center;
    font-size: 10px;
    line-height: 1.7;
    font-weight: 700
}

.photo-slot.photo-filled {
    display: block;
    background: #dcecf5
}

.photo-slot.photo-filled:before,.photo-slot.photo-filled:after {
    display: none
}

.photo-slot.photo-filled img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.photo-collage {
    gap: 10px
}

.photo-collage .photo-slot {
    border-radius: 28px 8px 28px 8px
}

.main-photo {
    min-height: 445px
}

.about {
    position: relative;
    padding: 120px 0 130px;
    background: transparent
}

.about:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3% -12% 5%;
    background: linear-gradient(120deg,rgba(230,246,255,.62),rgba(255,255,255,.8));
    border-radius: 45% 55% 48% 52%/12% 17% 11% 15%;
    rotate: -2deg
}

.about-hero {
    grid-template-columns: .72fr 1.28fr;
    padding-bottom: 75px
}

.about-photo {
    height: 390px;
    border-radius: 12px 84px 12px 84px
}

.big-en {
    font-size: clamp(58px,6.5vw,92px);
    color: #0871ca
}

.about-hero h2 {
    font-size: 28px
}

.about-grid {
    max-width: 1080px
}

.about-grid article {
    grid-template-columns: 65px 1fr 42%;
    min-height: 190px;
    padding: 18px 18px 18px 30px;
    border-radius: 12px 48px 12px 48px;
    box-shadow: 0 12px 32px rgba(28,97,146,.06)
}

.about-grid article:nth-child(even) {
    grid-template-columns: 65px 1fr 42%;
    margin-left: 8%;
    margin-right: -8%
}

.about-grid article>.photo-slot {
    height: 154px;
    border: 0;
    border-radius: 8px 36px 8px 36px
}

.about-grid h3 {
    font-size: 20px
}

.work {
    max-width: 1320px;
    grid-template-columns: .48fr 1.52fr;
    gap: 5vw;
    padding-top: 125px;
    padding-bottom: 130px
}

.jobs {
    padding: 20px;
    background: rgba(234,248,255,.75);
    border: 1px solid rgba(186,225,247,.65);
    border-radius: 22px
}

.job-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.job-grid a {
    position: relative;
    min-height: 150px;
    padding: 0 10px 10px;
    border: 1px solid #e2f0f8;
    box-shadow: 0 5px 13px rgba(33,106,156,.04)
}

.job-grid .photo-slot {
    height: 74px;
    min-height: 74px;
    margin: 0 -10px 8px;
    border: 0;
    border-radius: 10px 10px 0 0
}

.job-grid .photo-slot span {
    top: 7px;
    left: 8px
}

.job-grid .photo-slot small {
    font-size: 7px
}

.job-grid strong {
    font-size: 11px
}

.job-tabs b {
    font-size: 12px
}

.people {
    position: relative;
    padding-top: 120px;
    padding-bottom: 125px;
    background: transparent
}

.people:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -12%;
    background: rgba(235,248,255,.7);
    border-radius: 45% 55% 42% 58%/7% 9% 8% 10%
}

.people-grid {
    gap: 14px;
    margin-top: 48px
}

.people-grid article>.photo-slot {
    height: 292px;
    border: 0;
    border-radius: 100px 100px 8px 8px
}

.people-grid small {
    font-size: 11px
}

.people-grid h3 {
    font-size: 14px
}

.crosstalk {
    margin-top: 90px;
    border-radius: 42px 12px 42px 12px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(34,104,153,.07)
}

.crosstalk>.photo-slot {
    height: 390px;
    border: 0;
    border-radius: 42px 0 0 12px
}

.crosstalk h2 {
    font-size: 28px
}

.environment {
    padding-top: 120px
}

.env-grid article {
    border-color: #d5ebf7;
    box-shadow: 0 8px 22px rgba(33,105,153,.04)
}

.numbers {
    overflow: hidden;
    background: rgba(231,247,255,.82)
}

.numbers:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/backgrounds/top_background_small_accents_transparent_v01.png") center/cover;
    opacity: .5
}

.movie {
    position: relative;
    max-width: none;
    padding-left: max(6vw,calc((100vw - 1280px)/2));
    padding-right: max(6vw,calc((100vw - 1280px)/2));
    background: transparent
}

.movie:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% -8%;
    background: rgba(239,249,255,.7);
    border-radius: 50% 50% 45% 55%/15% 13% 17% 14%
}

.movie-main {
    height: 405px;
    background: none
}

.movie-main>.photo-slot {
    height: 100%;
    border: 0;
    border-radius: 25px
}

.movie-main strong {
    color: #fff;
    text-shadow: 0 2px 10px rgba(3,47,85,.45)
}

.flow {
    padding-top: 120px;
    padding-bottom: 130px
}

.flow-photo {
    height: 575px;
    border-radius: 12px 100px 12px 100px
}

.flow-copy li {
    box-shadow: 0 7px 20px rgba(30,99,147,.04)
}

.faq {
    padding-top: 90px
}

.faq-grid button {
    font-family: var(--jp);
    background: rgba(255,255,255,.88);
    box-shadow: 0 5px 16px rgba(33,98,144,.035)
}

.entry-cta {
    margin-top: 20px;
    border: 1px solid #d3eaf8;
    background: url("../images/backgrounds/top_background_small_accents_transparent_v01.png") center/cover, linear-gradient(130deg,#eef9ff,#fff);
    box-shadow: 0 14px 40px rgba(34,104,153,.06)
}

.mega {
    background: url("../images/backgrounds/top_background_footer_industrial_town_transparent_v01.png") center bottom/100% auto no-repeat, #eff9ff;
    padding-bottom: 95px
}

.legal {
    font-family: var(--en)
}

@media(max-width: 1180px) and (min-width:901px) {
    .message {
        grid-template-columns:1fr 1.05fr;
        gap: 4vw
    }

    .message-title {
        font-size: clamp(29px,3.15vw,37px)
    }

    .hero-illustration {
        right: -2vw;
        width: 59vw;
        height: calc(100% - 110px)
    }
}

@media(max-width: 900px) {
    main {
        background-size:900px auto
    }

    .hero {
        min-height: 800px;
        height: auto;
        background-position: center;
        background-size: cover
    }

    .hero:after {
        content:none;
    }

    .hero-copy,.scroll {
        z-index: 3
    }

    .hero-illustration {
        z-index: 2;
        right: -19%;
        top: 63%;
        width: 92%;
        height: 54%;
        opacity: .82
    }

    .about-grid article,.about-grid article:nth-child(even) {
        grid-template-columns: 52px 1fr;
        margin-left: 0;
        margin-right: 0
    }

    .about-grid article>.photo-slot {
        grid-column: 1/3;
        width: 100%
    }

    .job-grid {
        grid-template-columns: 1fr 1fr
    }

    .department-image{
        height: 200px;
    }

    .crosstalk>.photo-slot {
        height: 300px;
        border-radius: 42px 12px 0 0
    }

    .movie-main {
        height: 300px
    }

    .flow-photo {
        height: 420px
    }

    .mega {
        background-size: auto 150px
    }
}

@media(max-width: 520px) {
    .about-photo {
        height:250px
    }

    .about-grid article,.about-grid article:nth-child(even) {
        grid-template-columns: 42px 1fr
    }

    .people-grid article>.photo-slot {
        height: 320px
    }

    .photo-slot small {
        font-size: 9px
    }

    .message-title {
        font-size: clamp(25px,7.4vw,34px);
        letter-spacing: 0
    }

    .message-title span {
        white-space: normal
    }

    .hero-illustration {
        right: -35%;
        width: 120%
    }
}

/* Typography scale: 16px body copy */
body {
    font-size: 16px;
    line-height: 2
}

.hero-copy>p:last-of-type, .section-copy>p:last-child, .side-title>p, .about-grid p, .crosstalk p:not(.label), .env-grid p, .movie>div>p:not(.label), .entry-cta>div>span {
    font-size: 16px;
    line-height: 2
}

.hero-copy>p:last-of-type {
    max-width: 31em
}

.header nav a {
    font-size: 13px
}

.header nav .entry {
    font-size: 12px
}

.kicker,.label {
    font-size: 12px
}

.pill {
    font-size: 14px
}

.about-hero>div>span {
    font-size: 16px;
    font-weight: 700
}

.about-grid h3 {
    font-size: 22px
}

.about-grid a {
    font-size: 14px
}

.about-grid small {
    font-size: 10px
}

.side-title h3 {
    font-size: 30px
}

.job-tabs b {
    font-size: 14px
}

.job-grid strong {
    font-size: 14px
}

.people-grid small {
    font-size: 13px
}

.people-grid h3 {
    font-size: 17px;
    line-height: 1.75
}

.people-grid a {
    font-size: 12px
}

.crosstalk h2 {
    font-size: 32px;
    line-height: 1.6
}

.env-grid h3 {
    font-size: 21px
}

.numbers small {
    font-size: 14px
}

.numbers em {
    font-family: var(--jp);
    font-size: 14px
}

.movie-main strong {
    font-size: 22px
}

.flow-copy li span {
    font-size: 15px
}

.faq-grid button {
    font-family: var(--jp);
    font-size: 15px;
    line-height: 1.7
}

.faq-grid small {
    font-size: 14px;
    line-height: 1.8
}

.mega strong {
    font-size: 14px
}

.mega a {
    font-size: 13px
}

.legal {
    font-size: 11px
}

.photo-slot small {
    font-size: 12px
}

.job-grid .photo-slot small {
    font-size: 9px
}

@media(max-width: 900px) {
    body {
        font-size:16px
    }

    .header nav a {
        font-size: 15px;
        padding: 10px;
    }

    .hero-copy>p:last-of-type {
        font-size: 16px
    }

    .section-copy h2,.side-title h2,.section-head h2,.movie h2,.flow h2,.faq h2 {
        line-height: 1.55
    }
}

/* Center the FV copy and illustration as one responsive composition */
.hero {
    padding: 0
}

.hero-inner {
    position: relative;
    width: min(100% - 48px,1440px);
    height: 100%;
    margin: 0 auto;
    padding: 125px 0 70px
}

.hero-inner .hero-copy {
    width: 43%
}

.hero-inner .hero-illustration {
    right: 0
}

.department-image {
    display: block;
    width: calc(100% + 20px);
    height: 84px;
    margin: 0 -10px 9px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px 10px 0 0
}

@media(max-width: 1180px) and (min-width:901px) {
    .hero-inner {
        width:min(100% - 40px,1120px)
    }

    .hero-inner .hero-copy {
        width: 45%
    }

    .hero-inner .hero-illustration {
        right: -1%;
        width: 58%;
        height: calc(100% - 105px)
    }
}

@media(max-width: 900px) {
    .hero-inner {
        width:100%;
        padding: 110px 24px 30px
    }

    .hero-inner .hero-copy {
        width: 100%
    }

    .hero-inner .hero-illustration {
        right: -19%
    }
}

@media(max-width: 520px) {
    .hero-inner .hero-illustration {
        right:-35%
    }

    .department-image {
        height: auto;
        aspect-ratio: 16/9
    }
}

/* Unified content width: matches the PEOPLE section */
.section {
    width: min(88%,1280px);
    max-width: none;
    margin-inline:auto;padding-left: 0;
    padding-right: 0
}

.people {
    padding-left: max(6vw,calc((100vw - 1280px)/2));
    padding-right: max(6vw,calc((100vw - 1280px)/2))
}

.about-hero,.about-grid {
    width: min(88%,1280px);
    max-width: none;
    margin-inline:auto;padding-left: 0;
    padding-right: 0
}

.about-grid article:nth-child(even) {
    margin-left: 0;
    margin-right: 0
}

.work,.environment {
    max-width: none
}

.movie {
    width: min(88%,1280px);
    max-width: none;
    padding-left: 0;
    padding-right: 0
}

.entry-cta {
    width: min(88%,1280px);
    max-width: none
}

@media(max-width: 900px) {
    .section,.about-hero,.about-grid,.movie,.entry-cta {
        width:calc(100% - 48px)
    }

    .people {
        padding-left: 24px;
        padding-right: 24px
    }

    .about-grid {
        padding-left: 0;
        padding-right: 0
    }

    .entry-cta {
        margin-left: auto;
        margin-right: auto
    }
}

/* WORK category filtering */
.job-tabs button {
    flex: 1;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #fff;
    color: var(--blue);
    font-family: var(--jp);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: none
}

.job-tabs button:hover {
    border-color: #8fc9ec
}

.job-tabs button.is-active,.job-tabs button[aria-selected="true"] {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue)
}

.job-tabs button:focus-visible {
    outline: 3px solid rgba(255,218,34,.85);
    outline-offset: 3px
}

.job-grid {
    align-items: start
}

/* Quieter background system */
main {
    background: linear-gradient(180deg,#fbfdff 0%,#fff 18%,#f7fbfe 38%,#fff 57%,#f7fbfe 77%,#fff 100%)
}

main:before {
    display: none
}

.message:after {
    display: none
}

.about {
    isolation: isolate
}

.about:before {
    inset: 0 0 5%;
    background: linear-gradient(180deg,rgba(239,249,255,.58),rgba(255,255,255,.2));
    border-radius: 0;
    rotate: 0
}

.about:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -150px;
    left: -10%;
    width: 120%;
    height: 300px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none
}

.people:before {
    inset: 0;
    background: rgba(239,249,255,.6);
    border-radius: 0
}

.numbers:before {
    display: none
}

.movie:before {
    inset: 10% 0;
    background: rgba(244,250,254,.82);
    border-radius: 28px
}

.entry-cta {
    background: linear-gradient(130deg,#eef8fe,#fff)
}

.mega {
    background: #eff8fd;
    padding-bottom: 72px
}

/* WORK layout corrections */
.work {
    grid-template-columns: minmax(350px,390px) minmax(0,1fr);
    gap: clamp(44px,5vw,72px)
}

.work-lead {
    display: grid;
    gap: .05em
}

.work-lead span {
    display: block;
    white-space: nowrap
}

.side-title>p:not(.label) {
    max-width: 370px;
    word-break: normal;
    line-break: strict
}

.jobs {
    min-width: 0
}

.job-tabs {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px
}

.job-tabs button {
    width: 100%;
    min-width: 0
}

.job-grid a {
    padding: 0;
    overflow: hidden
}

.department-image {
    width: 100%;
    height: auto;
    aspect-ratio: 5/4;
    margin: 0;
    object-fit: cover;
    border-radius: 10px 10px 0 0
}

.job-grid a>span,.job-grid a>strong {
    margin-left: 14px;
    margin-right: 14px
}

.job-grid a>span {
    margin-top: 8px
}

.job-grid a>strong {
    white-space: nowrap
}

.job-grid a>i {
    margin-right: 14px;
    margin-bottom: 10px
}

@media(max-width: 520px) {
    .job-grid .department-image {
        height: auto;
        aspect-ratio: 16/9
    }
}

@media(max-width: 1100px) and (min-width:901px) {
    .work {
        grid-template-columns:330px minmax(0,1fr);
        gap: 36px
    }

    .work-lead {
        font-size: 27px
    }

    .job-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width: 900px) {
    .work {
        grid-template-columns:1fr
    }

    .work-lead span {
        white-space: normal
    }

    .side-title>p:not(.label) {
        max-width: 42em
    }

    .job-tabs {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 520px) {
    .job-grid {
        grid-template-columns:1fr
    }

    .job-tabs {
        gap: 8px
    }

    .job-tabs button {
        font-size: 13px;
        padding-inline:8px}
}

/* PHP theme interaction states */
.job-grid [hidden] {
    display: none!important
}

.faq-grid button {
    overflow: hidden;
    transition: none
}

.faq-grid button:hover,
.faq-grid button[aria-expanded="true"] {
    border-color: #8bc9ef;
    box-shadow: 0 10px 28px rgba(6,59,120,.08)
}

.faq-grid button b {
    position: relative;
    width: 20px;
    height: 20px;
    justify-self: end;
    transition: none
}

.faq-grid button b::before,
.faq-grid button b::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%,-50%);
    transition: none
}

.faq-grid button b::after {
    transform: translate(-50%,-50%) rotate(90deg)
}

.faq-grid button[aria-expanded="true"] b {
    transform: rotate(180deg)
}

.faq-grid button[aria-expanded="true"] b::after {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(90deg) scaleX(0)
}

.faq-grid button small {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: none
}

.faq-grid button[aria-expanded="true"] small {
    max-height: 160px;
    margin-top: 10px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s
}

/* Lower pages */
.lower-main {
    overflow: hidden;
    background: linear-gradient(180deg,#fbfdff,#f4f9fd 48%,#fff);
    color: var(--text)
}

.lower-main * {
    box-sizing: border-box
}

.lower-section {
    width: min(88%,1280px);
    margin: 0 auto;
    padding: 100px 0
}

.lower-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(32px,5vw,88px);
    align-items: center;
    min-height: 680px;
    padding: 110px max(6vw,calc((100vw - 1280px)/2)) 80px;
    background: linear-gradient(135deg,#fbfdff,#edf8fe);
    overflow: hidden
}

.lower-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 8% 85%,#e2f3fd 0 5%,transparent 5.2%),radial-gradient(circle at 95% 15%,#edf7fd 0 8%,transparent 8.2%);
    opacity: .7
}

.lower-hero-copy,.lower-hero>img {
    position: relative;
    z-index: 1;
    min-width: 0
}

.lower-hero>img {
    justify-self: center;
    width: min(100%,720px);
    height: 500px;
    object-fit: contain
}

.breadcrumb {
    font-size: 12px!important;
    color: #66839c;
    margin-bottom: 42px
}

.lower-en {
    font: 900 clamp(48px,5.2vw,78px)/1 var(--en);
    letter-spacing: .065em;
    color: #075fc5;
    margin: 0 0 16px;
    white-space: nowrap
}

.lower-en-long {
    font-size: clamp(38px,4.35vw,66px);
    letter-spacing: .035em
}

.lower-jp {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #075fc5
}

.lower-hero h1 {
    font-size: clamp(29px,2.85vw,43px);
    line-height: 1.55;
    letter-spacing: .06em;
    margin: 34px 0 18px;
    word-break: keep-all
}

.lower-hero h1 span {
    display: block;
    white-space: nowrap
}

.lower-hero-copy>p:last-child {
    max-width: 38em;
    font-size: 16px;
    line-height: 2;
    word-break: normal;
    line-break: strict;
    text-wrap: pretty
}

.news-page .lower-hero>img {
    transform: scale(.92)
}

.environment-page .lower-hero>img {
    transform: scale(1.1)
}

.environment-page .environment-page-intro {
    grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
    gap: clamp(48px,6vw,94px);
    align-items: center
}

.environment-page-intro>.photo-stack {
    gap: 14px
}

.environment-page-intro>.photo-stack>.photo-slot:first-child {
    height: 360px;
    min-height: 0;
    border-radius: 20px 20px 8px 8px
}

.environment-page-intro>.photo-stack>.photo-slot:not(:first-child) {
    height: 218px;
    min-height: 0;
    border-radius: 8px 8px 20px 20px
}

.environment-page-intro>.photo-stack img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.environment-page-intro-copy .lower-section-title,
.environment-page-intro-copy .lower-section-title h2,
.environment-page-intro-copy .lower-section-title span {
    text-align: left
}

.environment-page-intro-copy .lower-section-title {
    margin-bottom: 30px
}

.environment-page-intro-copy .lower-section-title h2,
.environment-page-intro-copy .lower-section-title span {
    max-width: none;
    margin-inline: 0
}

.environment-page-intro-copy .lower-section-title h2 {
    font-size: clamp(34px,3.05vw,46px);
    line-height: 1.6
}

.environment-page-intro-copy>p {
    margin: 0 0 15px;
    font-size: 15px;
    font-weight: 600;
    line-height: 2.05;
    color: #294a64;
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty
}

.environment-page-intro-copy>p:last-child {
    margin-bottom: 0
}

.environment-workplace .lower-section-title {
    margin-bottom: 42px
}

.environment-workplace .lower-section-title span {
    max-width: 62em;
    margin-inline: auto;
    font-weight: 600;
    color: #36536a
}

.environment-workplace-main>.photo-slot {
    width: 100%;
    height: 350px;
    min-height: 0;
    overflow: hidden;
    border-radius: 24px
}

.environment-workplace-main img,
.environment-workplace-cards .photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.environment-workplace-main img {
    object-position: center 52%
}

.environment-workplace-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
    margin-top: 28px
}

.environment-workplace-cards article {
    overflow: hidden;
    border: 1px solid #d7e9f4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(24,93,145,.05)
}

.environment-workplace-cards .photo-slot {
    height: 220px;
    min-height: 0;
    border: 0;
    border-radius: 0
}

.environment-workplace-cards article>div:last-child {
    padding: 24px 26px 27px
}

.environment-workplace-cards h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--blue)
}

.environment-workplace-cards p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.95;
    color: #425b6e;
    text-wrap: pretty
}

.environment-space-values {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 54px;
    padding-top: 38px;
    border-top: 1px solid #d3e5f1
}

.environment-space-values article {
    min-width: 0;
    padding: 0 25px;
    text-align: center;
    border-right: 1px solid #d3e5f1
}

.environment-space-values article:last-child {
    border-right: 0
}

.environment-space-values img {
    width: 54px;
    height: 46px;
    margin: 0 auto 17px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(1788%) hue-rotate(198deg) brightness(94%) contrast(98%)
}

.environment-space-values h3 {
    margin: 0 0 10px;
    font-size: 17px;
    color: var(--blue)
}

.environment-space-values p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.85;
    color: #425b6e;
    text-wrap: pretty
}

.environment-page .environment-welfare {
    grid-template-columns: minmax(0,1.28fr) minmax(330px,.72fr);
    gap: clamp(34px,4vw,68px);
    align-items: start;
    padding: clamp(48px,5vw,72px);
    border: 1px solid #e0edf5;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(24,93,145,.05)
}

.environment-welfare-copy .lower-section-title,
.environment-welfare-copy .lower-section-title h2,
.environment-welfare-copy .lower-section-title span {
    text-align: left
}

.environment-welfare-copy .lower-section-title {
    margin-bottom: 34px
}

.environment-welfare-copy .lower-section-title h2,
.environment-welfare-copy .lower-section-title span {
    max-width: none;
    margin-inline: 0
}

.environment-welfare-copy .lower-section-title span {
    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    color: #36536a
}

.environment-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px
}

.environment-benefit-grid article {
    min-height: 182px;
    padding: 22px 16px 20px;
    text-align: center;
    border: 1px solid #d7e9f4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(24,93,145,.04)
}

.environment-welfare .environment-benefit-grid img {
    width: 48px;
    height: 42px;
    max-height: none;
    margin: 0 auto 14px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(1788%) hue-rotate(198deg) brightness(94%) contrast(98%)
}

.environment-benefit-grid h3 {
    margin: 0 0 9px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--blue)
}

.environment-benefit-grid p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
    color: #425b6e;
    text-wrap: pretty
}

.environment-welfare-note {
    display: block;
    margin-top: 16px;
    font-size: 11px;
    color: #64798a
}

.environment-welfare-visual {
    display: flex;
    min-height: 760px;
    margin: 44px 0 0;
    align-items: center;
    justify-content: center
}

.environment-page .environment-welfare-visual img {
    display: block;
    width: 100%;
    height: 760px;
    max-height: none;
    object-fit: contain
}

@media(max-width: 900px) {
    .environment-page .environment-page-intro {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .environment-page-intro>.photo-stack>.photo-slot:first-child {
        height: 300px
    }

    .environment-page-intro>.photo-stack>.photo-slot:not(:first-child) {
        height: 180px
    }

    .environment-page-intro-copy .lower-section-title h2 {
        font-size: clamp(30px,6vw,38px)
    }

    .environment-workplace-main>.photo-slot {
        height: 290px
    }

    .environment-workplace-cards {
        grid-template-columns: 1fr
    }

    .environment-workplace-cards article {
        display: grid;
        grid-template-columns: minmax(220px,.8fr) 1.2fr
    }

    .environment-workplace-cards .photo-slot {
        height: 100%;
        min-height: 220px
    }

    .environment-space-values {
        grid-template-columns: repeat(2,1fr);
        row-gap: 34px
    }

    .environment-space-values article:nth-child(2) {
        border-right: 0
    }

    .environment-page .environment-welfare {
        grid-template-columns: 1fr;
        padding: 42px 32px
    }

    .environment-welfare-visual {
        min-height: 0;
        margin-top: 0
    }

    .environment-page .environment-welfare-visual img {
        width: min(100%,540px);
        height: auto
    }
}

@media(max-width: 520px) {
    .environment-page-intro>.photo-stack {
        gap: 8px
    }

    .environment-page-intro>.photo-stack>.photo-slot:first-child {
        height: 230px
    }

    .environment-page-intro>.photo-stack>.photo-slot:not(:first-child) {
        height: 130px
    }

    .environment-page-intro-copy>p {
        font-size: 14px;
        line-height: 1.95
    }

    .environment-workplace-main>.photo-slot {
        height: 220px;
        border-radius: 16px
    }

    .environment-workplace-cards article {
        display: block
    }

    .environment-workplace-cards .photo-slot {
        height: 190px;
        min-height: 0
    }

    .environment-space-values {
        gap: 10px;
        padding-top: 28px
    }

    .environment-space-values article {
        padding: 0 12px 28px
    }

    .environment-space-values img {
        width: 46px;
        height: 40px
    }

    .environment-space-values h3 {
        font-size: 15px
    }

    .environment-space-values p {
        font-size: 12px
    }

    .environment-page .environment-welfare {
        padding: 34px 18px;
        border-radius: 20px
    }

    .environment-benefit-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .environment-benefit-grid article {
        display: grid;
        grid-template-columns: 48px 1fr;
        min-height: 0;
        column-gap: 14px;
        padding: 18px;
        text-align: left
    }

    .environment-welfare .environment-benefit-grid img {
        grid-row: 1/3;
        margin: 2px 0 0
    }

    .environment-benefit-grid h3 {
        margin-bottom: 5px
    }
}

.lower-section-title {
    text-align: center;
    margin-bottom: 48px
}
.lower-section-title.left {
    text-align: left;
}

.lower-section-title p {
    font: 800 11px var(--en);
    letter-spacing: .14em;
    color: #0871ca
}

.lower-section-title h2 {
    font-size: clamp(28px,2.6vw,40px);
    line-height: 1.55;
    color: #0958b4;
    letter-spacing: .06em;
    margin: 8px 0;
    text-wrap: balance;
    word-break: keep-all
}

.lower-section-title span {
    display: block;
    font-size: 16px;
    line-height: 2
}

.wide-illustration {
    display: block;
    width: min(100%,1080px);
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin: 30px auto
}

.wide-illustration.medium {
    max-width: 760px
}

.strengths-visual {
    position: relative;
    width: 100%;
    min-height: 580px;
    padding: 0;
}

.strengths-visual>img {
    display: block;
    width: min(62%,760px);
    height: 540px;
    margin: 0 auto;
    object-fit: contain
}

.strengths-point {
    position: absolute;
    z-index: 2;
    width: min(25%,280px);
    margin: 0;
    padding: 17px 20px;
    text-align: center;
    border: 1px solid #cde3f2;
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 24px rgba(26,92,142,.08);
    color: var(--blue)
}

.strengths-point h3 {
    margin: 0 0 7px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--blue)
}

.strengths-point p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
    color: #4a6071;
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty
}

.strengths-visual .is-top-left {top: 32px;left: min(100px, 4vw);}
.strengths-visual .is-top-right {top: 32px;right: min(100px, 4vw);}
.strengths-visual .is-bottom-left {bottom: 32px;left: min(100px, 4vw);}
.strengths-visual .is-bottom-right {right: min(100px, 4vw);bottom: 32px}

.soft-panel,.numbers-panel,.welfare-panel,.session-panel,.contact-panel,.message-panel,.facts-panel {
    padding-left: clamp(24px,5vw,72px);
    padding-right: clamp(24px,5vw,72px);
    border: 1px solid #d9ebf6;
    border-radius: 32px;
    background: rgba(255,255,255,.82)
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.card-grid-3 {
    grid-template-columns: repeat(3,1fr)
}

.card-grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.card-grid article,.process-grid article,.job-type-grid article {
    padding: 24px;
    border: 1px solid #d7e8f4;
    border-radius: 16px;
    background: #fff
}

.card-grid img {
    width: 100%;
    height: 180px;
    object-fit: contain
}

.card-grid .photo-slot {
    height: 180px
}

.card-grid h3,.job-type-grid h3 {
    font-size: 18px;
    color: #075fc5
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 12px;
    width: １００％;
    margin: 0 auto 50px;
}

.process-grid article {
    position: relative;
    text-align: center
}

.process-grid article:not(:last-child):after {
    content: "→";
    position: absolute;
    right: -13px;
    top: 50%;
    color: #086bc1;
    font-weight: 900
}

.process-grid b,.story-number {
    color: #075fc5;
    font: 900 24px var(--en)
}

.process-grid h3 {
    font-size: 15px
}

.process-grid p {
    font-size: 13px;
    line-height: 1.8
}

.photo-feature,.split-feature,.welfare-panel,.career-panel,.session-panel,.contact-panel,.crosstalk-panel,.next-step,.future-panel,.quote-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
    align-items: center
}

.photo-feature>.photo-slot,.split-feature>.photo-slot,.crosstalk-panel>.photo-slot,.people-intro>.photo-slot {
    min-height: 440px;
    border-radius: 14px 70px;
}

.people-page .people-intro>.photo-slot {
    min-height: 0;
    height: auto;
    align-self: center;
    background: transparent
}

.people-page .people-intro>.photo-slot img {
    height: auto
}

.photo-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.photo-stack>.photo-slot:first-child {
    grid-column: 1/3;
    min-height: 300px
}

.photo-stack>.photo-slot {
    min-height: 170px;
    border-radius: 16px
}

.photo-stack-about-intro {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: stretch
}

.photo-stack-about-intro>.photo-slot,
.photo-stack-about-intro>.photo-slot:first-child {
    grid-column: auto;
    min-height: 0;
    height: 240px
}

.photo-stack-about-intro>.photo-slot:first-child img {
    object-position: center 38%
}

.three-values,.four-values,.five-values {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 34px
}

.four-values {
    grid-template-columns: repeat(4,1fr)
}

.five-values {
    grid-template-columns: repeat(5,1fr)
}

.three-values article,.four-values article,.five-values article {
    padding: 22px;
    text-align: center;
    font-weight: 700;
    color: #075fc5;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #d9eaf5
}

.people-values article {
    display: flex;
    min-height: 132px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px
}

.people-values article img {
    width: 58px;
    height: 46px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(1788%) hue-rotate(198deg) brightness(94%) contrast(98%)
}

.number-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.about-numbers-panel {
    position: relative;
    margin-top: 80px;
    padding-top: 120px;
    scroll-margin-top: 88px
}

.about-numbers-panel .number-grid {
    grid-template-columns: repeat(4,1fr)
}

.about-numbers-panel .number-grid strong {
    font-size: clamp(54px,5.4vw,78px);
    white-space: nowrap
}

.about-numbers-panel .number-grid span {
    display: block;
    margin-top: -10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--deep)
}

.about-numbers-panel .number-grid article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center
}

.about-numbers-panel .number-grid article.has-comparison {
    padding-bottom: 22px
}

.number-comparison {
    width: min(100%,250px);
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #d5e8f3;
    color: var(--deep)
}

.number-comparison p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.65
}

.number-comparison .number-period {
    margin-bottom: 4px;
    color: #5480a3;
    font-size: 11px
}

.number-comparison .number-source-note {
    margin-top: 7px;
    color: #60788c;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.55
}

.number-comparison .number-source-note a {
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px
}

.number-comparison .number-source-note a:hover,
.number-comparison .number-source-note a:focus-visible {
    color: var(--blue);
    text-decoration-thickness: 2px
}

@media(max-width: 900px) {
    .about-numbers-panel .number-grid {
        grid-template-columns: repeat(2,1fr)
    }

    /* Follow the desktop grid by half: its left four items first, then its
       right four items. The two-column phone/tablet rows become 1-2, 5-6,
       3-4, 7-8 while desktop source and display order stay unchanged. */
    .about-numbers-panel .number-grid article:nth-child(1) {order: 1}
    .about-numbers-panel .number-grid article:nth-child(2) {order: 2}
    .about-numbers-panel .number-grid article:nth-child(5) {order: 3}
    .about-numbers-panel .number-grid article:nth-child(6) {order: 4}
    .about-numbers-panel .number-grid article:nth-child(3) {order: 5}
    .about-numbers-panel .number-grid article:nth-child(4) {order: 6}
    .about-numbers-panel .number-grid article:nth-child(7) {order: 7}
    .about-numbers-panel .number-grid article:nth-child(8) {order: 8}
}

@media(max-width: 520px) {
    .about-numbers-panel .number-grid strong {
        font-size: min(40px,10vw)
    }

    .about-numbers-panel .number-grid em {
        font-size: 12px
    }

    .about-numbers-panel .number-grid article {
        padding-inline: 10px
    }

    .number-comparison {
        margin-top: 10px;
        padding-top: 10px
    }

    .number-comparison p {
        font-size: 10px
    }

    .number-comparison .number-source-note {
        font-size: 8px
    }
}

.about-numbers-decor {
    position: absolute;
    top: 24px;
    z-index: 1;
    width: clamp(200px,16vw,360px);
    height: 220px;
    object-fit: contain;
    opacity: .88;
    pointer-events: none
}

.about-numbers-decor.is-left {left: clamp(30px,4vw,64px)}
.about-numbers-decor.is-right {right: clamp(30px,4vw,64px)}

.about-numbers-panel>.lower-section-title,
.about-numbers-panel>.number-grid {
    position: relative;
    z-index: 2
}

.number-grid article {
    text-align: center;
    padding: 25px;
    border-right: 1px dashed #bdd9e9
}

.number-grid small {
    display: block;
    font-weight: 700;
    font-size: 18px;
}

.number-grid strong {
    display: block;
    color: #075fc5;
    font: 900 84px var(--en);
}

.number-grid em {
    font: 700 15px var(--jp)
}

.philosophy>.photo-slot {
    min-height: 0;
    height: 280px;
    border-radius: 28px
}

.philosophy>.photo-slot img {
    object-position: center center
}

.philosophy-intro {
    width: min(100%,920px);
    margin: -10px auto 40px;
    text-align: center
}

.philosophy-intro p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 2.05;
    color: #36536a;
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty
}

.philosophy-values {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    margin-top: 34px
}

.philosophy-values article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    padding: 28px;
    border: 1px solid #d6e8f4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(26,92,142,.055)
}

.philosophy-values b {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf6fd;
    font: 800 13px var(--en);
    color: var(--blue)
}

.philosophy-values h3 {
    margin: 3px 0 9px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--deep)
}

.philosophy-values p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;
    color: #4b6173;
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty
}

.interview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px
}

.interview-grid article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid #d6e8f3;
    border-radius: 18px;
    background: #fff
}

.interview-grid .photo-slot {
    min-height: 340px;
    height: 100%
}

.interview-grid .photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%
}

.interview-grid article:nth-child(even)>.photo-slot {
    order: 2
}

.interview-grid article>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    padding: 28px
}

.interview-grid h3 {
    font-size: 20px;
    color: #075fc5
}

.interview-grid p.interview-card-copy{
    font-size: 24px;
}

.interview-grid a.interview-card-button {
    display: flex;
    width: 100%;
    min-height: 54px;
    margin-top: auto;
    padding: 10px 16px 10px 20px;
    align-items: center;
    justify-content: space-between;
    color: #075fc5;
    font-weight: 700;
    border: 1px solid #77b4e5;
    border-radius: 999px;
    background: #fff;
    transition: none
}

.interview-card-button b {
    font-size: 20px;
    transition: none
}

.interview-card-button:hover {
    color: #fff;
    border-color: #075fc5;
    background: #075fc5
}

.interview-card-button:hover b {
    transform: translateX(4px)
}

.photo-mosaic {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.photo-mosaic .photo-slot {
    min-height: 250px;
    border-radius: 24px
}

.photo-mosaic .photo-slot:nth-child(1) {
    grid-row: span 2
}

.next-step img,.career-panel img,.future-panel img,.welfare-panel img,.contact-panel img {
    width: 100%;
    max-height: 450px;
    object-fit: contain
}

.people-page .next-step>div>.pill {
    margin-inline: auto
}

.detail-hero,.article-hero {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 4vw;
    min-height: 650px;
    padding: 110px max(4vw,calc((100vw - 1360px)/2)) 70px;
    background: #f5faff
}

.detail-hero>.photo-slot {
    min-height: 520px;
    border-radius: 18px 100px 18px 100px
}

.detail-hero h1,.article-hero h1 {
    font-size: clamp(32px,3.5vw,50px);
    line-height: 1.55;
    color: #0958b4
}

.detail-hero dl {
    display: grid;
    grid-template-columns: 70px 1fr;
    font-size: 14px
}

.lower-section.story-section, .talk-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
    padding: 40px;
    margin: 0 auto;
}

.story-section.image-left>.story-copy,.talk-section.reverse>div:not(.photo-slot) {
    order: 2
}

.story-section.image-left>.photo-slot {
    order: 1
}

.story-section.text-left>.story-copy {
    order: 1
}

.story-section.text-left>.photo-slot {
    order: 2
}

.story-section>.photo-slot,.talk-section>.photo-slot {
    min-height: 440px;
    border-radius: 18px
}

.story-section h2,.talk-section h2 {
    font-size: clamp(26px,2.5vw,38px);
    line-height: 1.6;
    color: #0958b4
}

.story-number small {
    font: 700 12px var(--jp);
    margin-left: 20px
}

.dialogue p {
    font-size: 14px
}

.dialogue b {
    color: #075fc5;
    margin-right: 10px
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px
}

.member-grid article {
    text-align: center;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #d9e8f1
}

.member-grid .photo-slot {
    min-height: 180px;
    border-radius: 50%
}

.closing-copy {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #075fc5
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.benefit-grid article {
    padding: 20px;
    text-align: center;
    border: 1px solid #d7e8f3;
    border-radius: 12px;
    background: #fff;
    font-weight: 700
}

.facts-panel {
    margin-bottom: 80px
}

.anchor-nav,.faq-category-nav {
    width: min(88%,1100px);
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

.anchor-nav a,.faq-category-nav a {
    padding: 18px;
    text-align: center;
    border: 1px solid #086bc1;
    border-radius: 999px;
    color: #075fc5;
    font-weight: 700
}

.job-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px
}

.job-type-grid article {
    display: flex;
    align-items: center;
    gap: 16px;
}

.job-type-grid img {
    width: 40%;
    height: 180px;
    object-fit: contain
}

.requirements dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6,auto);
    grid-auto-flow: column;
    gap: 14px 24px;
    max-width: 1440px;
    margin: 0 auto
}

.requirements dl>div {
    display: grid;
    grid-template-columns: minmax(210px,.72fr) 1.28fr;
    align-items: center;
    border: 1px solid #d7e8f3;
    border-radius: 14px;
    background: #fff;
    min-height: 126px;
    overflow: hidden
}

.requirements dt {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 12px 24px 28px;
    font-weight: 700;
    color: #075fc5;
    white-space: nowrap
}

.requirements dt img {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    object-fit: contain;
    filter: invert(31%) sepia(95%) saturate(1814%) hue-rotate(193deg) brightness(86%) contrast(101%)
}

.requirements dd {
    padding: 24px 28px 24px 12px;
    margin: 0;
    line-height: 1.8
}

.selection-flow {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: clamp(22px,2.5vw,44px);
    max-width: 1500px;
    margin: 0 auto
}

.selection-flow article {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 190px 1fr;
    align-items: start;
    text-align: center
}

.selection-flow article:not(:last-child):after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 60%;
    right: calc(clamp(22px,2.5vw,44px) * -.72);
    width: 30px;
    height: 10px;
    background: radial-gradient(circle,var(--blue) 2px,transparent 2.5px) left center/9px 9px repeat-x
}

.selection-flow article:not(:last-child):before {
    content: "";
    position: absolute;
    z-index: 3;
    top: calc(60% - 2px);
    right: calc(clamp(22px,2.5vw,44px) * -.72 - 3px);
    width: 11px;
    height: 11px;
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transform: rotate(45deg)
}

.selection-flow b {
    font: 800 clamp(42px,4.2vw,68px)/1 var(--en);
    letter-spacing: -.04em;
    color: #075fc5
}

.selection-flow h3 {
    min-height: 2.8em;
    margin: 14px 0 4px;
    color: var(--deep);
    font-size: clamp(18px,1.35vw,24px);
    line-height: 1.4
}

.selection-flow img {
    width: 100%;
    height: 161px;
    object-fit: contain;
    background: #fff;
}

.selection-flow p {
    margin: 10px auto 0;
    max-width: 15em;
    color: #42627d;
    font-size: 14px;
    line-height: 1.9
}

.center-note {
    margin-top: clamp(42px,5vw,76px);
    text-align: center;
    font-weight: 700
}

.application-panel>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 35px;
    border: 1px solid #d7e8f3;
    border-radius: 18px;
    background: #fff
}

.application-panel img {
    width: 100%;
    height: 260px;
    object-fit: contain
}

.application-panel aside {
    margin-top: 28px;
    padding: 28px;
    text-align: center;
    border: 1px solid #d7e8f3;
    border-radius: 18px
}

.application-panel aside strong {
    font: 800 72px var(--en);
    color: #075fc5
}

.recruit-faq>img {
    display: block;
    width: 700px;
    margin: 0 auto
}

.faq-category-nav {
    grid-template-columns: repeat(5,1fr)
}

.faq-category-nav a {
    border-radius: 16px
}

.faq-groups>section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 60px 0;
    border-bottom: 1px dashed #b9d9eb
}

.faq-group-label b {
    font: 900 54px var(--en);
    color: #075fc5
}

.faq-group-label h2 {
    font-size: 24px
}

.qa-list {
    padding: 0 30px;
    border: 1px solid #d7e8f3;
    border-radius: 18px;
    background: #fff
}

.qa-list article {
    padding: 22px 0;
    border-bottom: 1px dashed #bdd9e9
}

.qa-list article:last-child {
    border: 0
}

.qa-list h3,.qa-list p {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 12px;
    font-size: 15px
}

.qa-list h3 span,.qa-list p span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #075fc5;
    color: #fff
}

.qa-list p span {
    background: #ffda22;
    color: #075fc5
}

.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px
}

.news-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 46px;
    padding: 10px 24px;
    border: 1px solid #075fc5;
    border-radius: 999px;
    background: transparent;
    color: #075fc5;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease
}

.news-filters a:is(:hover,:focus-visible),
.news-filters .is-active {
    background: #075fc5;
    color: #fff
}

.news-filters a:focus-visible {
    outline: 2px solid #ffda22;
    outline-offset: 3px
}

.news-list>article {
    display: grid;
    grid-template-columns: 120px 110px minmax(0,1fr) 40px;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #dbeaf3
}

.news-card-meta {
    display: contents
}

.news-list article>span,.article-hero span,.related-news span {
    padding: 7px;
    text-align: center;
    border: 1px solid #075fc5;
    border-radius: 5px;
    font-size: 11px;
    margin-left: 10px;
}

.news-list h3 {
    font-size: 16px
}

.news-list .photo-slot {
    height: 120px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px
}

.pagination>* {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #075fc5
}

.pagination b {
    background: #075fc5;
    color: #fff
}

.article-hero img {
    width: 100%;
    max-height: 480px;
    object-fit: contain
}

.article-content {
    max-width: 1000px;
    font-weight: 500
}

.article-content>p {
    margin: 40px 0;
    line-height: 2
}

.article-content>.photo-slot {
    width: 70%;
    min-height: 430px;
    margin: 40px auto
}

.article-nav {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px
}

.article-nav a {
    text-align: center;
    padding: 18px;
    border: 1px solid #075fc5;
    border-radius: 7px
}

.related-news>a {
    display: grid;
    grid-template-columns: 120px 100px 1fr 30px;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #dceaf3
}

.plain-message {
    text-align: center;
    padding: 200px 20px
}

@media(max-width: 900px) {
    .lower-section {
        width:calc(100% - 48px);
        padding: 72px 0
    }

    .lower-hero,.detail-hero,.article-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 95px 24px 60px
    }

    .lower-hero {
        gap: 24px
    }

    .breadcrumb {
        margin-bottom: 28px
    }

    .lower-en,.lower-en-long {
        font-size: 46px;
        letter-spacing: .04em
    }

    .lower-hero h1 {
        font-size: 32px;
        margin-top: 25px
    }

    .lower-hero>img {
        height: 340px;
        transform: none!important
    }

    .detail-hero>.photo-slot {
        min-height: 420px
    }

    .card-grid-4,.card-grid-3 {
        grid-template-columns: 1fr 1fr
    }

    .process-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .process-grid article:nth-child(even):after {
        display: none
    }

    .photo-feature,.split-feature,.welfare-panel,.career-panel,.session-panel,.contact-panel,.crosstalk-panel,.next-step,.future-panel,.quote-card,.story-section,.talk-section {
        grid-template-columns: 1fr
    }

    .story-section.image-left>.story-copy,.story-section.image-left>.photo-slot,.story-section.text-left>.story-copy,.story-section.text-left>.photo-slot,.talk-section.reverse>div:not(.photo-slot) {
        order: 0
    }

    .three-values,.four-values,.five-values {
        grid-template-columns: 1fr 1fr
    }

    .number-grid {
        grid-template-columns: 1fr 1fr
    }

    .interview-grid {
        grid-template-columns: 1fr
    }

    .member-grid {
        grid-template-columns: 1fr 1fr
    }

    .anchor-nav {
        grid-template-columns: 1fr
    }

    .faq-category-nav {
        grid-template-columns: 1fr 1fr
    }

    .requirements dl {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row
    }

    .selection-flow {
        grid-template-columns: 1fr 1fr
    }

    .selection-flow article:before,
    .selection-flow article:after {
        display: none
    }

    .faq-groups>section {
        grid-template-columns: 1fr
    }

    .news-list>article {
        grid-template-columns: 90px 90px minmax(0,1fr) 35px
    }

    .job-type-grid {
        grid-template-columns: 1fr
    }

    .article-content>.photo-slot {
        width: 100%
    }
}

@media(max-width: 520px) {
    .lower-section {
        width:calc(100% - 36px);
        padding: 58px 0
    }

    .lower-hero,.detail-hero,.article-hero {
        padding-left: 18px;
        padding-right: 18px
    }

    .lower-en,.lower-en-long {
        font-size: clamp(34px,11vw,44px)
    }

    .lower-hero h1 {
        font-size: clamp(27px,8vw,34px);
        letter-spacing: .035em
    }

    .lower-hero h1 span {
        white-space: normal;
        text-wrap: balance
    }

    .lower-hero>img {
        height: 270px
    }

    .lower-section-title {
        text-align: left;
        margin-bottom: 30px
    }

    .lower-section-title h2 {
        font-size: 27px
    }

    .card-grid,.card-grid-3,.card-grid-4,.three-values,.four-values,.five-values,.number-grid,.member-grid,.photo-mosaic,.selection-flow {
        grid-template-columns: 1fr 1fr;
    }

    .selection-flow {
        grid-template-columns: 1fr;
        gap: 42px
    }

    .selection-flow article {
        grid-template-rows: auto auto 160px auto;
    }

    .number-grid small{
        font-size: 16px;
    }

    .number-grid strong{
        font-size: min(50px, 9vw);
    }

    .interview-grid article {
        grid-template-columns: 1fr
    }

    .interview-grid article:nth-child(even)>.photo-slot {
        order: 0
    }

    .interview-grid .photo-slot {
        min-height: 300px
    }

    .photo-stack {
        grid-template-columns: 1fr
    }

    .photo-stack>.photo-slot:first-child {
        grid-column: auto
    }

    .photo-stack-about-intro {
        grid-template-columns: 1fr
    }

    .photo-stack-about-intro>.photo-slot,
    .photo-stack-about-intro>.photo-slot:first-child {
        height: 210px
    }

    .strengths-visual {
        min-height: 390px;
        padding: 74px 18px;
        border-radius: 18px
    }

    .strengths-visual>img {
        width: 88%;
        height: 240px
    }

    .strengths-point {
        width: calc(50% - 27px);
        padding: 10px;
        border-radius: 14px
    }

    .strengths-point h3 {
        margin-bottom: 4px;
        font-size: 12px
    }

    .strengths-point p {
        font-size: 9px;
        line-height: 1.55
    }

    .strengths-visual .is-top-left {top: 18px;left: 18px}
    .strengths-visual .is-top-right {top: 18px;right: 18px}
    .strengths-visual .is-bottom-left {bottom: 18px;left: 18px}
    .strengths-visual .is-bottom-right {right: 18px;bottom: 18px}

    .about-numbers-panel {
        margin-top: 48px;
        padding-top: 104px
    }

    .about-numbers-decor {
        top: -28px;
        width: 260px;
        height: 160px;
        opacity: .72
    }

    .about-numbers-decor.is-left {
    display: none;
}
    .about-numbers-decor.is-right {right: -18px;}

    .philosophy-intro {
        margin-bottom: 28px;
        text-align: left
    }

    .philosophy-intro p {
        font-size: 14px;
        line-height: 1.9
    }

    .philosophy>.photo-slot {
        height: 220px;
        border-radius: 18px
    }

    .philosophy-values {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 24px
    }

    .philosophy-values article {
        grid-template-columns: 42px 1fr;
        gap: 13px;
        padding: 20px 17px
    }

    .philosophy-values b {
        width: 40px;
        height: 40px;
        font-size: 11px
    }

    .philosophy-values h3 {
        margin-top: 2px;
        font-size: 16px
    }

    .philosophy-values p {
        font-size: 12px
    }

    .member-grid .photo-slot {
        min-height: 240px
    }

    .requirements dl>div {
        grid-template-columns: 1fr
    }

    .requirements dt {
        padding-bottom: 5px;
        justify-content: center;
        flex-direction: column;
        gap: 0;
    }

    .requirements dd {
        padding-top: 5px;
        text-align: center;
    }

    .faq-category-nav {
        grid-template-columns: 1fr
    }

    .news-filters {
        gap: 10px;
        margin-bottom: 28px
    }

    .news-filters a {
        min-width: 0;
        min-height: 42px;
        padding: 9px 20px;
        font-size: 13px
    }

    .news-list>article {
        grid-template-columns: minmax(0,1fr) 28px;
        gap: 8px 14px;
        padding: 20px 0
    }

    .news-card-meta {
        display: flex;
        grid-column: 1;
        align-items: center;
        gap: 12px
    }

    .news-list h3 {
        grid-column: 1;
        min-width: 0
    }

    .news-card-arrow {
        grid-column: 2;
        grid-row: 1/3;
        align-self: center
    }

    .article-nav {
        grid-template-columns: 1fr
    }

    .related-news>a {
        grid-template-columns: 85px 1fr 25px
    }

    .related-news span {
        display: none
    }

    .lower-main .entry-cta {
        width: calc(100% - 36px)
    }
}

/* Final lower-page hero type balance */
@media(min-width: 901px) {
    .lower-hero {
        min-height:580px;
        padding-top: 85px;
        padding-bottom: 50px
    }

    .lower-hero>img {
        height: 410px
    }

    .lower-hero .breadcrumb {
        margin-bottom: 26px
    }

    .lower-hero h1 {
        font-size: clamp(29px,2.7vw,42px);
        letter-spacing: .055em;
        margin-top: 26px;
        margin-bottom: 14px
    }
}

/* TOP ABOUT alternating edge-to-edge cards */
.about-grid article, .about-grid article:nth-child(even) {
    grid-template-columns: 72px minmax(0,1fr) 48%;
    min-height: 225px;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}

.about-grid article>b {
    align-self: center;
    margin-left: 30px
}

.about-grid article>div {
    align-self: center;
    padding: 34px 26px
}

.about-grid article>.photo-slot {
    grid-column: 3;
    width: 100%;
    height: 100%;
    min-height: 225px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.about-grid article>.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-grid article:nth-child(even) {
    grid-template-columns: 48% 72px minmax(0,1fr)
}

.about-grid article:nth-child(even)>.photo-slot {
    grid-column: 1;
    grid-row: 1
}

.about-grid article:nth-child(even)>b {
    grid-column: 2;
    grid-row: 1
}

.about-grid article:nth-child(even)>div {
    grid-column: 3;
    grid-row: 1
}

@media(max-width: 900px) {
    .about-grid article, .about-grid article:nth-child(even) {
        grid-template-columns:58px minmax(0,1fr);
        min-height: 0
    }

    .about-grid article>b, .about-grid article:nth-child(even)>b {
        grid-column: 1;
        grid-row: 1;
        margin-left: 22px
    }

    .about-grid article>div, .about-grid article:nth-child(even)>div {
        grid-column: 2;
        grid-row: 1;
        padding: 26px 22px
    }

    .about-grid article>.photo-slot, .about-grid article:nth-child(even)>.photo-slot {
        grid-column: 1/3;
        grid-row: 2;
        height: 210px;
        min-height: 210px
    }
}

/* TOP WORK background accents */
.work {
    position: relative;
    isolation: isolate
}

.work:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    bottom: -90px;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: radial-gradient(circle at 7% 20%,transparent 0 145px,rgba(137,205,244,.22) 146px 148px,transparent 149px), radial-gradient(circle at 17% 82%,rgba(228,246,255,.58) 0 120px,transparent 121px), radial-gradient(circle at 94% 9%,rgba(239,249,255,.7) 0 105px,transparent 106px);
    pointer-events: none;
}

.work:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -2vw;
    bottom: 4%;
    width: 220px;
    height: 150px;
    opacity: .45;
    background-image: radial-gradient(circle,rgba(66,166,226,.25) 0 3px,transparent 3.5px);
    background-size: 26px 26px;
    mask-image: linear-gradient(135deg,transparent 4%,#000 45%,transparent 95%);
    pointer-events: none;
}

@media(max-width: 900px) {
    .work:before {
        top:-50px;
        bottom: -50px;
        background: radial-gradient(circle at -8% 18%,transparent 0 105px,rgba(137,205,244,.2) 106px 108px,transparent 109px),radial-gradient(circle at 100% 84%,rgba(228,246,255,.5) 0 90px,transparent 91px)
    }

    .work:after {
        left: auto;
        right: -30px;
        bottom: 2%;
        width: 150px;
        height: 120px;
        background-size: 22px 22px
    }
}

/* CTA colors: Mynavi application buttons stay yellow */
.pill, .pill.pale {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.pill.is-mynavi {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #22425f
}

.pill b {
    position: relative;
    background: #fff;
    color: var(--blue);
    font-size: 0
}

.pill b:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    transform: translate(-65%,-50%) rotate(45deg);
}

.pill {
    width: fit-content;
    min-width: 250px;
    height: 60px;
    padding: 0 14px 0 28px;
    gap: 32px;
}

.pill b {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

@media(max-width: 520px) {
    .pill {
        min-width:0;
        width: 100%;
        padding-left: 24px;
        gap: 22px
    }
}

.crosstalk-members {
    grid-template-columns: repeat(3,1fr);
    max-width: 960px
}

.crosstalk-members .photo-slot {
    width: min(100%,320px);
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 50%
}

.crosstalk-members .photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%
}

.crosstalk-page .message-panel {
    padding-inline: clamp(24px,5vw,72px)
}

.interview-page .detail-hero>.photo-slot img,.interview-page .story-section>.photo-slot img,.interview-page .quote-card>.photo-slot img {
    object-fit: cover
}

.interview-page .story-section>.photo-slot {
    align-self: center;
    width: 100%;
    height: 300px;
    min-height: 0;
    max-height: 300px;
    overflow: hidden;
    background: transparent;
}

.interview-page .story-section>.photo-slot img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
}

.interview-page .story-kobayashi-1>.photo-slot img {
    transform: scaleX(-1);
}

@media(min-width: 701px) {
    .interview-page .story-section.image-left>.story-copy {
        order: 2 !important;
    }

    .interview-page .story-section.image-left>.photo-slot {
        order: 1 !important;
    }

    .interview-page .story-section.text-left>.story-copy {
        order: 1 !important;
    }

    .interview-page .story-section.text-left>.photo-slot {
        order: 2 !important;
    }
}

@media(max-width: 700px) {
    .interview-page .story-section>.photo-slot {
        height: min(66vw, 300px);
    }
}

.interview-page .quote-card {
    grid-template-columns: minmax(320px, 38%) 1fr;
    gap: clamp(32px, 5vw, 76px);
    min-height: 280px;
    padding: 0 clamp(28px, 4vw, 64px) 0 0;
    border: 1px solid #cbd9e8;
    border-radius: 24px;
    background: #fff;
    margin: 50px auto;
}

.interview-page .quote-card>.photo-slot {
    align-self: stretch;
    min-height: 200px;
    max-height: 400px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    margin-top: -100px;
    padding-left: 20px;
}

.interview-page .quote-card>.photo-slot img {
    width: 100%;
    height: 100%;
    object-position: center 42%;
    z-index: 1;
    position: relative;
}

.interview-page .quote-card-kobayashi>.photo-slot img,
.interview-page .quote-card-katakawa>.photo-slot img {
    object-fit: contain;
    object-position: center bottom;
}

.quote-card-copy blockquote {
    margin: 0;
    color: #0958b4;
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 800;
    line-height: 1.75;
}

.quote-card-profile {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin: 28px 0 0;
    color: #244d7b;
}

.quote-card-profile span {
    font-size: 14px;
    font-weight: 700;
}

.quote-card-profile strong {
    font-size: 18px;
    letter-spacing: .08em;
}

@media(max-width: 960px) and (min-width: 701px) {
    .interview-page .quote-card {
        grid-template-columns: minmax(260px, 40%) 1fr;
        gap: 28px;
        padding-right: 32px;
        margin-top: 80px;
    }

    .interview-page .quote-card>.photo-slot {
        margin-top: -72px;
    }

    .quote-card-copy blockquote {
        font-size: clamp(24px, 3.4vw, 32px);
        line-height: 1.65;
    }
}

@media(max-width: 700px) {
    .crosstalk-members {
        grid-template-columns:1fr
    }

    .interview-page .quote-card {
        grid-template-columns: 1fr;
        gap: 0;
        width: min(88%, 560px);
        padding: 0 0 28px;
        margin: 100px auto 50px;
        overflow: visible;
    }

    .interview-page .quote-card>.photo-slot {
        width: 100%;
        height: clamp(260px, 78vw, 390px);
        min-height: 0;
        margin-top: -78px;
        align-self: auto;
    }

    .interview-page .quote-card>.photo-slot img {
        object-fit: contain;
        object-position: center bottom;
    }

    .quote-card-copy {
        padding: 24px clamp(20px, 7vw, 40px) 0;
        text-align: left;
    }

    .quote-card-copy blockquote {
        font-size: clamp(21px, 6.5vw, 28px);
        line-height: 1.65;
    }

    .quote-card-profile {
        gap: 16px;
        margin-top: 20px;
    }
}

@media(max-width: 420px) {
    .interview-page .quote-card {
        width: calc(100% - 32px);
        border-radius: 18px;
    }

    .interview-page .quote-card>.photo-slot {
        height: 270px;
        margin-top: -64px;
    }

    .quote-card-copy {
        padding-inline: 20px;
    }

    .quote-card-profile span {
        font-size: 13px;
    }

    .quote-card-profile strong {
        font-size: 16px;
    }
}

.interview-more {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.7fr);
    gap: clamp(36px, 6vw, 88px);
    align-items: start;
    margin-block: clamp(64px, 8vw, 120px);
    padding: clamp(40px, 5vw, 72px);
    border-radius: 32px;
    background:
        radial-gradient(circle at 8% 92%, rgba(191, 229, 249, .44) 0 90px, transparent 91px),
        linear-gradient(135deg, #f7fbfe 0%, #eef8fd 100%);
}

.interview-more>header .lower-en {
    margin: 0 0 22px;
    color: #1470c7;
    font-family: var(--en);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .18em;
}

.interview-more>header h2 {
    margin: 0;
    color: #174f7f;
    font-size: clamp(28px, 2.3vw, 34px);
    line-height: 1.55;
    letter-spacing: .02em;
}

.interview-more-title-line {
    display: block;
}

.interview-more-title-phrase {
    display: inline-block;
    white-space: nowrap;
}

.interview-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.interview-more-grid article {
    min-height: 250px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid #cce5f4;
    border-radius: 22px;
    background: #fff;
}

.interview-more-grid span {
    display: block;
    margin-bottom: 26px;
    color: #67a9d8;
    font-family: var(--en);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .12em;
}

.interview-more-grid h3 {
    margin: 0 0 18px;
    color: #174f7f;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.65;
}

.interview-more-grid p {
    margin: 0;
    color: #557797;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

@media(max-width: 960px) {
    .interview-more {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 700px) {
    .interview-more {
        width: calc(100% - 32px);
        gap: 28px;
        padding: 32px 20px;
        border-radius: 24px;
    }

    .lower-section.interview-more {
        padding: 32px 20px;
    }

    .interview-more-grid {
        grid-template-columns: 1fr;
    }

    .interview-more-grid article {
        min-height: 0;
        padding: 24px;
    }
}

/* 2026-08 visual QA polish: PDF proportions with approved spacing overrides */
html {
    overflow-x: hidden
}

body {
    font-size: 16px;
    font-family: var(--jp);
    font-feature-settings: "palt";
    overflow-wrap: normal;
    word-break: normal;
    line-break: strict
}

.brand img,.footer-brand img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(93%) saturate(2265%) hue-rotate(190deg) brightness(89%) contrast(101%)
}

.section,.lower-section {
    max-width: 1280px;
}

.lower-main {
    background: radial-gradient(circle at 2% 12%,rgba(218,240,253,.62) 0 70px,transparent 72px), radial-gradient(circle at 98% 46%,rgba(229,245,254,.58) 0 92px,transparent 94px), linear-gradient(180deg,#fbfdff,#f4f9fd 48%,#fff)
}

.lower-main .entry-cta {
    width: min(88%,1280px)
}

.lower-section {
    padding: 88px 0
}

/* Keep the MORE ABOUT cards clear of the panel's rounded outer edge. */
.lower-section.interview-more {
    padding: clamp(40px, 5vw, 72px);
}

.lower-section-title {
    margin-bottom: 42px
}

.lower-section-title h2 {
    max-width: 24em;
    margin-inline:auto;text-wrap: balance
}

.lower-section-title span {
    max-width: 52em;
    margin-inline:auto}

.photo-slot.photo-filled {
    border: 0;
    background: #e6f2f8
}

.photo-slot.photo-filled img {
    object-fit: cover;
}

.wide-illustration {
    max-height: 450px
}

.soft-panel,.numbers-panel,.welfare-panel,.session-panel,.contact-panel,.message-panel,.facts-panel {
    box-shadow: 0 18px 46px rgba(24,93,145,.05)
}

.soft-panel .card-grid-4{
    margin: 30px;
}

.card-grid article,.process-grid article,.job-type-grid article,.interview-grid article,.member-grid article {
    box-shadow: 0 10px 26px rgba(24,93,145,.045)
}

.story-section h2,.talk-section h2,.lower-section-title h2 {
    letter-spacing: .035em
}

.story-section>div>p:not(.story-number),.talk-section .dialogue {
    max-width: 44em
}

.story-section>.photo-slot,.talk-section>.photo-slot {
    min-height: 320px;
}

.photo-feature>.photo-slot,.split-feature>.photo-slot,.crosstalk-panel>.photo-slot,.people-intro>.photo-slot {
    min-height: 400px
}

.crosstalk-panel>.photo-slot{
    width: 50vw;
    margin-right: calc(50% - 50vw)
}

.people-page .crosstalk-panel .lower-section-title,
.people-page .crosstalk-panel .lower-section-title h2,
.people-page .crosstalk-panel .lower-section-title span {
    text-align: left
}

.people-page .crosstalk-panel .lower-section-title h2,
.people-page .crosstalk-panel .lower-section-title span {
    margin-inline: 0
}

.interview-grid .photo-slot {
    min-height: 310px
}

.photo-mosaic .photo-slot {
    min-height: 230px
}

.detail-hero {
    min-height: 580px;
    padding-top: 85px;
    padding-bottom: 50px
}

.detail-hero>.photo-slot {
    min-height: 430px;
    height: 430px
}

.detail-hero h1 {
    font-size: clamp(30px,3vw,44px);
    word-break: keep-all;
    text-wrap: balance
}

.detail-hero dl {
    line-height: 1.7
}

.article-hero {
    min-height: 580px;
    padding-top: 85px;
    padding-bottom: 50px
}

.article-hero h1 {
    font-size: clamp(30px,3vw,44px);
    word-break: keep-all;
    text-wrap: balance
}

.news-list h3,.related-news {
    word-break: keep-all
}

.hero h1 .hero-line {
    display: block;
    white-space: nowrap;
    color: inherit
}

.hero h1 .hero-line em {
    color: var(--blue);
    font-style: normal
}

.hero h1 .hero-character {
    color: inherit
}

@media(min-width: 901px) {
    .lower-hero {
        height:580px;
        min-height: 580px;
        max-height: 580px
    }

    .lower-hero>img {
        height: 390px
    }

    .lower-hero-copy>p:last-child {
        line-height: 1.85
    }

    .detail-hero,.article-hero {
        height: auto;
        min-height: 580px;
    }
}

@media(max-width: 900px) {
    .section {
        padding: 48px 24px;
    }

    .lower-section {
        padding: 68px 0
    }

    .lower-hero {
        padding-top: 84px;
        padding-bottom: 42px;
        gap: 14px
    }

    .lower-hero>img {
        height: 250px
    }

    .lower-en,.lower-en-long {
        font-size: clamp(40px,9vw,54px)
    }

    .lower-hero h1 {
        font-size: clamp(28px,6vw,36px);
        margin: 18px 0 10px
    }

    .detail-hero,.article-hero {
        padding-top: 84px;
        padding-bottom: 42px;
        gap: 24px
    }

    .detail-hero>.photo-slot {
        height: auto;
        min-height: 380px
    }

    .story-section>.photo-slot,.talk-section>.photo-slot {
        min-height: 330px
    }
}

@media(max-width: 520px) {
    body {
        font-size:16px;
        line-height: 1.9
    }

    .header {
        padding-inline:18px}

    .hero {
        min-height: 580px;
        padding-left: 24px;
        padding-right: 24px
    }

    .hero h1 {
        font-size: clamp(29px,8.1vw,32px);
        letter-spacing: .025em;
        line-height: 1.55
    }

    .hero h1 .hero-line {
        white-space: nowrap
    }

    .hero-copy>p:last-of-type {
        font-size: 13px;
        line-height: 1.9
    }

    .lower-section {
        width: calc(100% - 36px);
        padding: 54px 0
    }

    .soft-panel, .numbers-panel, .welfare-panel, .session-panel, .contact-panel, .message-panel, .facts-panel {
    padding-left: clamp(24px, 5vw, 72px);
    padding-right: clamp(24px, 5vw, 72px);
    }

    .lower-hero {
        padding: 82px 18px 34px
    }

    .breadcrumb {
        margin-bottom: 16px
    }

    .lower-en,.lower-en-long {
        font-size: clamp(34px,10vw,42px);
        white-space: normal
    }

    .lower-jp {
        font-size: 14px
    }

    .lower-hero h1 {
        font-size: clamp(26px,7.4vw,32px);
        line-height: 1.5
    }

    .lower-hero h1 span {
        white-space: normal;
        text-wrap: balance
    }

    .lower-hero-copy>p:last-child {
        font-size: 15px;
        line-height: 1.8
    }

    .lower-hero>img {
        height: 210px
    }

    .detail-hero,.article-hero {
        padding: 82px 18px 36px
    }

    .detail-hero>.photo-slot {
        min-height: 330px;
        border-radius: 14px 58px 14px 58px
    }

    .detail-hero h1,.article-hero h1 {
        font-size: clamp(27px,7.6vw,34px)
    }

    .lower-section-title {
        margin-bottom: 28px
    }

    .lower-section-title h2 {
        font-size: clamp(25px,7vw,30px);
        text-align: left
    }

    .lower-section-title span {
        text-align: left;
        font-size: 15px
    }

    .photo-feature>.photo-slot,.split-feature>.photo-slot,.crosstalk-panel>.photo-slot,.people-intro>.photo-slot {
        min-height: 290px
    }

    .story-section>.photo-slot,.talk-section>.photo-slot {
        min-height: 280px
    }

    .interview-grid .photo-slot {
        min-height: 280px
    }

    .photo-mosaic .photo-slot {
        min-height: 230px
    }

    .application-panel>div {
        grid-template-columns: 1fr;
        padding: 22px
    }
}

/* TOP PEOPLE: intro column + interview cards from the approved PDF */
.people {
    padding-top: 105px;
    padding-bottom: 115px
}

.people-layout {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: clamp(42px,5vw,76px);
    align-items: start
}

.people-intro-copy {
    padding-top: 12px
}

.people-intro-copy h2 {
    font-size: clamp(32px,3vw,46px);
    line-height: 1.4;
    margin: 14px 0 12px
}

.people-title-line {
    display: block;
    width: 34px;
    height: 3px;
    margin: 0 0 34px;
    background: var(--yellow)
}

.people-intro-copy h3 {
    font-size: clamp(24px,2.2vw,32px);
    line-height: 1.75;
    letter-spacing: .035em;
    margin: 0 0 25px;
    white-space: nowrap
}

.people-intro-copy>p:last-child {
    font-size: 15px;
    line-height: 2;
    max-width: 29em;
    color: #55738d
}

.people-showcase {
    min-width: 0
}

.people-showcase-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    color: var(--blue);
    font-weight: 700
}

.people-showcase-head:after {
    content: "";
    height: 1px;
    flex: 1;
    background: #b9ddec;
    order: 1
}

.people-showcase-head>span {
    order: 0;
    font-size: 15px;
    letter-spacing: .08em;
    white-space: nowrap
}

.people-showcase-head>span:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    border: 1.5px solid currentColor;
    border-radius: 50% 50% 42% 42%;
    background: radial-gradient(circle at 50% 28%,currentColor 0 2px,transparent 2.5px)
}

.people-showcase-head>a {
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    white-space: nowrap
}

.people-showcase-head b,.people-card-copy>a b {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--yellow)
}

.people-showcase-head b:after,.people-card-copy>a b:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid var(--blue);
    border-right: 1.5px solid var(--blue);
    rotate: 45deg
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-top: 0
}

.people-grid article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbeaf3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(25,93,143,.045)
}

.people-grid article>.photo-slot {
    height: 230px;
    min-height: 230px;
    border-radius: 8px 8px 0 0
}

.people-grid article>.photo-slot img {
    object-fit: cover
}

.people-grid .people-card-kobayashi>.photo-slot img {
    object-position: center 24%
}

.people-card-copy {
    height: auto!important;
    min-height: 210px;
    padding: 15px 16px 14px;
    background: #fff!important;
    border-radius: 0!important;
    display: flex;
    flex-direction: column
}

.people-grid small {
    margin: 0 0 9px;
    font-size: 11px;
    color: var(--blue)
}

.people-grid h3 {
    min-height: 0;
    margin: 0 0 9px;
    font-size: 16px;
    line-height: 1.65
}

.people-card-copy>p {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.75;
    color: #55738d
}

.people-card-copy>a {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    font: 700 11px var(--jp);
    color: var(--deep)
}

.people-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 17px
}

.people-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7dce9
}

.people-dots i:first-child {
    background: var(--blue)
}

.people .crosstalk {
    position: relative;
    margin-top: 72px;
    grid-template-columns: 1.22fr .78fr;
    min-height: 350px;
    border: 1px solid #d8eaf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(25,93,143,.055);
    isolation: isolate
}

.people .crosstalk:after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 24px;
    top: 28px;
    width: 54px;
    height: 54px;
    opacity: .28;
    background-image: radial-gradient(circle,var(--blue) 0 2px,transparent 2.5px);
    background-size: 14px 14px;
    pointer-events: none
}

.people .crosstalk>.photo-slot {
    height: 350px;
    min-height: 350px;
    padding: 0!important;
    margin: 0;
    border: 0;
    border-radius: 12px 92px 92px 12px;
    background: transparent;
    overflow: hidden
}

.people .crosstalk>.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%
}

.people .crosstalk>div {
    position: relative;
    z-index: 3;
    padding: 32px 42px
}

.people .crosstalk h2 {
    margin: 10px 0 18px;
    font-size: 30px
}

.people .crosstalk ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px
}

.people .crosstalk li {
    padding: 7px 12px;
    border: 1px solid #b9ddec;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700
}

.people .crosstalk .pill {
    height: 48px;
    min-width: 230px;
    width: fit-content;
    padding-left: 24px
}

@media(max-width: 1100px) and (min-width:901px) {
    .people-layout {
        grid-template-columns:260px minmax(0,1fr);
        gap: 34px
    }

    .people-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .people-grid article:last-child {
        display: none
    }

    .people-intro-copy h3 {
        font-size: 25px
    }
}

@media(max-width: 900px) {
    .people-layout {
        grid-template-columns:1fr
    }

    .people-intro-copy {
        max-width: 34em
    }

    .people-intro-copy h3 {
        white-space: normal
    }

    .people-grid {
        grid-template-columns: 1fr 1fr
    }

    .people-grid article>.photo-slot {
        height: 280px
    }

    .people .crosstalk {
        grid-template-columns: 1fr
    }

    .people .crosstalk>.photo-slot {
        height: 330px;
        min-height: 0;
        border-radius: 12px 12px 70px 12px
    }
}

@media(max-width: 520px) {
    .people {
        padding:72px 18px
    }

    .people-layout {
        gap: 34px
    }

    .people-intro-copy h2 {
        font-size: 34px
    }

    .people-intro-copy h3 {
        font-size: 25px;
        line-height: 1.65
    }

    .people-showcase-head:after {
        display: none
    }

    .people-showcase-head {
        align-items: flex-start;
        justify-content: space-between
    }

    .people-showcase-head>a {
        font-size: 10px;
        white-space: normal;
        text-align: right
    }

    .people-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 18px 14px;
        margin-inline:-18px;scrollbar-width: none
    }

    .people-grid::-webkit-scrollbar {
        display: none
    }

    .people-grid article {
        flex: 0 0 82%;
        scroll-snap-align: start
    }

    .people-grid article>.photo-slot {
        height: 300px
    }

    .people-card-copy {
        min-height: 195px
    }

    .people .crosstalk {
        margin-top: 54px
    }

    .people .crosstalk>.photo-slot {
        height: clamp(200px,56vw,230px);
        min-height: 0
    }

    .people .crosstalk>div {
        padding: 28px 22px
    }

    .people .crosstalk h2 {
        font-size: 27px
    }
}

/* TOP ABOUT: broad gradient and design-shaped image mask */
.about {
    position: relative;
    isolation: isolate;
    padding-top: 110px;
    background: linear-gradient(128deg,#f8fcff 0%,#edf8ff 38%,#f5fbff 66%,#fff 100%)
}

.about:after {
    display: none
}

.about-hero {
    grid-template-columns: minmax(340px,.72fr) minmax(0,1.28fr);
    gap: 0;
    min-height: 560px;
    padding-top: 10px;
    padding-bottom: 75px;
    align-items: center
}

.about-hero>div {
    position: relative;
    z-index: 3;
}

.about-photo {
    position: relative;
    z-index: 1;
    width: calc(100% + 7vw);
    height: 520px;
    margin-right: -7vw;
    border-radius: 0 0 0 300px;
}

.about-photo img {
    object-fit: cover;
    object-position: center 55%
}

@media(max-width: 900px) {
    .about {
        padding-top:82px;
        padding-bottom: 0;
    }

    .about-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: 0
    }

    .about-hero>div {
        padding-right: 0
    }

    .about-photo {
        width: 100%;
        height: 390px;
        border-radius: 0 50px;
    }
}

@media(max-width: 520px) {
    .about {
        padding-top:72px
    }

    .about-hero {
        padding-bottom: 48px
    }

    .about-photo {
        height: 270px;
        clip-path: polygon(0 0,100% 0,100% 100%,18% 100%,11% 96%,7% 88%,4% 74%,2% 52%);
        border-radius: 0 38px 12px 0
    }
}

/* TOP ABOUT detail links: alternating, slanted cards from the approved design */
.about-detail {
    position: relative;
    z-index: 2;
    width: min(1160px,calc(100% - 48px));
    margin: 0 auto;
    padding: 0;
}

.about-detail-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 52px
}

.about-detail-head>div>p {
    margin: 0 0 18px;
    font: 700 14px/1.2 var(--en);
    letter-spacing: .14em;
    color: var(--blue)
}

.about-detail-head h2 {
    margin: 0;
    font-size: clamp(34px,3.2vw,48px);
    line-height: 1.45;
    letter-spacing: .055em;
    color: var(--deep)
}

.about-detail-head>p {
    margin: 0 0 9px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    color: var(--deep)
}

.about-detail-grid {
    display: grid;
    gap: 34px
}

.about-detail-grid article {
    display: grid;
    grid-template-columns: 45% 55%;
    height: 290px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(26,92,142,.055)
}

.about-detail-grid article:nth-of-type(odd) {
    border-radius: 12px 58px 12px 12px;
}

.about-detail-grid article:nth-of-type(even) {
    border-radius: 58px 12px 12px 12px;
}


.about-card-copy {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr);
    align-items: center;
    padding: 38px 36px 34px 44px;
    background: #fff
}

.about-card-copy>b {
    align-self: start;
    margin-top: 9px;
    font: 700 52px/1 var(--en);
    color: var(--blue)
}

.about-card-copy small {
    display: block;
    margin: 0 0 5px;
    font: 700 14px/1.2 var(--en);
    letter-spacing: .11em;
    color: var(--blue)
}

.about-card-copy h3 {
    margin: 0 0 18px;
    font-size: 32px;
    line-height: 1.35;
    letter-spacing: .04em;
    color: var(--deep)
}

.about-card-copy p {
    max-width: 31em;
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.85;
    color: #234963
}

.about-card-copy a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue)
}

.about-card-copy a i {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid var(--blue);
    border-radius: 50%
}

.about-card-copy a i:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid var(--blue);
    border-right: 1.5px solid var(--blue);
    transform: rotate(45deg)
}

.about-detail-grid article>.photo-slot {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: #dfeef6
}

.about-detail-grid article>.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-detail-grid article:nth-child(odd)>.photo-slot {
    clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
    border-radius: 0 58px 12px 0
}

.about-detail-grid article:nth-child(even)>.photo-slot {
    grid-column: 1;
    grid-row: 1;
    clip-path: polygon(0 0,88% 0,100% 100%,0 100%);
    border-radius: 58px 0 0 12px
}

.about-detail-grid article:nth-child(even)>.about-card-copy {
    grid-column: 2;
    grid-row: 1;
    padding-left: 58px
}

.about-detail-grid article:nth-child(1)>.photo-slot img {
    object-position: center 48%
}

.about-detail-grid article:nth-child(2)>.photo-slot img {
    object-position: center 50%
}

.about-detail-grid article:nth-child(3)>.photo-slot img {
    object-position: center 52%
}

@media(max-width: 900px) {
    .about-detail {
        width:calc(100% - 48px);
        padding: 10px 0 88px
    }

    .about-detail-head {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 38px
    }

    .about-detail-head>p {
        max-width: 38em
    }

    .about-detail-grid article {
        grid-template-columns: 1fr;
        height: auto
    }

    .about-card-copy,.about-detail-grid article:nth-child(even)>.about-card-copy {
        grid-column: 1;
        grid-row: 1;
        padding: 34px 30px
    }

    .about-detail-grid article>.photo-slot, .about-detail-grid article:nth-child(even)>.photo-slot, .about-detail-grid article:nth-child(odd)>.photo-slot {
        grid-column: 1;
        grid-row: 2;
        height: 290px;
        clip-path: none;
        border-radius: 0 0 12px 12px
    }
}

@media(max-width: 520px) {
    .about-detail {
        width:calc(100% - 36px);
        padding-bottom: 68px
    }

    .about-detail-head h2 {
        font-size: 29px;
        line-height: 1.55
    }

    .about-detail-head>p {
        font-size: 14px;
        line-height: 1.9
    }

    .about-detail-head>p br {
        display: none
    }

    .about-detail-grid {
        gap: 22px
    }

    .about-card-copy,.about-detail-grid article:nth-child(even)>.about-card-copy {
        grid-template-columns: 54px minmax(0,1fr);
        padding: 28px 22px 24px
    }

    .about-card-copy>b {
        font-size: 37px
    }

    .about-card-copy h3 {
        font-size: 26px;
        margin-bottom: 12px
    }

    .about-card-copy p {
        font-size: 14px;
        line-height: 1.8
    }

    .about-detail-grid article>.photo-slot,.about-detail-grid article:nth-child(even)>.photo-slot {
        height: 220px
    }
}

/* TOP ENVIRONMENT: intro panel + eight compact support cards */
.environment-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(340px,.72fr) minmax(0,1.8fr);
    gap: clamp(28px,3.5vw,58px);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 120px clamp(28px,5vw,82px);
    overflow: hidden;
    background: linear-gradient(135deg,#fff 0%,#f8fcff 45%,#fff 100%)
}

.environment-top:before,.environment-top:after {
    content: "";
    position: absolute;
    pointer-events: none
}

.environment-top:before {
    left: 1.5%;
    top: 3%;
    width: 230px;
    height: 190px;
    opacity: .38;
    background-image: radial-gradient(circle,rgba(93,177,226,.26) 0 2px,transparent 2.5px);
    background-size: 19px 19px;
    mask-image: linear-gradient(135deg,#000,transparent 75%)
}

.environment-top:after {
    right: 1%;
    bottom: 5%;
    width: 190px;
    height: 150px;
    opacity: .28;
    background: repeating-linear-gradient(135deg,rgba(80,163,218,.4) 0 2px,transparent 2px 12px);
    clip-path: polygon(55% 0,100% 0,100% 100%,0 100%)
}

.environment-intro,.environment-cards,.environment-numbers {
    position: relative;
    z-index: 1
}

.environment-intro {
    align-self: start;
    max-width: 460px;
    padding: 14px 0 10px
}

.environment-rule {
    display: block;
    width: 30px;
    height: 2px;
    margin: 18px 0 27px;
    background: #9abbd3
}

.environment-intro h2 {
    margin: 0 0 28px;
    font-size: clamp(34px,3.1vw,45px);
    line-height: 1.55;
    letter-spacing: .035em;
    color: var(--deep)
}

.environment-intro h2 span {
    display: block;
    white-space: nowrap
}

.environment-intro>p:not(.label) {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    color: #294a64
}

.environment-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%,340px);
    height: 64px;
    margin-top: 42px;
    padding: 0 24px 0 30px;
    border: 1px solid #75add2;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--deep);
    background: rgba(255,255,255,.72)
}

.environment-link i {
    position: relative;
    width: 26px;
    height: 26px
}

.environment-link i:before,.environment-link i:after {
    content: "";
    position: absolute
}

.environment-link i:before {
    left: 1px;
    right: 2px;
    top: 12px;
    height: 1px;
    background: var(--blue)
}

.environment-link i:after {
    right: 2px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid var(--blue);
    border-right: 1.5px solid var(--blue);
    transform: rotate(45deg)
}

.environment-cards {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    width: 100%;
    min-width: 0;
    gap: 18px
}

.environment-cards article {
    min-width: 0;
    min-height: 300px;
    padding: 28px 22px 24px;
    text-align: center;
    border: 0;
    border-radius: 5px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 34px rgba(30,92,137,.065)
}

.environment-cards img {
    width: 118px;
    height: 104px;
    margin: 0 auto 18px;
    object-fit: contain;
    transform: none;
    filter: brightness(0) saturate(100%) invert(31%) sepia(93%) saturate(1348%) hue-rotate(181deg) brightness(91%) contrast(96%)
}

.environment-cards h3 {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: .02em;
    color: #3977a9
}

.environment-cards p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.85;
    color: #3f5364
}

.environment-numbers {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 28px
}

.environment-data {
    position: relative;
    z-index: 1;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 34px;
    margin-top: 52px;
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(135deg,rgba(238,249,255,.92),rgba(250,253,255,.95));
    box-shadow: 0 15px 45px rgba(26,92,142,.045)
}

.environment-base {
    position: relative;
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    align-items: center;
    min-height: 410px;
    overflow: hidden
}

.environment-base:after {
    content: "";
    position: absolute;
    right: 2%;
    top: 5%;
    width: 80px;
    height: 80px;
    opacity: .26;
    background-image: radial-gradient(circle,var(--blue) 0 2px,transparent 2.5px);
    background-size: 14px 14px
}

.environment-base-copy {
    position: relative;
    z-index: 2;
    padding: 18px 0 18px 8px
}

.environment-base-copy>p:first-child,.environment-stats>h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--deep)
}

.environment-base-copy>span,.environment-stats-rule {
    display: block;
    width: 28px;
    height: 2px;
    margin: 11px 0 22px;
    background: #8db8d7
}

.environment-base-copy h3 {
    margin: 0 0 22px;
    font-size: clamp(24px,2.05vw,30px);
    line-height: 1.55;
    letter-spacing: .035em;
    color: #3977a9
}

.environment-base-copy h3 span {
    display: block;
    white-space: nowrap
}

.environment-base-copy>p:nth-of-type(2) {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 2;
    color: #354f63
}

.environment-base-copy>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%,310px);
    height: 58px;
    margin-top: 28px;
    padding: 0 22px;
    border: 1px solid #75add2;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    font-size: 13px;
    color: var(--deep)
}

.environment-base-copy>a i,.environment-stats-link i {
    position: relative;
    width: 24px;
    height: 24px
}

.environment-base-copy>a i:before,.environment-base-copy>a i:after,.environment-stats-link i:before,.environment-stats-link i:after {
    content: "";
    position: absolute
}

.environment-base-copy>a i:before,.environment-stats-link i:before {
    left: 1px;
    right: 2px;
    top: 11px;
    height: 1px;
    background: currentColor
}

.environment-base-copy>a i:after,.environment-stats-link i:after {
    right: 2px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg)
}

.environment-base>img {
    position: relative;
    z-index: 1;
    width: 120%;
    max-width: none;
    margin-left: -15%;
    transform: scale(1.08);
    object-fit: contain
}

.environment-stats {
    padding: 28px 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(26,92,142,.07)
}

.environment-stats>h3 {
    font-size: clamp(20px,1.65vw,26px);
    letter-spacing: .035em
}

.environment-stats>h3 small {
    font-size: 11px;
    font-weight: 500
}

.environment-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px
}

.environment-stats-grid article {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    min-height: 116px;
    padding: 16px 12px;
    border-bottom: 1px solid #dbe8ef
}

.environment-stats-grid article:nth-child(odd) {
    border-right: 1px solid #dbe8ef
}

.environment-stats-grid article:nth-child(n+3) {
    border-bottom: 0
}

.environment-stats-grid img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: invert(30%) sepia(85%) saturate(1479%) hue-rotate(183deg) brightness(92%) contrast(98%)
}

.environment-stats-grid p {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    color: #2a4357
}

.environment-stats-grid strong {
    font: 800 46px/1.05 var(--en);
    letter-spacing: .02em;
    color: var(--blue)
}

.environment-stats-grid strong small {
    display: inline-block;
    margin-left: 3px;
    font: 700 10px var(--jp);
    white-space: nowrap;
    color: var(--deep)
}

.environment-stats-grid em {
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.7;
    color: #2a4357
}

.environment-stats-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding: 0 24px 0 30px;
    border-radius: 999px;
    background: var(--blue);
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

@media(max-width: 1100px) {
    .environment-top {
        grid-template-columns:minmax(0,1fr);
        gap: 28px;
        padding-inline:32px}

    .environment-cards {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .environment-cards article:nth-child(n+7) {
        display: block
    }

    .environment-data {
        grid-template-columns: 1fr;
        padding: 28px
    }

    .environment-base {
        min-height: 360px
    }

    .environment-base>img {
        width: 105%;
        margin-left: -5%
    }
}

@media(max-width: 900px) {
    .environment-top {
        grid-template-columns:minmax(0,1fr);
        padding: 86px 24px
    }

    .environment-intro {
        max-width: 38em
    }

    .environment-intro .label {
        font-size: 42px
    }

    .environment-intro h2 {
        font-size: 38px
    }

    .environment-cards {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .environment-cards article:nth-child(n) {
        display: block
    }

    .environment-numbers {
        grid-column: 1
    }

    .environment-data {
        grid-column: 1;
        margin-top: 30px
    }
}

@media(max-width: 520px) {
    .environment-top {
        padding:72px 18px
    }

    .environment-intro .label {
        font-size: 34px
    }

    .environment-intro h2 {
        font-size: 30px
    }

    .environment-intro h2 span {
        white-space: normal
    }

    .environment-intro>p:not(.label) {
        font-size: 14px
    }

    .environment-intro>p br {
        display: none
    }

    .environment-link {
        width: 100%;
        margin-top: 30px;
        padding-left: 22px;
        font-size: 13px
    }

    .environment-cards {
        gap: 12px
    }

    .environment-cards article {
        min-height: 245px;
        padding: 22px 13px 18px
    }

    .environment-cards img {
        width: 92px;
        height: 82px;
        margin-bottom: 13px;
        transform: none
    }

    .environment-cards h3 {
        font-size: 14px
    }

    .environment-cards p {
        font-size: 11px;
        line-height: 1.75
    }

    .environment-data {
        padding: 18px;
        border-radius: 20px
    }

    .environment-base {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .environment-base-copy {
        padding: 12px 4px
    }

    .environment-base-copy h3 {
        font-size: 26px
    }

    .environment-base-copy h3 span {
        white-space: normal
    }

    .environment-base-copy>p:nth-of-type(2) {
        font-size: 12px
    }

    .environment-base-copy>p br {
        display: none
    }

    .environment-base>img {
        width: 118%;
        margin: 5px -9% 0
    }

    .environment-stats {
        padding: 24px 16px
    }

    .environment-stats-grid article {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 105px;
        padding: 16px 7px;
        text-align: center
    }

    .environment-stats-grid img {
        width: 36px;
        height: 36px;
        margin-bottom: 8px
    }

    .environment-stats-grid article > div {
        width: 100%;
        text-align: center
    }

    .environment-stats-grid strong {
        font-size: 38px
    }

    .environment-stats-link {
        padding-inline:20px;font-size: 13px
    }
}

/* TOP MOVIE: featured recruitment film + employee movie cards */
.movie-top {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 110px max(40px,calc((100vw - 1180px)/2));
    overflow: hidden;
    background: linear-gradient(135deg,#fff 0%,#f7fbfe 55%,#fff 100%)
}

.movie-top:before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 0;
    background: radial-gradient(circle at 96% 7%,rgba(224,242,252,.72) 0 120px,transparent 122px);
    opacity: .7
}

.movie-top:after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 13%;
    top: 25px;
    width: 250px;
    height: 110px;
    opacity: .35;
    background-image: radial-gradient(circle,rgba(45,137,199,.35) 0 2px,transparent 2.5px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg,transparent,#000 35%,transparent)
}

.movie-top>* {
    position: relative;
    z-index: 1
}

.movie-top-head {
    margin-bottom: 42px
}

.movie-top-head>span {
    display: block;
    width: 30px;
    height: 2px;
    margin: 17px 0 25px;
    background: #91b8d3
}

.movie-top-head h2 {
    margin: 0 0 18px;
    font-size: clamp(34px,3.4vw,48px);
    line-height: 1.45;
    letter-spacing: .045em;
    color: var(--deep)
}

.movie-top-head>p:last-child {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    color: #324b5e
}

.movie-feature {
    display: grid;
    grid-template-columns: 1.55fr .75fr;
    gap: 48px;
    align-items: center
}

.movie-top .movie-main {
    position: relative;
    height: 460px;
    overflow: hidden;
    border-radius: 8px 58px 8px 8px;
    background: #dcecf5
}

.movie-top .movie-main>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #061827
}

.movie-top .movie-main:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(transparent,rgba(3,29,48,.45));
    pointer-events: none
}

.movie-top .movie-main .movie-video-trigger,
.movie-card-grid .movie-video-trigger {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    translate: none;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer
}

.movie-play-icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 7px 24px rgba(4,51,91,.15);
    transition: transform .25s ease, box-shadow .25s ease
}

.movie-video-trigger:hover .movie-play-icon,
.movie-video-trigger:focus-visible .movie-play-icon {
    transform: scale(1.07);
    box-shadow: 0 10px 30px rgba(4,51,91,.24)
}

.movie-video-trigger:focus-visible {
    outline: 3px solid #ffd400;
    outline-offset: -5px
}

.movie-play-icon i {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 19px solid var(--blue)
}

.movie-top .movie-main strong {
    z-index: 2;
    left: 28px;
    bottom: 32px;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(3,47,85,.45)
}

.movie-progress {
    position: absolute;
    z-index: 3;
    left: 28px;
    right: 28px;
    bottom: 18px;
    height: 3px;
    background: linear-gradient(90deg,var(--blue) 0 36%,rgba(255,255,255,.8) 36%)
}

.movie-feature-copy>p:first-child {
    margin: 0 0 12px;
    font: 700 13px/1.2 var(--en);
    letter-spacing: .16em;
    color: var(--blue)
}

.movie-feature-copy h3 {
    margin: 0;
    font-size: clamp(28px,2.5vw,37px);
    letter-spacing: .055em;
    color: var(--deep)
}

.movie-feature-copy>span {
    display: block;
    width: 30px;
    height: 2px;
    margin: 16px 0 24px;
    background: #8fb8d4
}

.movie-feature-copy>p:nth-of-type(2) {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    color: #314b60
}

.movie-feature-copy>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 58px;
    margin-top: 40px;
    border: 1px solid #75add2;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue)
}

.movie-feature-copy>a>i {
    position: relative;
    width: 25px;
    height: 25px;
    border: 1px solid currentColor;
    border-radius: 50%
}

.movie-feature-copy>a>i:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid currentColor
}

.movie-feature-copy>a small {
    font-size: 11px
}

.movie-feature-copy .movie-preparing,
.movie-feature-copy .movie-available {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    margin-top: 40px;
    border: 1px solid #b8d5e8;
    border-radius: 999px;
    color: #66839a;
    font-size: 13px;
    font-weight: 700;
}

.movie-feature-copy .movie-available {
    border-color: #75add2;
    color: var(--blue)
}

.movie-card-status {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
}

/* WordPress content integration */
.news-card-image {
    display: block;
    overflow: hidden;
    border-radius: 22px;
}

.news-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.news-card-image:hover img {
    transform: scale(1.025);
}

.article-featured-image {
    margin: 0 0 clamp(30px, 5vw, 64px);
}

.article-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: cover;
    border-radius: 28px;
}

.entry-content > * {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

.entry-content > .alignwide {
    max-width: 1220px;
}

.entry-content > .alignfull {
    max-width: none;
}

.entry-content img,
.entry-content video,
.entry-content iframe {
    max-width: 100%;
    height: auto;
}

.entry-content figure {
    margin-top: clamp(28px, 4vw, 54px);
    margin-bottom: clamp(28px, 4vw, 54px);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #075aaf;
    line-height: 1.55;
}

.entry-content h2 {
    margin-top: clamp(48px, 7vw, 90px);
    font-size: clamp(28px, 3.2vw, 46px);
}

.entry-content h3 {
    margin-top: clamp(36px, 5vw, 64px);
    font-size: clamp(22px, 2.4vw, 34px);
}

.entry-content p,
.entry-content li {
    line-height: 2;
}

.article-nav > span {
    min-width: 0;
}

.article-nav > span:last-child {
    text-align: right;
}

.empty-message {
    padding: 80px 20px;
    text-align: center;
}

@media (max-width: 767px) {
    .article-featured-image img {
        max-height: 58vw;
        border-radius: 18px;
    }

    .article-nav {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-nav > span,
    .article-nav > span:last-child {
        width: 100%;
        text-align: center;
    }

    .article-nav a {
        display: block;
        overflow-wrap: anywhere;
    }
}

.movie-employees {
    display: grid;
    grid-template-columns: 250px minmax(0,1fr);
    gap: 40px;
    margin-top: 76px;
    padding: 36px;
    border-radius: 16px;
    background: rgba(242,249,253,.92)
}

.movie-employees-intro h3 {
    margin: 0 0 18px;
    font-size: 26px;
    color: #3977a9
}

.movie-employees-intro p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;
    color: #314b60
}

.movie-employees-intro>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    margin-top: 30px;
    padding: 0 18px 0 24px;
    border: 1px solid #75add2;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    background: #fff
}

.movie-employees-intro>a i,.movie-card-grid article>a i {
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg)
}

.movie-card-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    width: 100%;
    min-width: 0;
    gap: 14px
}

.movie-card-grid article {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 9px 26px rgba(25,93,143,.055)
}

.movie-card-grid article>div {
    position: relative;
    height: 145px;
    overflow: hidden
}

.movie-card-grid article>div>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #061827
}

.movie-card-grid .movie-play-icon {
    width: 48px;
    height: 48px
}

.movie-card-grid .movie-play-icon i {
    margin-left: 4px;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px
}

.movie-card-grid article>div>small {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 10px;
    border-radius: 0 0 7px;
    background: var(--blue);
    font-size: 9px;
    color: #fff
}

.movie-card-grid article>p {
    margin: 12px 14px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #5a91b8
}

.movie-card-grid h4 {
    min-height: 42px;
    margin: 0 38px 13px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--deep)
}

body.video-modal-open {
    overflow: hidden
}

body.video-modal-open main {
    z-index: 100;
    overflow: visible
}

.video-modal[hidden] {
    display: none
}

.video-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 32px;
    isolation: isolate
}

.video-modal-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(2,17,31,.88);
    cursor: pointer
}

.video-modal-dialog {
    position: relative;
    width: min(1120px,100%);
    max-height: calc(100dvh - 64px)
}

.video-modal-dialog.is-portrait {
    width: min(480px,calc((100dvh - 112px)*.5625),100%)
}

.video-modal-player {
    display: block;
    width: 100%;
    max-height: calc(100dvh - 112px);
    aspect-ratio: 16/9;
    border-radius: 12px;
    background: #000;
    object-fit: contain;
    box-shadow: 0 28px 80px rgba(0,0,0,.42)
}

.video-modal-dialog.is-portrait .video-modal-player {
    aspect-ratio: 9/16
}

.video-modal-dialog h3 {
    margin: 12px 52px 0 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.5
}

.video-modal-close {
    position: absolute;
    z-index: 2;
    right: -14px;
    top: -14px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    cursor: pointer
}

.video-modal-close span:before,
.video-modal-close span:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 22px;
    width: 20px;
    height: 2px;
    background: var(--deep)
}

.video-modal-close span:before { transform: rotate(45deg) }
.video-modal-close span:after { transform: rotate(-45deg) }

.video-modal-close:focus-visible {
    outline: 3px solid #ffd400;
    outline-offset: 3px
}

.movie-card-grid article>a {
    position: absolute;
    right: 15px;
    bottom: 20px;
    display: grid;
    place-items: center;
    color: var(--blue)
}

@media(max-width: 900px) {
    .movie-top {
        width:100%;
        padding: 84px 24px
    }

    .movie-feature {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .movie-top .movie-main {
        height: 390px
    }

    .movie-feature-copy {
        max-width: 38em
    }

    .movie-employees {
        grid-template-columns: 1fr;
        padding: 28px
    }

    .movie-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .movie-card-grid article>div {
        height: 220px
    }
}

@media(max-width: 520px) {
    .movie-top {
        padding:72px 18px
    }

    .movie-top-head .label {
        font-size: 34px
    }

    .movie-top-head h2 {
        font-size: 30px
    }

    .movie-top-head>p:last-child {
        font-size: 14px
    }

    .movie-top-head>p br,.movie-feature-copy p br {
        display: none
    }

    .movie-top .movie-main {
        height: 260px;
        border-radius: 7px 38px 7px 7px
    }

    .movie-top .movie-main .movie-play-icon {
        width: 62px;
        height: 62px
    }

    .movie-top .movie-main strong {
        font-size: 18px
    }

    .movie-feature-copy>a {
        margin-top: 28px
    }

    .movie-employees {
        margin-top: 52px;
        padding: 22px 16px
    }

    .movie-card-grid {
        gap: 12px
    }

    .movie-card-grid article>div {
        height: clamp(96px,32vw,140px)
    }

    .movie-card-grid h4 {
        font-size: 12px
    }

    .video-modal {
        padding: 18px
    }

    .video-modal-dialog {
        width: 100%;
        max-height: calc(100dvh - 36px)
    }

    .video-modal-player {
        max-height: calc(100dvh - 90px);
        border-radius: 8px
    }

    .video-modal-close {
        right: -8px;
        top: -52px
    }
}

/* TOP FLOW: full-height photo + six-step selection journey */
.flow-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr);
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: 1040px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg,#fff 0%,#f1f9fe 58%,#fbfdff 100%)
}

.flow-top:after {
    content: "";
    position: absolute;
    right: 2%;
    top: 7%;
    width: 170px;
    height: 120px;
    opacity: .3;
    background-image: radial-gradient(circle,rgba(49,145,204,.35) 0 2px,transparent 2.5px);
    background-size: 17px 17px;
    mask-image: linear-gradient(135deg,transparent,#000 45%,transparent)
}

.flow-top-photo {
    position: relative;
    z-index: 1;
    align-self: stretch;
    height: 100%;
    min-height: 1040px;
    overflow: hidden;
    border-radius: 0 130px 130px 0
}

.flow-top-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.flow-top-content {
    position: relative;
    z-index: 2;
    padding: 86px max(40px,calc((100vw - 1380px)/2 + 30px)) 80px 54px
}

.flow-top-content>header {
    position: relative;
    margin: 0 0 38px
}

.flow-top-content .label {
    margin: 0 0 6px;
    font-size: 18px;
    letter-spacing: .12em
}

.flow-top-content>header>span {
    font-size: 13px;
    font-weight: 700;
    color: #3977a9
}

.flow-top-content h2 {
    margin: 25px 0 17px;
    font-size: clamp(36px,3.8vw,48px);
    line-height: 1.45;
    letter-spacing: .055em;
    color: var(--deep)
}

.flow-top-content>header>p:last-child {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    color: #345066
}

.flow-step-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
    min-width: 0;
    gap: 24px 28px;
    list-style: none;
    margin: 0;
    padding: 0
}

.flow-step-grid li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 240px;
    padding: 34px 20px 22px;
    text-align: center;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(26,92,142,.065)
}

.flow-step-grid li>b {
    position: absolute;
    left: 50%;
    top: -20px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    translate: -50% 0;
    border-radius: 50%;
    background: var(--blue);
    font: 700 13px var(--en);
    color: #fff
}

.flow-step-grid li>img {
    width: 86px;
    height: 68px;
    margin: 10px auto 12px;
    object-fit: contain;
    filter: invert(30%) sepia(85%) saturate(1479%) hue-rotate(183deg) brightness(92%) contrast(98%)
}

.flow-step-grid h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--deep);
    line-break: strict;
    word-break: normal;
    word-break: auto-phrase;
    text-wrap: balance
}

.flow-step-grid p {
    width: 100%;
    margin: auto 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
    color: #4d6578;
    line-break: strict;
    word-break: normal;
    word-break: auto-phrase;
    overflow-wrap: normal;
    text-wrap: pretty
}

.flow-step-grid li>i {
    position: absolute;
    z-index: 3;
    right: -20px;
    top: 50%;
    width: 38px;
    height: 38px;
    translate: 0 -50%;
    border: 1px solid #71acd2;
    border-radius: 50%;
    background: #fff
}

.flow-step-grid li>i:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--blue);
    border-right: 1.5px solid var(--blue);
    transform: rotate(45deg)
}

.flow-step-grid li:nth-child(3)>i {
    display: none
}

.flow-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 38px
}

.flow-actions>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 17px 0 28px;
    border: 1px solid #75add2;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue)
}

.flow-actions>a.is-mynavi {
    border-color: var(--yellow);
    background: var(--yellow);
    color: var(--deep)
}

.flow-actions>a>i {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 50%
}

.flow-actions>a>i:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg)
}

@media(max-width: 1100px) {
    .flow-top {
        grid-template-columns:34% 66%
    }

    .flow-top-content {
        padding-left: 36px;
        padding-right: 28px
    }

    .flow-step-grid {
        gap: 24px 18px
    }

    .flow-step-grid li {
        padding-inline:13px}
}

@media(max-width: 900px) {
    .flow-top {
        grid-template-columns:1fr;
        min-height: 0;
        padding: 78px 24px
    }

    .flow-top-photo {
        height: 440px;
        min-height: 0;
        border-radius: 18px 80px 18px 18px;
        clip-path: none
    }

    .flow-top-content {
        padding: 48px 0 0
    }

    .flow-top-content>header:after {
        display: none
    }

    .flow-step-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .flow-step-grid li:nth-child(3)>i {
        display: block
    }

    .flow-step-grid li:nth-child(even)>i {
        display: none
    }
}

@media(max-width: 520px) {
    .flow-top {
        padding:68px 18px
    }

    .flow-top-photo {
        height: clamp(210px,58vw,230px);
        border-radius: 14px 54px 14px 14px
    }

    .flow-top-content {
        padding-top: 38px
    }

    .flow-top-content h2 {
        font-size: 32px
    }

    .flow-top-content>header>p:last-child {
        font-size: 13px
    }

    .flow-top-content>header>p br {
        display: none
    }

    .flow-step-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 34px 12px
    }

    .flow-step-grid li {
        min-height: 0;
        padding: 28px 10px 16px
    }

    .flow-step-grid li>b {
        top: -18px;
        width: 42px;
        height: 42px;
        font-size: 12px
    }

    .flow-step-grid li>img {
        width: 68px;
        height: 54px;
        margin: 9px auto 10px
    }

    .flow-step-grid h3 {
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.5
    }

    .flow-step-grid p {
        margin-top: 10px;
        font-size: 10px;
        line-height: 1.7;
        overflow-wrap: anywhere
    }

    .flow-step-grid li>i {
        display: none!important
    }

    .flow-actions {
        grid-template-columns: 1fr
    }
}

/* Compact latest news directly below the home hero. */
.home-news { background:#fff; padding:clamp(36px,4vw,64px) 6vw }
.home-news-inner { max-width:1120px; margin-inline:auto; display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start }
.home-news-heading .label { margin:0 0 10px; color:var(--blue); font:700 13px/1.4 var(--en); letter-spacing:.16em }
.home-news-heading h2 { margin:0; color:var(--deep); font-size:clamp(26px,2.4vw,34px); line-height:1.5 }
.home-news-list { list-style:none; padding:0; margin:0; border-top:1px solid #d2e5f1 }
.home-news-list li { border-bottom:1px solid #d2e5f1 }
.home-news-list a { display:grid; grid-template-columns:100px minmax(0,1fr) 24px; gap:20px; align-items:center; padding:21px 8px; color:var(--deep) }
.home-news-list time { color:#57778e; font:700 14px/1.5 var(--en); white-space:nowrap }
.home-news-title { min-width:0; font-size:16px; font-weight:700; line-height:1.8; overflow-wrap:anywhere }
.home-news-arrow { color:var(--blue); font-size:24px; text-align:right }
.home-news-list a:is(:hover,:focus-visible) { background:#f2f9fd; color:var(--blue) }
.home-news-list a:is(:hover,:focus-visible) .home-news-title { text-decoration:underline; text-underline-offset:4px }
.home-news-empty { margin:0; padding:20px 0; color:#57778e }
@media(max-width:700px) {
    .home-news-inner { grid-template-columns:minmax(0,1fr); gap:22px }
    .home-news-list a { grid-template-columns:minmax(0,1fr) 24px; gap:5px 16px; padding:18px 0 }
    .home-news-list time { grid-column:1; font-size:13px }
    .home-news-title { grid-column:1; font-size:15px }
    .home-news-arrow { grid-column:2; grid-row:1 / 3 }
}

/* Shared crisp interaction; motion is managed in corporate-motion.js. */
:where(a, button) {
    -webkit-tap-highlight-color: transparent
}

:where(a, button):focus-visible {
    outline: 3px solid rgba(8,101,189,.32);
    outline-offset: 4px
}

.pill,
.header nav .entry,
.flow-actions>a,
.about-card-copy a,
.environment-link,
.environment-stats-link,
.people-showcase-head a,
.movie a,
.article-nav a,
.related-news>a,
.pagination a,
.job-grid>a {
    transition: none
}

.pill:hover {
    background: #fff;
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 12px 28px rgba(6,59,120,.16);
    transform: translateY(-2px)
}

.pill.is-mynavi:hover,
.header nav .entry:hover,
.flow-actions>a.is-mynavi:hover {
    background: var(--deep);
    border-color: var(--deep);
    color: #fff
}

.pill b,
.flow-actions>a>i,
.about-card-copy a i,
.environment-link i,
.environment-stats-link i,
.people-showcase-head a b,
.movie a i,
.job-grid>a i,
.related-news>a b {
    transition: none
}

.pill:hover b,
.flow-actions>a:hover>i,
.about-card-copy a:hover i,
.environment-link:hover i,
.environment-stats-link:hover i,
.people-showcase-head a:hover b,
.movie a:hover i,
.job-grid>a:hover i,
.related-news>a:hover b {
    transform: translateX(3px)
}

.about-card-copy a:hover,
.environment-link:hover,
.environment-stats-link:hover,
.people-showcase-head a:hover,
.movie a:hover,
.article-nav a:hover,
.pagination a:hover {
    color: var(--deep)
}

.flow-actions>a:not(.is-mynavi):hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    transform: translateY(-2px)
}

.job-grid>a:hover,
.related-news>a:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(6,59,120,.13)
}

@media (hover: hover) and (pointer: fine) {
    .header nav a:not(.entry) {
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 2px;
        text-underline-offset: 7px;
        transition: color .18s ease-out, text-decoration-color .18s ease-out
    }

    .header nav a:not(.entry):is(:hover, :focus-visible) {
        text-decoration-color: var(--blue)
    }
}

/* Keep controls functional, but remove decorative hover/accordion movement. */
html { scroll-behavior: auto }
body *, body *::before, body *::after { transition: none; animation: none }
.department-card:is(:hover, :focus-visible, [aria-expanded="true"]),
.department-card:is(:hover, :focus-visible, [aria-expanded="true"])>img,
.interview-card-button:hover b,
.news-card-image:hover img,
.pill:hover,
.pill:hover b,
.flow-actions>a:hover>i,
.flow-actions>a:not(.is-mynavi):hover,
.about-card-copy a:hover i,
.environment-link:hover i,
.environment-stats-link:hover i,
.people-showcase-head a:hover b,
.movie a:hover i,
.job-grid>a:hover,
.job-grid>a:hover i,
.related-news>a:hover,
.related-news>a:hover b { transform: none }

.environment-page .environment-team-support {
    grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr);
    align-items: center;
    gap: clamp(42px,5vw,82px);
    padding-block: clamp(62px,8vw,112px)
}

.environment-team-support>.photo-slot {
    height: clamp(390px,35vw,560px);
    border-radius: 28px;
    overflow: hidden
}

.environment-team-support>.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.environment-team-support-copy .lower-section-title,
.environment-team-support-copy .lower-section-title h2,
.environment-team-support-copy .lower-section-title span {
    margin-inline: 0;
    text-align: left
}

.environment-team-support-copy .lower-section-title { margin-bottom: 22px }

.environment-team-support-lead {
    max-width: 670px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(15px,1.15vw,18px);
    font-weight: 500;
    line-height: 2
}

.environment-challenge-values {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: clamp(30px,4vw,50px);
    padding-top: 28px;
    border-top: 1px solid #c8dfef
}

.environment-challenge-values article {
    min-width: 0;
    padding: 0 clamp(14px,2vw,26px);
    text-align: center;
    border-right: 1px solid #c8dfef
}

.environment-challenge-values article:first-child { padding-left: 0 }
.environment-challenge-values article:last-child { padding-right: 0; border-right: 0 }

.environment-challenge-values img {
    width: 52px;
    height: 48px;
    margin: 0 auto 15px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(1788%) hue-rotate(198deg) brightness(94%) contrast(98%)
}

.environment-challenge-values h3 {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: clamp(16px,1.15vw,19px);
    line-height: 1.55
}

.environment-challenge-values p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(12px,.9vw,14px);
    line-height: 1.85
}

@media(max-width: 900px) {
    .environment-page .environment-team-support { grid-template-columns: 1fr; gap: 34px }
    .environment-team-support>.photo-slot { height: min(62vw,440px) }
}

@media(max-width: 560px) {
    .environment-team-support>.photo-slot { height: 270px; border-radius: 20px }
    .environment-challenge-values { grid-template-columns: 1fr; padding-top: 10px }
    .environment-challenge-values article,
    .environment-challenge-values article:first-child,
    .environment-challenge-values article:last-child {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 16px;
        padding: 20px 0;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid #c8dfef
    }
    .environment-challenge-values article:last-child { border-bottom: 0 }
    .environment-challenge-values img { grid-row: 1 / 3; width: 44px; height: 42px; margin: 2px 0 0 }
    .environment-challenge-values h3 { margin-bottom: 5px }
}

/* Shared entry CTA: factory photo blended into the pale background */
.entry-cta.entry-cta-photo {
    isolation: isolate;
    background: linear-gradient(115deg,#edf8fe 0%,#f8fcff 54%,#eaf6fc 100%)
}

.entry-cta.entry-cta-photo:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,#edf8fe 0%,rgba(237,248,254,.98) 42%,rgba(237,248,254,.7) 57%,rgba(237,248,254,0) 78%)
}

/* Recruitment: application card */
.application-panel > .application-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: stretch;
    padding: clamp(30px, 4vw, 60px);
    border: 1px solid #cfe6f5;
    border-radius: 28px;
    background: #fff;
}

.application-panel > .application-card > img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.application-card-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.application-card-copy h3 {
    margin: 0 0 clamp(30px, 3vw, 46px);
    color: var(--deep);
    font-size: clamp(24px, 2.2vw, 38px);
    line-height: 1.65;
    letter-spacing: .04em;
}

/* Recruitment: highlighted full-width application band */
.recruit-page .application-panel {
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: clamp(52px, 5vw, 78px) max(24px, calc((100vw - 1320px) / 2));
    background: #dceff8;
}

.recruit-page .application-panel > .lower-section-title {
    margin-bottom: clamp(22px, 2.5vw, 38px);
    text-align: center;
}

.recruit-page .application-panel > .application-card {
    width: 100%;
    max-width: 1320px;
    min-height: 300px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: clamp(20px, 2.5vw, 40px);
}

.recruit-page .application-panel > .application-card > img {
    width: min(100%, 620px);
    height: min(32vw, 400px);
    min-height: 320px;
    justify-self: center;
    padding: 0;
    object-fit: contain;
}

.recruit-page .application-card-copy {
    padding: clamp(12px, 1.5vw, 22px) 0;
}

.recruit-page .application-card-copy h3 {
    font-size: clamp(27px, 2.35vw, 38px);
    line-height: 1.45;
    white-space: nowrap;
}

.recruit-page .application-card-copy h3 span {
    display: inline;
}

.recruit-page .application-card-copy .pill.is-mynavi {
    width: min(100%, 480px);
    background: var(--yellow);
    border-color: var(--yellow);
    color: #22425f;
}

.recruit-page .application-card-copy .pill.is-mynavi:hover,
.recruit-page .application-card-copy .pill.is-mynavi:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.recruit-page .application-card-copy aside {
    width: min(100%, 480px);
    margin: clamp(20px, 2vw, 28px) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--deep);
    text-align: center;
}

.recruit-page .application-card-copy aside span {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 700;
    line-height: 1.7;
}

.recruit-page .application-card-copy aside a {
    display: inline-block;
    color: var(--blue);
    font-family: var(--en);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .015em;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .recruit-page .application-panel {
        padding: 54px 28px 60px;
    }

    .recruit-page .application-panel > .application-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .recruit-page .application-panel > .application-card > img {
        width: min(100%, 520px);
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .recruit-page .application-card-copy {
        padding: 20px 0 0;
    }

    .recruit-page .application-card-copy h3 {
        white-space: normal;
    }

    .recruit-page .application-card-copy h3 span {
        display: block;
    }
}

@media (max-width: 520px) {
    .recruit-page .application-panel {
        width: 100vw;
        padding: 46px 20px 52px;
    }

    .recruit-page .application-panel h2{
        text-align: center;
    }

    .recruit-page .application-panel > .application-card {
        padding: 0;
    }

    .recruit-page .application-panel > .application-card > img {
        min-height: 0;
    }

    .recruit-page .application-card-copy aside a {
        font-size: clamp(22px, 7vw, 34px);
    }
}

.application-card-copy .pill {
    width: min(100%, 440px);
}

@media (max-width: 900px) {
    .application-panel > .application-card {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
        padding: 40px 28px;
    }

    .application-panel > .application-card > img {
        min-height: 280px;
    }
}

@media (max-width: 520px) {
    .application-panel > .application-card {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .application-panel > .application-card > img {
        min-height: 220px;
    }

    .application-card-copy h3 {
        font-size: 22px;
    }
}

.entry-cta.entry-cta-photo>div {
    z-index: 3
}

.entry-cta.entry-cta-photo>img {
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 56% 58%;
    opacity: .92;
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 48%);
    mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 48%)
}

@media(max-width: 900px) {
    .entry-cta.entry-cta-photo>img {
        width: 100%;
        height: 100%;
        opacity: .22;
        object-position: 62% 60%;
        -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 48%);
        mask-image: linear-gradient(90deg,transparent 0%,#000 48%)
    }

    .entry-cta.entry-cta-photo:after {
        background: linear-gradient(90deg,rgba(237,248,254,.98) 0%,rgba(237,248,254,.9) 58%,rgba(237,248,254,.45) 100%)
    }
}

/* --------------------------------------------------------------------------
   Final responsive audit: phone layout
   Keep every content group readable as a vertical flow and constrain photos.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .lower-main,
    .lower-main > section,
    .lower-section,
    .section {
        min-width: 0;
    }

    .faq.section {
        width: auto;
        margin-inline: 18px;
        padding-inline: 0;
    }

    /* Shared card/value/process groups */
    .card-grid, .card-grid-3, .card-grid-4, .three-values:not(.people-values), .four-values, .five-values, .member-grid, .selection-flow, .department-card-grid, .environment-workplace-cards, .environment-benefit-grid, .environment-challenge-values, .job-type-grid, .faq-grid, .flow-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* TOP interview cards: remove the desktop/tablet horizontal rail on phones. */
    .people-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .people-grid article {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .people-grid article > .photo-slot {
        height: 250px;
    }

    .people-grid article > .photo-slot img {
        object-fit: cover;
        object-position: center 24%;
    }

    .people-card-copy {
        min-height: 0;
    }

    /* Lower page interview cards */
    .interview-grid,
    .interview-grid article,
    .story-section,
    .talk-section,
    .crosstalk-panel,
    .next-step,
    .future-panel,
    .quote-card,
    .session-panel,
    .application-card,
    .environment-team-support,
    .environment-welfare,
    .environment-page-intro,
    .split-feature {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .interview-grid .photo-slot,
    .story-section .photo-slot,
    .talk-section .photo-slot {
        width: 100%;
        min-height: 0;
        height: clamp(220px, 72vw, 300px);
    }

    .interview-grid .photo-slot img,
    .story-section .photo-slot img,
    .talk-section .photo-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
    }

    /* Detail hero previously inherited a desktop fixed/min width. */
    .detail-hero,
    .detail-hero > div,
    .detail-hero > .photo-slot,
    .article-hero,
    .article-hero > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .detail-hero > .photo-slot {
        min-height: 0;
        height: clamp(240px, 78vw, 320px);
    }

    .detail-hero > .photo-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
    }

    .detail-hero dl {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .detail-hero dd {
        min-width: 0;
    }

    /* Environment welfare had desktop width leaking into the phone layout. */
    .environment-welfare,
    .environment-welfare-copy,
    .environment-benefit-grid,
    .environment-benefit-grid article,
    .environment-welfare-visual {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-inline: 0;
    }

    .environment-benefit-grid article {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    /* Large editorial image groups */
    .photo-stack,
    .photo-mosaic {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .photo-stack > .photo-slot,
    .photo-stack > .photo-slot:first-child,
    .photo-mosaic > .photo-slot,
    .environment-workplace-main {
        grid-column: auto;
        width: 100%;
        min-height: 0;
        height: clamp(190px, 58vw, 240px);
    }

    .photo-stack img,
    .photo-mosaic img,
    .environment-workplace-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* About page and number blocks stay compact, but no side-by-side cards. */
    .about-page .three-values, .about-page .card-grid, .work-page .three-values, .environment-page .process-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .number-grid article {
        min-height: 120px;
        padding: 16px;
    }

    .number-grid article:nth-of-type(even){
        border-right: none;
    }

    /* Preserve compact navigation rows; wrap their labels safely. */
    .news-list > article,
    .related-news > a {
        min-width: 0;
    }

    .news-list h3,
    .related-news strong,
    .qa-list button,
    .qa-list dd,
    .requirements dd {
        overflow-wrap: anywhere;
    }

    /* Keep the TOP hero artwork inside the phone canvas. */
    .hero-illustration {
        right: -14px;
        width: min(72vw, 280px);
        max-width: calc(100vw - 24px);
        height: auto;
        object-fit: contain;
    }

    /* Intro sections must read top-to-bottom on a narrow screen. */
    .message {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0;
    }

    .message > div,
    .message > .photo-slot {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Japanese display headings must wrap instead of being clipped. */
    .detail-hero h1,
    .article-hero h1,
    .lower-hero h1,
    .lower-main h1,
    .lower-main h2,
    .lower-main h3 {
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 700px) {
    .lower-section.interview-more {
        padding: 32px 20px;
    }
}

/* --------------------------------------------------------------------------
   Mobile vertical rhythm and display-type ceiling
   Match the corporate-site spacing model by evaluating the visible gap from
   content edge to content edge. Adjacent sections contribute 32px each, so
   labels and other first/last-line spacing still fit within an 80px interval.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* `.section` already creates its gutter with its reduced width and auto
       margins. Do not add page-specific horizontal padding on top of it. */
    main > .section {
        padding-left: 0;
        padding-right: 0;
    }

    /* Story rows also inherit the shared outer gutter through `.lower-section`.
       Their desktop 40px inline padding otherwise narrows phone copy twice. */
    .lower-main > .story-section {
        padding-left: 0;
        padding-right: 0;
    }

    /* The panel supplies its own inset; the desktop grid margin is duplicate
       horizontal whitespace on phones. */
    .soft-panel .card-grid-4 {
        margin-left: 0;
        margin-right: 0;
    }

    main > section:not(.hero):not(.lower-hero):not(.detail-hero):not(.article-hero),
    .lower-main > .lower-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .lower-hero,
    .detail-hero,
    .article-hero {
        padding-bottom: 32px;
    }

    .lower-main > .lower-section + .lower-section,
    main > section:not(.hero) + section:not(.hero) {
        margin-top: 0;
    }

    .lower-section.interview-more {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .entry-cta {
        margin-top: 0;
        margin-bottom: 32px;
    }

    /* Navigation and nested sections must not add a second section gap. */
    .anchor-nav,
    .faq-category-nav {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 32px;
    }

    .faq-groups > section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .interview-page .quote-card {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* TOP ABOUT carried an additional 68px after its final image. */
    .about-detail {
        padding-bottom: 0;
    }

    .entry-cta p {
        font-size: clamp(22px, 6.2vw, 27px);
        line-height: 1.5;
    }

    .entry-cta p > span {
        display: block;
        white-space: nowrap;
    }

    .entry-cta-note {
        display: block;
        margin-top: 12px;
        font-size: clamp(11px, 3.35vw, 13px);
        white-space: nowrap;
    }

    .hero h1,
    .message-title,
    .big-en,
    .lower-en,
    .lower-en-long,
    .lower-hero h1,
    .detail-hero h1,
    .article-hero h1,
    .section-copy h2,
    .side-title h2,
    .section-head h2,
    .lower-section-title h2,
    .movie h2,
    .flow h2,
    .faq h2,
    .about-detail-head h2,
    .environment-intro .label,
    .environment-intro h2,
    .movie-top-head .label,
    .movie-top-head h2,
    .flow-top-content h2,
    .application-panel h2,
    .application-card-copy aside a,
    .interview-more > header h2,
    .entry-content h2,
    .entry-content h3,
    .people-intro-copy h2,
    .environment-page-intro-copy .lower-section-title h2 {
        font-size: min(32px, 8.2vw);
    }

    .about-card-copy > b,
    .number-grid strong,
    .about-numbers-panel .number-grid strong,
    .environment-stats-grid strong,
    .interview-page .daily-flow > .lower-section-title p,
    .selection-flow b,
    .faq-group-label b {
        font-size: 32px;
    }

    /* ABOUT: keep the bordered strengths and numbers panels distinct, and
       reserve the numbers-panel header area for its 220px illustration. */
    .about-page .strengths-panel + .about-numbers-panel {
        margin-top: 32px;
    }

    main.about-page > section.lower-section.numbers-panel.about-numbers-panel {
        padding-top: 264px;
    }

    .about-page .about-numbers-decor {
        top: 24px;
    }

}

@media (max-width: 520px) {
    /* The phone illustration is 160px high: 24px top + 160px image +
       32px clearance to the title, including its existing 12px offset. */
    main.about-page > section.lower-section.numbers-panel.about-numbers-panel {
        padding-top: 204px;
    }
}

@media (max-width: 900px) {
    /* ABOUT philosophy group photo: match the 1800 x 630 source ratio so
       the people at both edges remain visible instead of being cover-cropped. */
    .about-page .philosophy > .photo-slot {
        height: auto;
        aspect-ratio: 20 / 7;
    }

    /* PEOPLE CROSS TALK: remove the desktop half-viewport width and the
       unresolved percentage height that left an empty block below the image. */
    .people-page .crosstalk-panel > .photo-slot {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        max-height: 300px;
        aspect-ratio: 800 / 457;
        margin: 0;
    }

    .people-page .crosstalk-panel > .photo-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* PEOPLE INTRODUCTION: keep the compact desktop title, while allowing the
   editorially specified three-line phrase on phones. */
.people-page .people-intro .lower-section-title h2 br {
    display: none;
}

.people-page .people-intro .lower-section-title h2 br + .letter-heading-character {
    display: none;
}

.environment-page .environment-team-support .lower-section-title h2 br,
.environment-page .environment-team-support .lower-section-title h2 br + .letter-heading-character {
    display: none;
}

@media (max-width: 520px) {
    .people-page .people-intro .lower-section-title h2 br {
        display: block;
    }

    .environment-page .environment-team-support .lower-section-title h2 br {
        display: block;
    }

    /* Keep the three INTRODUCTION values in one compact row on phones. */
    .people-page .people-values {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .people-page .people-values article {
        min-width: 0;
        min-height: 118px;
        padding: 16px 4px;
        gap: 10px;
        font-size: clamp(10px, 3.25vw, 13px);
        white-space: nowrap;
    }

    .people-page .people-values article img {
        width: clamp(42px, 13vw, 52px);
        height: 40px;
    }

    /* Remove accumulated browser-default margins around interview titles. */
    .people-page .interview-grid h3 {
        margin: 8px 0 0;
    }

    .people-page .interview-grid p.interview-card-copy {
        margin: 12px 0 10px;
    }

    .people-page .interview-grid p.interview-card-work {
        margin: 0 0 18px;
    }
}