/* ==========================================================================
   Recruit - Site Header (overrides for /recruit/* pages)
   ========================================================================== */
.site-header--recruit {
    background-color: transparent;
    padding: 30px 48px 25px 48px;
    width: 100%;
    opacity: 1;
    transform: none;
}

.site-header--recruit .site-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__logo--recruit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.site-header__logo--recruit img {
    width: 228px;
    height: auto;
    display: block;
}

.site-header__logo-suffix {
    margin-top: 3px;
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--color-primary);
}

.site-header__nav--recruit {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 0;
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 3px 0;
}

.site-header__nav-list > li {
    margin: 0;
}

.site-header__nav-link--recruit {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: var(--color-primary);
    transition: opacity 0.2s;
}

.site-header__nav-link--recruit:hover {
    opacity: 0.7;
}

.site-header--recruit .site-header__hamburger {
    width: 51px;
    margin-top: -15px;
}

.site-header--recruit .site-header__hamburger span {
    background-color: var(--color-primary);
}

/* PC: ロゴ中心に対して厳密に中央揃え。
   従来の手動マージン微調整 (suffix margin-top: 3px / nav-list margin-bottom: 3px /
   hamburger margin-top: -15px) を解除し、flex の align-items: center に任せる。
   タブレット (max 1024) は従来通り、SP (max 768) は別途上書き済み。 */
@media (min-width: 1025px) {
    .site-header--recruit .site-header__logo-suffix {
        margin-top: 0;
    }

    .site-header--recruit .site-header__nav-list {
        margin-top: 17px;
    }

    .site-header--recruit .site-header__hamburger {
        margin-top: 6px;
    }
}

/* ==========================================================================
   Page Header override for requirement / entry / entry-thanks (PC only)
   ========================================================================== */
@media (min-width: 769px) {
    .page-template-page-recruit-requirement .page-header,
    .page-template-page-recruit-entry .page-header,
    .page-template-page-recruit-entry-thanks .page-header {
        padding: 237px 0 0;
    }
}

/* ==========================================================================
   Recruit - Hero
   ========================================================================== */
   .recruit-hero {
    padding-top: 234px;
}

.recruit-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.recruit-hero__title {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 74px;
    line-height: 1.2;
    color: var(--color-black);
}

.recruit-hero__sub {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: var(--color-black);
    margin-top: 0px;
}

.recruit-hero__sub-comma {
    letter-spacing: -8px;
}

.recruit-hero__photos {
    margin-top: 42px;
}

.recruit-hero__photos img {
    width: 100%;
    height: auto;
    display: block;
}

/* PCでは sp-only を非表示 */
.sp-only {
    display: none !important;
}

/* SPでは sp-only を表示（改行する） */
@media (max-width: 768px) {
    .sp-only {
        display: inline !important;
    }
}

/* ==========================================================================
   Recruit - Concept
   ========================================================================== */
.recruit-concept {
    padding: 240px 0 0;
}

.recruit-concept__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.recruit-concept__left {
    flex: 1;
    min-width: 0;
}

.recruit-concept__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.5;
    color: var(--color-black);
    font-feature-settings: 'palt' 1, 'hwid' 1;
    margin-top: -17px;
}

.recruit-concept__text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 2.4;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    width: 477px;
    max-width: 100%;
    margin-top: 78px;
    margin-left: 101px;
}

.recruit-concept__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 29px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-primary);
    margin-top: 50px;
    margin-left: 101px;
    width: fit-content;
    transition: background-color 0.3s, color 0.3s;
}

.recruit-concept__btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.recruit-concept__right {
    width: 476px;
    flex-shrink: 0;
}

.recruit-concept__right img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 0 120px 0 120px;
}

/* ==========================================================================
   Recruit - Business
   ========================================================================== */
.recruit-business {
    padding: 240px 0 0;
}

.recruit-business__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.recruit-business__left {
    flex: 1;
    min-width: 0;
}

.recruit-business__label {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 1.5px 4px;
}

.recruit-business__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 27px;
    line-height: 1.5;
    color: var(--color-black);
    font-feature-settings: 'palt' 1, 'hwid' 1;
    margin: 21px 1px;
}

.recruit-business__right {
    width: 477px;
    flex-shrink: 0;
}

.recruit-business__text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-top: 44px;
}

.recruit-business__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 29px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-primary);
    margin-top: 50px;
    width: fit-content;
    transition: background-color 0.3s, color 0.3s;
}

.recruit-business__btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   Recruit - Marquee (infinite horizontal scroll)
   ========================================================================== */
.recruit-marquee {
    --marquee-gap: 20px;
    margin-top: 81px;
    margin-bottom: 240px;
    overflow: hidden;
    width: 100%;
}

.recruit-marquee__track {
    display: flex;
    gap: var(--marquee-gap);
    width: max-content;
    animation: recruit-marquee-scroll 40s linear infinite;
}

.recruit-marquee__item {
    flex-shrink: 0;
    width: 324px;
    height: 216px;
    overflow: hidden;
}

/* ① 右上・左下が角丸（slide-01, 03, 05） */
.recruit-marquee__item--type-a {
    border-radius: 0 30px 0 30px;
}

/* ② 左上・右下が角丸（slide-02, 04） */
.recruit-marquee__item--type-b {
    border-radius: 30px 0 30px 0;
}

.recruit-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes recruit-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Track contains 2 identical sets — move by half the track width + half of one gap */
        transform: translateX(calc(-50% - var(--marquee-gap) / 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .recruit-marquee__track {
        animation: none;
    }
}

/* ==========================================================================
   Recruit - Real Intention
   ========================================================================== */
.recruit-intention {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.recruit-intention__bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.recruit-intention__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recruit-intention__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.recruit-intention__inner {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    padding: 240px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recruit-intention__label {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-white);
    margin-top: -1px;
}

.recruit-intention__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 40px;
    line-height: 1.5;
    color: var(--color-white);
    font-feature-settings: 'palt' 1, 'hwid' 1;
    margin-top: 30px;
}

.recruit-intention__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between; 
    width: 376px;
    max-width: 100%;
    height: 60px;
    padding: 0 20px; 
    background-color: var(--color-primary);
    border-radius: 10px;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-decoration: none;
    margin-top: 80px;
    transition: opacity 0.3s;
    font-family: var(--font-marcellus);
}

.recruit-intention__btn:hover {
    opacity: 0.8;
}

.recruit-intention__btn-text {
    flex: 1;
    font-size: 17px;
    text-align: center;
    padding-left: 22px;
    margin-top: -3px;
}

.recruit-intention__btn-arrow {
    display: inline-flex;
    align-items: center;
}

.recruit-intention__btn-arrow img {
    width: 11px;
    height: 14px;
    margin-right: 0px;
    display: block;
}
/* ==========================================================================
   Recruit - Page-jump Links (Philosophy / Business / Message)
   ========================================================================== */
   .recruit-links {
    margin-top: 239px;
    padding: 0;
}


.page-template-page-recruit-business-php .recruit-links {
    margin-top: 180px; /* businesspage */
}

.recruit-links__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 29px;
}

.recruit-links__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 29px 0;
    border-bottom: 1px solid #848484;
    color: var(--color-black);
    transition: opacity 0.3s;
}

.recruit-links__item:hover {
    opacity: 0.6;
}

.recruit-links__item-en {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
}

.recruit-links__item-ja {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    margin-top: 12px;
}

.recruit-links__item-arrow {
    width: 11px;
    height: 14px;
    flex-shrink: 0;
    align-self: center;
    margin-right: 30px;
}


/* ==========================================================================
   Recruit - Big CTA Cards (Requirement / Entry)
   ========================================================================== */
.recruit-cta-cards {
    padding: 40px 0 2px;
}

.recruit-cta-cards__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.recruit-cta-cards__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 260px;
    padding: 50px 50px 50px 51px;
    border-radius: 0;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 40px;
    color: var(--color-white);
    transition: opacity 0.3s;
}

.recruit-cta-cards__card:hover {
    opacity: 0.9;
}

.recruit-cta-cards__card--requirement {
    background-color: #545043;
}

.recruit-cta-cards__card-text{
    margin-bottom: auto;
}


.recruit-cta-cards__card--entry {
    background-color: var(--color-primary);
}

.recruit-cta-cards__card-en {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 36px;
    line-height: 1;
    margin-bottom: auto;
}

.recruit-cta-cards__card-ja {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    margin-top: 16px;
}

.recruit-cta-cards-arrow,
.recruit-cta-cards__card-arrow {
    width: 11px;
    height: 14px;
    flex-shrink: 0;
    align-self: flex-end;
    display: block;
}

/* ==========================================================================
   Philosophy - Page Header
   ========================================================================== */
.ph-header {
    padding-top: 238px;
}

.ph-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.ph-header__label {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    margin-top: 0;
}

.ph-header__heading {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 60px;
    line-height: 1;
    color: var(--color-black);
    margin-top: 20px;
}

.ph-header__line {
    max-width: 1184px;
    height: 1px;
    background-color: #006336;
    margin: 0 auto;
}

/* ==========================================================================
   Philosophy - Intro
   ========================================================================== */
.ph-intro {
    padding-top: 200px;
}

.ph-intro__inner {
    max-width: 1280px;
    margin: -10px auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.ph-intro__left {
    flex: 1;
    min-width: 0;
    padding-left: 101px;
}

.ph-intro__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.5;
    color: var(--color-black);
    font-feature-settings: 'palt' 1, 'hwid' 1;
}

.ph-intro__right {
    width: 477px;
    flex-shrink: 0;
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-right: 101px;
}

.ph-intro__right p {
    margin-top: 0;
}

.ph-intro__right p + p {
    margin-top: 0em;
}

.ph-intro__block + .ph-intro__block {
    margin-top: 32px;
}

.ph-section__line {
    max-width: 1184px;
    height: 1px;
    background-color: var(--color-black);
    margin: 100px auto;
}

/* 各セクションのライン位置を個別調整 */
.ph-section--purpose .ph-section__line {
    margin-top: 200px;
    margin-bottom: 96px;
}

.ph-section--management .ph-section__line {
    margin-top: 80px;
    margin-bottom: 96px;
}

.ph-section--guiding .ph-section__line {
    margin-top: 25px;
    margin-bottom: 104px;
}

.ph-section--slogan .ph-section__line {
    margin-top: 73px;
    margin-bottom: 100px;
}

.ph-section--management .ph-section__photo {
    margin-top: -50px;  /* マイナス値で上に移動 */
}

.ph-section__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 84px 48px 0;
    display: grid;
    grid-template-columns: 255px 477px 1fr;
    column-gap: 48px;
}

.ph-section__label {
    min-width: 0;
    margin-top: -101px;
}

.ph-section__label-en {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-black);
    margin-top: 1px;
}

.ph-section__label-ja {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-black);
    margin-top: 11px;
}

.ph-section__body {
    min-width: 0;
    margin-top: -96px;
}

.ph-section__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.4;
    color: var(--color-black);
    font-feature-settings: 'palt' 1, 'hwid' 1;
    margin-top: -2px;
}

.ph-section__heading--slogan {
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}

.ph-section__heading-en {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
}

.ph-section__heading-ja {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
}

.ph-section__text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-top: 30px;
}

.ph-section__text p {
    margin-top: 0;
}

.ph-section__text p + p {
    margin-top: 0em;
}

.ph-section__photo {
    width: 354px;
    height: 220px;
    overflow: hidden;
    justify-self: end;
}

.ph-section__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Purpose（家のある未来）の画像 */
.ph-section--purpose .ph-section__photo {
    position: relative; top:8px;
}

/* Management Philosophy（経営哲学）の画像 */
.ph-section--management .ph-section__photo {
    position: relative; top:-52px;
}

/* Guiding Principle（行動指針）の画像 */
.ph-section--guiding .ph-section__photo {
    position: relative; top:-22px;
}

/* Slogan（SOLID FORWARD）の画像 */
.ph-section--slogan .ph-section__photo {
    position: relative; top:-82px;
}

/* Guiding Principle - 5 items list */
.ph-section--guiding .ph-section__body {
    margin-top: -103px;
}

.ph-principles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ph-principle {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 0;
    align-items: start;
}

.ph-principle__num {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: var(--color-black);
}

.ph-principle__text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    margin-top: 0;
}

/* Bottom line (after last section, before recruit-links) */
.ph-bottom-line__wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.ph-bottom-line {
    height: 1px;
    background-color: var(--color-black);
    margin-top: 20px;
}

/* Adjust gap to recruit-links on philosophy page */
.ph-bottom-line__wrap + .recruit-links {
    margin-top: 241px;
}

/* ==========================================================================
   Business - Intro
   ========================================================================== */
.biz-intro {
    padding-top: 111px;
}

.biz-intro__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.biz-intro__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.5;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
}

.biz-intro__text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-top: 31px;
}

.biz-intro__text p {
    margin-top: 0;
}

/* ==========================================================================
   Business - Roles (営業/設計/施工管理/総務) — independent side-by-side per section
   ========================================================================== */
.biz-roles {
    padding-top: 257px;
    /* `clip` (not `hidden`) — `hidden` creates a scroll container that
       silently disables `position: sticky` on descendants. */
    overflow-x: clip;
    padding-bottom: 62px;
}

/* Two-column grid wrapping all 4 sections and a single shared photo stage.
   The stage stays sticky at top: 80px throughout the entire .biz-roles area,
   so the image NEVER moves between sections — only its content (which photo
   is opaque) changes via JS-driven crossfade. */
.biz-roles__inner {
    /* inner は max-width を持たず viewport いっぱいに広がる。
       padding-left は JS (zoom-vh.js) が --biz-roles-padding-left に動的計算してセット。
       1280px時 48 visual → 1980px時 102 visual で線形補間。 */
    margin: 0;
    padding-left: var(--biz-roles-padding-left, 48px);
    padding-right: 0;
    display: grid;
    /* col1: text 最大 647px。col2: 残り全部 (1fr) → stage を justify-self: end で右寄せして viewport 右端ぴったり */
    grid-template-columns: minmax(0, 647px) 1fr;
    column-gap: 60px;
    align-items: start;
}

.biz-roles__sections {
    grid-column: 1;
    min-width: 0;
}

.biz-roles__stage {
    grid-column: 2;
    align-self: start;
    justify-self: end; /* col2 (1fr) 内で右寄せ → viewport 右端にぴったり */
    position: sticky;
    top: 0;
    width: 525px;
    height: var(--zoom-vh, 100vh); /* Figma: 525 × 800 → 画面高さにフィット（zoom 補正済み） */
    opacity: 0;
    transition: opacity 0.8s ease; /* フェードインは scroll-reveal と同じ 0.8s */
}

.biz-roles__stage.is-revealed {
    opacity: 1;
}

.biz-roles__stage-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.biz-roles__stage-photo.is-active {
    opacity: 1;
}

.biz-roles__stage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.biz-role {
    min-width: 0;
    height: 678px; /* Figma: 647 × 678 per section */
    box-sizing: content-box;
}

/* First section (営業): bottom-align text with 800px image (800 - 678 = 122) */
.biz-role:first-child {
    padding-top: 122px;
}

/* Sections 2-4 (設計/施工管理/総務):
   gap (200) + vertical-center offset ((800 - 678)/2 = 61) in 800px image area. */
.biz-role + .biz-role {
    padding-top: 169px;
    padding-bottom: 61px;
}


/* Last section (総務): bottom-align text with 800px image (same as 営業).
   - padding-top: 200 (gap from previous section) + 122 (800 - 678 bottom-align)
   - padding-bottom: 122 keeps sticky parent extended so the image stays
     pinned until 総務 text top reaches viewport top (screenshot moment),
     then the image releases naturally as the user scrolls further. */
.biz-role:last-child {
    padding-top: 140px;
    padding-bottom: 422px;
}

.biz-role__left {
    min-width: 0;
}


/* Inline photo lives inside each section but is hidden on desktop —
   the shared sticky stage handles desktop display. Shown on mobile only. */
.biz-role__photo--inline {
    display: none;
}

.biz-role__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 16px;
}

.biz-role__tab-ja {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--color-black);
    margin-top: 0;
}

.biz-role__tab-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: var(--color-black);
    flex-shrink: 0;
}

.biz-role__tab-en {
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--color-black);
    margin-top: 0;
}

.biz-role__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.8;
    color: var(--color-black);
    margin-top: 63px;
}

.biz-role__lead {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-top: 27px;
    padding-bottom: 40px;
    border-bottom: 1px solid #848484;
}

.biz-role__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 445px);
    column-gap: 106px;
    padding: 30px 0;
    border-bottom: 1px solid #848484;
}

.biz-role__row:last-child {
    padding-bottom: 23px;
}

.biz-role__row-label {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: var(--color-black);
    margin-top: 0;
}

.biz-role__row-text {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 1px;
    color: var(--color-black);
    font-feature-settings: 'palt' 1;
    text-align: justify;
    margin-top: 0;
}

/* ==========================================================================
   Message - Content
   ========================================================================== */
.msg-content {
    padding-top: 177px;
    margin-bottom: -9px;
}

.msg-content__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 148px;
    padding-right: 151px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 577px;
    column-gap: 0;
    align-items: start;
}

.msg-content__heading {
    font-family: var(--font-zen);
    font-weight: 500;
    font-size: 50px;
    line-height: 1.5;
    color: var(--color-black);
    font-feature-settings: 'palt' 1, 'hwid' 1;
    margin-top: 0;
    /* Sticky so the heading stays beside the body text as the user scrolls
       through the message. Pinned until the grid container (msg-content__inner)
       bottom passes. */
    position: sticky;
    top: 200px;
    align-self: start;
}

.msg-content__body {
    min-width: 0;
}

.msg-content__text {
    margin-top: 10px;
    color: #848484;
    font-family: var(--font-noto);
    font-weight: 600;
    font-size: 18px;
    line-height: 2.2;
    letter-spacing: 1px;
    font-feature-settings: 'palt' 1;
    text-align: justify;
}

.msg-content__stanza + .msg-content__stanza {
    margin-top: 2.3em;
}

.msg-content__line {
    margin: 0;
    color: #b0b0b0;
    transition: color 0.4s ease;
}

.msg-content__line.is-active {
    color: var(--color-black);
}

/* Backward compatibility for legacy markup */
.msg-content__highlight {
    color: var(--color-black);
}

.msg-content__signature {
    color: #848484;
    font-family: var(--font-noto);
    font-weight: 600;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 1px;
    margin-top: 95px;
}

/* ==========================================================================
   Arrow hover loop (mirrors top page info__arrow animation)
   ========================================================================== */
@keyframes recruit-arrow-loop {
    0%   { transform: translateX(0);     opacity: 1; }
    40%  { transform: translateX(20px);  opacity: 0; }
    60%  { transform: translateX(-20px); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}

@media (hover: hover) {
    .recruit-links__item:hover .recruit-links__item-arrow,
    .recruit-cta-cards__card:hover .recruit-cta-cards__card-arrow,
    .recruit-intention__btn:hover .recruit-intention__btn-arrow img {
        animation: recruit-arrow-loop 0.5s ease;
    }
}

/* ==========================================================================
   Responsive - Tablet (1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Recruit header - Tablet */
    .site-header--recruit {
        padding: 20px 32px;
    }

    .site-header__logo--recruit img {
        width: 130px;
    }

    .site-header__nav-list {
        gap: 20px;
    }

    .site-header__nav-link--recruit {
        font-size: 13px;
    }

    .recruit-hero {
        padding-top: 120px;
    }

    .recruit-hero__inner {
        padding: 0 32px;
    }

    .recruit-hero__title {
        font-size: 56px;
    }

    .recruit-hero__sub {
        font-size: 20px;
    }

    .recruit-concept {
        padding-top: 160px;
    }

    .recruit-concept__inner {
        padding: 0 32px;
        gap: 40px;
    }

    .recruit-concept__heading {
        font-size: 28px;
    }

    .recruit-concept__text {
        margin-left: 60px;
        margin-top: 40px;
    }

    .recruit-concept__btn {
        margin-left: 60px;
        margin-top: 40px;
    }

    .recruit-concept__right {
        width: 360px;
    }

    .recruit-concept__right img {
        height: 480px;
    }

    .recruit-business {
        padding-top: 160px;
    }

    .recruit-business__inner {
        padding: 0 32px;
        gap: 40px;
    }

    .recruit-business__heading {
        font-size: 22px;
    }

    .recruit-business__right {
        width: 522px;
    }

    .recruit-marquee {
        margin-top: 120px;
        margin-bottom: 160px;
    }

    .recruit-marquee__item {
        width: 280px;
        height: 186px;
    }

    .recruit-intention {
        height: 640px;
    }

    .recruit-intention__inner {
        padding: 180px 32px;
    }

    .recruit-intention__heading {
        font-size: 32px;
    }

    .recruit-intention__btn {
        margin-top: 60px;
    }

    .recruit-links {
        margin-top: 160px;
    }

    .recruit-links__inner {
        padding: 0 32px;
    }

    .recruit-cta-cards__inner {
        padding: 0 32px;
    }

    .recruit-cta-cards__card {
        min-height: 220px;
        padding: 40px;
    }

    .recruit-cta-cards__card-en {
        font-size: 30px;
    }

    /* Philosophy - Tablet */
    .ph-header {
        padding-top: 120px;
    }

    .ph-header__inner {
        padding: 0 32px;
    }

    .ph-header__heading {
        font-size: 48px;
    }

    .ph-header__line {
        margin: 11px 32px 0;
    }

    .ph-intro {
        padding-top: 140px;
    }

    .ph-intro__inner {
        padding: 0 32px;
        gap: 40px;
    }

    .ph-intro__left {
        padding-left: 40px;
    }

    .ph-intro__heading {
        font-size: 28px;
    }

    .ph-intro__right {
        width: 380px;
        font-size: 15px;
    }

    .ph-section__line {
        margin: 0 32px;
    }

    .ph-section__inner {
        padding: 80px 32px 0;
        grid-template-columns: 200px 1fr 280px;
        column-gap: 30px;
    }

    .ph-section__heading {
        font-size: 24px;
    }

    .ph-section__heading-en {
        font-size: 24px;
    }

    .ph-section__heading-ja {
        font-size: 18px;
    }

    .ph-section__photo {
        width: 280px;
        height: 174px;
    }

    .ph-bottom-line__wrap {
        padding: 0 32px;
    }

    .ph-bottom-line__wrap + .recruit-links {
        margin-top: 160px;
    }

    /* Business - Tablet */
    .biz-intro {
        padding-top: 80px;
    }

    .biz-intro__inner {
        padding: 0 32px;
    }

    .biz-intro__heading {
        font-size: 22px;
    }

    .biz-intro__text {
        font-size: 14px;
    }

    .biz-roles {
        padding-top: 160px;
    }

    /* Reset desktop's fixed dims so tablet can fluidly resize */
    .biz-roles__stage {
        width: 100%;
        height: auto;
        aspect-ratio: 525 / 800;
    }

    .biz-role {
        height: auto;
    }

    .biz-role:first-child {
        padding-top: 0;
    }

    .biz-role + .biz-role {
        padding-top: 160px;
        padding-bottom: 0;
    }

    .biz-role:last-child {
        padding-bottom: 0;
    }

    .biz-roles__inner {
        padding-left: 32px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        column-gap: 40px;
    }

    .biz-role__heading {
        font-size: 22px;
    }

    .biz-role__row {
        grid-template-columns: 96px 1fr;
        column-gap: 30px;
    }

    .biz-role__row-text {
        font-size: 13px;
    }

    /* Message - Tablet */
    .msg-content {
        padding-top: 140px;
    }

    .msg-content__inner {
        padding-left: 80px;
        padding-right: 80px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
        column-gap: 40px;
    }

    .msg-content__heading {
        font-size: 36px;
    }

    .msg-content__text {
        font-size: 16px;
    }

    .msg-content__signature {
        font-size: 16px;
        margin-top: 80px;
    }
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Recruit header - Mobile (compact per Figma SP) */
    .site-header--recruit {
        padding: 10px 20px;
    }

    .site-header__logo--recruit img {
        width: 135px;
        margin-top: 10px;
    }

    .site-header__logo-suffix {
        font-size: 14px;
        margin-top: 10px;
    }

    /* Hide inline nav links on mobile; users access via hamburger drawer */
    .site-header__nav-list {
        display: none;
    }

    /* SP では PC基準の margin-top: -15px を打ち消す */
    .site-header--recruit .site-header__hamburger {
        margin-top: 0;
    }

    .recruit-hero {
        padding-top: 92px;
    }

    .recruit-hero__inner {
        padding: 45px 20px 0 20px;
    }

    .recruit-hero__title {
        font-size: 40px;
    }

    /* PC表示では <br> を無効化 */
.sp-only {
    display: none;
}

/* SP表示では <br> を有効化 */
@media (max-width: 768px) {
    .sp-only {
        display: inline;
    }
}

    .recruit-hero__sub {
        font-size: 16px;
        margin-top: 10px;
    }

    /* Hero photos: stacked vertically, landscape aspect per Figma SP */
    .recruit-hero__photos {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .recruit-hero__photo {
        aspect-ratio: 390 / 150;
    }

    .recruit-concept {
        padding-top: 178px;
    }

    /* Reorder children for Figma SP order: heading -> photo -> body -> button */
    .recruit-concept__inner {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        gap: 41px;
    }

    .recruit-concept__left {
        display: contents;
    }

    .recruit-concept__heading {
        order: 1;
        font-size: 22px;
    }

    .recruit-concept__right {
        order: 2;
        width: 100%;
    }

    .recruit-concept__text {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: -2px;
        font-size: 13px;
        line-height: 1.8;
    }

    .recruit-concept__btn {
        order: 4;
        margin-left: 0;
        margin-top: -3px;
        font-size: 14px;
        padding: 9px 19px;
        align-self: flex-end;
    }

    .recruit-concept__right img {
        height: auto;
        aspect-ratio: 350 / 420;
        border-radius: 0 70px 0 70px;
    }

    .recruit-business {
        padding-top: 158px;
    }

    .recruit-business__inner {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        gap: 0;
    }

    .recruit-business__left,
    .recruit-business__right {
        display: contents;
    }

    .recruit-business__label {
        order: 1;
    }

    .recruit-business__heading {
        order: 2;
        font-size: 19px;
        margin-top: 11px;
    }

    .recruit-business__text {
        order: 3;
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.8;
    }

    .recruit-business__btn {
        order: 4;
        font-size: 14px;
        padding: 9px 19px;
        margin-top: 39px;
        align-self: flex-end;
    }

    .recruit-marquee {
        --marquee-gap: 16px;
        margin-top: 39px;
        margin-bottom: 160px;
    }

    .recruit-marquee__item {
        width: 168px;
        height: 112px;
    }

    .recruit-intention {
        height: 700px;
    }

    .recruit-intention__inner {
        padding: 230px 20px;
    }

    .recruit-intention__label {
        font-size: 20px;
    }

    .recruit-intention__heading {
        font-size: 28px;
        margin-top: 17px;
    }

    .recruit-intention__btn {
        margin-top: 49px;
        height: 60px;
        gap: 10px;
    }

    .recruit-intention__btn-text {
        font-size: 18px;
    }

    .recruit-intention__btn-arrow img {
        width: 11px;
        height: 14px;
        margin-right: 0px;
        display: block;
    }

    .recruit-links {
        margin-top: 243px; /* Figma SP: Group 271 top → Phil link = 240 */
        padding: 0;
    }

    .recruit-links__inner {
        grid-template-columns: 1fr;
        gap: 32px; /* Figma SP: 30 between link rows */
        padding: 0 20px;
    }

    .recruit-links__item {
        padding-bottom: 14px;
    }

    .recruit-links__item-en {
        font-size: 24px;
    }

    .recruit-links__item-arrow {
        width: 11px;
        height: 14px;
        flex-shrink: 0;
        align-self: center;
        margin-right: 20px;
    }

    .recruit-cta-cards {
        padding: 30px 0 0px; /* Figma SP: top 30 from Msg line, bottom 80 to footer */
    }

    .recruit-cta-cards__inner {
        grid-template-columns: 1fr;
        gap: 20px; /* Figma SP: 20 between Reservation and Entry */
        padding: 0 20px;
    }

    .recruit-cta-cards__card {
        min-height: 171px;
        padding: 32px;
    }

    .recruit-cta-cards__card-en {
        font-size: 30px;
    }

    .recruit-cta-cards__card-ja {
        font-size: 12px;
        margin-top: 13px;
    }

    /* Philosophy - Mobile (Figma SP: /recruit/Philosophy 390px) */
    .ph-header {
        padding-top: 137px;
    }

    .ph-header__inner {
        padding: 0 20px;
    }

    .ph-header__label {
        font-size: 13px;
    }

    .ph-header__heading {
        font-size: 32px;
        margin-top: 15px; /* Figma: label y=120 → heading y=150 */
    }

    .ph-header__line {
        margin: -2px 20px;
    }

    .ph-intro {
        padding-top: 167px; /* Figma: line y=177 → heading y=337 */
    }

    .ph-intro__inner {
        flex-direction: column;
        padding: 0 20px;
        gap: 53px; /* Figma: heading bottom ~y=445 → body y=505 */
        margin: 0 auto;
    }

    .ph-intro__left {
        padding-left: 0;
    }

    .ph-intro__heading {
        font-size: 24px;
    }

    .ph-intro__right {
        width: 100%;
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 151px;
    }

    .ph-intro__block + .ph-intro__block {
        margin-top: 20px; /* Figma: empty-line spacer (13×1.8) */
    }

    .ph-section {
        padding-top: 0;
        padding-bottom: 50px; /* Figma: 50 from photo bottom to next line */
    }

    /* Reset desktop's per-section line/photo/body offsets on SP */
    .ph-section__line,
    .ph-section--purpose .ph-section__line,
    .ph-section--management .ph-section__line,
    .ph-section--guiding .ph-section__line,
    .ph-section--slogan .ph-section__line {
        margin: 0 20px;
    }

    .ph-section__inner {
        padding: 50px 20px 0; /* Figma: 50 from line to label */
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .ph-section__label {
        margin-top: 0;
    }

    .ph-section__body,
    .ph-section--guiding .ph-section__body {
        margin-top: 0;
    }

    .ph-section__label-en {
        font-size: 16px;
        line-height: 1.5;
        margin-top: 0;
    }

    .ph-section__label-ja {
        font-size: 15px;
        line-height: 1.5;
        margin-top: 14px; /* Figma: en y=1116 → ja y=1160 */
    }

    .ph-section__heading {
        font-size: 26px;
        margin-top: 17px;
    }

    .ph-section__heading-en {
        font-size: 24px;
    }

    .ph-section__heading-ja {
        font-size: 16px;
    }

    /* Slogan heading on SP: stack vertically, JP right-aligned */
    .ph-section--slogan .ph-section__heading--slogan {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    /* .ph-section--slogan .ph-section__heading-ja {
        align-self: flex-end;
    } */

    .ph-section__text {
        margin-top: 23px;
        font-size: 13px;
        line-height: 1.8;
    }

    .ph-section__photo,
    .ph-section--purpose .ph-section__photo,
    .ph-section--management .ph-section__photo,
    .ph-section--guiding .ph-section__photo,
    .ph-section--slogan .ph-section__photo {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 350 / 217;
        justify-self: stretch;
        margin-top: -14px; /* Figma: extra body→photo gap (total ~60 with row-gap) */
        position: static; /* reset desktop's relative top offsets */
        top: auto;
    }

    .ph-principles {
        gap: 12px; /* Figma SP: 82 between item tops − ~70 for 3-line text */
    }

    .ph-principle {
        grid-template-columns: 36px 1fr;
    }

    .ph-principle__num {
        font-size: 16px;
    }

    .ph-principle__text {
        font-size: 13px;
        line-height: 1.8;
    }

    /* SP: no bottom line — Slogan photo flows directly into recruit-links */
    .ph-bottom-line__wrap {
        display: none;
    }

    .ph-section--slogan {
        padding-bottom: 41px; /* Figma: Slogan photo bottom touches recruit-links */
    }

    .ph-bottom-line__wrap + .recruit-links {
        margin-top: 200px;
    }

    /* Business - Mobile (per Figma SP /recruit/Business 390px) */
    .biz-intro {
        padding-top: 40px; /* line y=177 → intro y=337 */
    }

    .biz-intro__inner {
        padding: 0 20px;
    }

    .biz-intro__heading {
        font-size: 24px;
        margin-top: 123px;
    }

    .biz-intro__text {
        font-size: 13px;
        line-height: 1.8;
        margin-top: 53px; /* heading h=108 ends y=445, body y=505 */
    }

    .biz-roles {
        padding-top: 151px; /* intro body ends y=630, first section tab y=790 */
    }

    .biz-role:first-child {
        padding-top: 0;
    }

    .biz-role + .biz-role {
        padding-top: 118px; /* previous photo bottom → next section tab */
        padding-bottom: 0;
    }

    .biz-role:last-child {
        padding-bottom: 0px;
    }

    /* SP: collapse to single column — sections stack with inline photos,
       shared sticky stage is hidden. */
    .biz-roles__inner {
        display: block;
        padding: 0;
    }

    .biz-roles__stage {
        display: none;
    }

    .biz-role {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .biz-role__left {
        order: 1;
        padding: 0 20px;
    }

    .biz-role__photo--inline {
        display: block;
        order: 2;
        width: 100%;
        margin-top: 41px;
        aspect-ratio: 390 / 260; /* Figma SP landscape */
        overflow: hidden;
    }

    .biz-role__photo--inline img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .biz-role__heading {
        font-size: 22px;
        line-height: 1.5;
        margin-top: 53px; /* tab → heading */
    }

    /* 施工管理のheadingのみ句読点詰めで意図しない改行を回避 */
    .biz-role[data-photo-index="2"] .biz-role__heading {
        font-feature-settings: 'palt' 1;
        letter-spacing: -0.03em;
    }

    .biz-role__lead {
        margin-top: 21px;
        padding-bottom: 32px;
        font-size: 13px;
        line-height: 1.8;
    }

    .biz-role__row {
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 19px 0 22px 0;
    }

    .biz-role__row-text {
        font-size: 13px;
        line-height: 1.8;
    }

    /* Message - Mobile */
    .msg-content {
        padding-top: 153px;
    }

    .msg-content__inner {
        display: block;
        padding: 0 20px;
    }

    .msg-content__heading {
        font-size: 28px;
        margin-bottom: 43px;
        /* SP: stacked layout — disable sticky, heading flows inline above body. */
        position: static;
        top: auto;
    }

    .msg-content__text {
        font-size: 13px;
        line-height: 2;
    }

    .msg-content__text p + p {
        margin-top: 0.3em;
    }

    .msg-content__stanza + .msg-content__stanza {
        margin-top: 32px
    }

    .msg-content__signature {
        font-size: 13px;
        margin-top: 64px;
    }
}

/* SP表示の時だけ、英語と日本語を横並びに */
@media (max-width: 768px) {
    .recruit-links__item-text {
        display: flex;
        align-items: baseline;  /* 文字の下端を揃える */
        gap: 13px;              /* 英語と日本語の間隔 */
    }
    
    /* 日本語の上余白をリセット */
    .recruit-links__item-ja {
        margin-top: 0;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .recruit-cta-cards__card {
        padding: 30px 30px 80px 30px;
    }
}

@media (max-width: 768px) {
    /* カードを基準に矢印を配置するため relative を指定 */
    .recruit-cta-cards__card {
        position: relative;  /* 既にあるけど念のため */
        padding: 30px 30px 80px 30px;
    }

    /* 矢印を絶対位置で配置 */
    .recruit-cta-cards__card-arrow,
    .recruit-cta-cards-arrow {
        position: absolute;
        right: 30px;   /* カードの右から30px */
        bottom: 30px;  /* カードの下から50px */
    }
}

/* ==========================================================================
   Recruit Drawer (SP) — Figmaの採用ページ用ハンバーガーメニュー
   PCでは通常drawer(.drawer--pc-only)、SPではrecruit drawer(.drawer--sp-only)を表示
   ========================================================================== */
@media (max-width: 768px) {
    .drawer--pc-only {
        display: none;
    }
}

@media (min-width: 769px) {
    .drawer--sp-only {
        display: none;
    }
}

@media (max-width: 768px) {
    .drawer--recruit .drawer__panel {
        width: 100%;
        padding: 24px 20px 30px;
    }

    .drawer--recruit .drawer__logo--recruit {
        display: inline-flex;
        position: absolute;
        top: 24px;
        left: 20px;
        width: auto;
        align-items: center;
        gap: 6px;
    }

    .drawer--recruit .drawer__logo--recruit img {
        width: 100px;
        height: auto;
        margin-top: 0;
    }

    .drawer--recruit .drawer__logo-suffix {
        font-family: var(--font-marcellus);
        font-size: 14px;
        color: var(--color-white);
        line-height: 1;
        margin-top: 0;
    }

    .drawer--recruit .drawer__close {
        top: 24px;
        right: 20px;
    }

    .drawer--recruit .drawer__nav--main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin: 110px 0 0;
        padding: 0;
        text-align: center;
    }

    .drawer--recruit .drawer__link--main {
        font-family: var(--font-marcellus);
        font-size: 16px;
        color: var(--color-white);
        line-height: 1;
    }

    .drawer--recruit .drawer__divider {
        width: 100%;
        height: 1px;
        background-color: var(--color-white);
        border: 0;
        margin: 50px 0 35px;
    }

    .drawer--recruit .drawer__nav--sub {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 28px;
        column-gap: 10px;
        margin: 0;
        padding: 0;
        align-items: start;
    }

    .drawer--recruit .drawer__link--sub {
        font-family: var(--font-noto);
        font-weight: 400;
        font-size: 13px;
        color: var(--color-white);
        line-height: 1;
        text-align: left;
    }

    /* 既存ルール .drawer__link:first-child(Marcellus) を sub の TOP に適用させる */
    .drawer--recruit .drawer__nav--sub .drawer__link--sub:first-child {
        font-family: var(--font-marcellus);
    }

    .drawer--recruit .drawer__copyright {
        margin-top: auto;
        text-align: center;
        font-size: 12px;
        white-space: normal;
    }
}