@charset "UTF-8";
/*
 * 採用情報ページ FV（2026-08 リニューアル）
 *
 * 旧FVは「左テキスト＋右に幅300pxの縦スライダー2列」で写真が小さく、
 * 余白も持て余していた。全面リニューアルにあたり、
 * 旧CSS（.fv .fv-wrapper …）と衝突しないよう新しいクラス名にしている。
 *
 * 構成:
 *   背景写真（暗く沈める） → 深緑のグラデーション → 大きな明朝の見出し
 *   → 下部に写真の横スクロール帯 → 右端にスクロール誘導
 *
 * 文字サイズはこのFV専用に clamp() で流動指定している
 * （テーマの px-vw() は設計幅固定のため、特大見出しでは扱いにくいため）。
 */

.recruit-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 820px;
    padding: 160px 0 280px;
    background: #1b2622;
}

/* ---------- 背景のシンボルマーク ----------
   右側に大きく置き、深緑に沈めて透かしのように見せる。
   グラデーション(::before)より手前に置かないと沈みすぎるため z-index で調整。 */
.recruit-hero__mark {
    position: absolute;
    top: 50%;
    right: 4%;
    z-index: 1;
    height: 69%;
    transform: translateY(-50%);
    pointer-events: none;
}

.recruit-hero__mark img {
    display: block;
    width: auto;
    height: 100%;
    opacity: 0.06;
    animation: recruit-hero-float 18s ease-in-out infinite alternate;
}

@keyframes recruit-hero-float {
    from { transform: translateY(-1.4%) scale(1); }
    to   { transform: translateY(1.4%) scale(1.035); }
}

/* 深緑のグラデーションで文字側を沈める */
.recruit-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, #1b2622 0%, rgba(27, 38, 34, 0.9) 38%, rgba(27, 38, 34, 0) 100%),
        linear-gradient(180deg, rgba(27, 38, 34, 0.6) 0%, rgba(27, 38, 34, 0) 30%, rgba(27, 38, 34, 0.85) 100%);
    pointer-events: none;
}

/* ---------- テキスト ---------- */
.recruit-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1280px, 100% - 160px);
    margin: 0 auto;
}

.recruit-hero__label {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 34px;
}

.recruit-hero__label::before {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    background: #b39845;
}

.recruit-hero__label-en {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    color: #b39845;
}

.recruit-hero__label-ja {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.6);
}

.recruit-hero__title {
    margin: 0 0 30px;
    font-family: "Zen Old Mincho", serif;
    font-size: clamp(40px, 5.6vw, 84px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.15em;
    color: #fff;
}

.recruit-hero__catch {
    margin: 0 0 40px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(15px, 1.35vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14em;
    color: rgba(129, 160, 153, 0.95);
}

.recruit-hero__text {
    max-width: 46em;
    margin: 0 0 48px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 400;
    line-height: 2.15;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- エントリーボタン ---------- */
.recruit-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 20px 46px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: #b39845;
    border: 1px solid rgba(179, 152, 69, 0.75);
    background: transparent;
    transition: color 0.45s ease, background-color 0.45s ease, border-color 0.45s ease;
}

.recruit-hero__cta svg {
    width: 20px;
    height: auto;
    transition: transform 0.45s ease;
}

.recruit-hero__cta:hover {
    color: #1b2622;
    border-color: #b39845;
    background: #b39845;
}

.recruit-hero__cta:hover svg {
    transform: translateX(6px);
}

/* ============================================================
 * 下部の写真帯（無限スクロール）
 * 6枚を2セット並べ、-50% 動かして継ぎ目なくループさせる
 * ============================================================ */
.recruit-hero__marquee {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.recruit-hero__track {
    display: flex;
    gap: 16px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: recruit-hero-marquee 46s linear infinite;
}

.recruit-hero__track li {
    margin: 0;
    flex-shrink: 0;
}

.recruit-hero__track img {
    display: block;
    width: 300px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* 中央基準だと人物の頭が切れるため上端を基準に切り抜く（旧FVと同じ指定） */
    object-position: center top;
}

@keyframes recruit-hero-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 8px)); }
}

.recruit-hero__marquee:hover .recruit-hero__track {
    animation-play-state: paused;
}

/* ============================================================
 * スクロール誘導（右端・中央）
 * 既存の .button-scroll は display:none !important でサイト全体
 * 無効化されているため、このFV専用に別要素で用意している。
 * ============================================================ */
.recruit-hero__scroll {
    position: absolute;
    top: 50%;
    right: 46px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transform: translateY(-50%);
}

.recruit-hero__scroll-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.6);
    writing-mode: vertical-rl;
    transition: color 0.4s ease;
}

.recruit-hero__scroll-line {
    position: relative;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 72px;
    background: rgba(255, 255, 255, 0.2);
}

.recruit-hero__scroll-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #b39845;
    transform: translateY(-100%);
    animation: recruit-hero-scroll 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.recruit-hero__scroll:hover .recruit-hero__scroll-label {
    color: #b39845;
}

@keyframes recruit-hero-scroll {
    0%   { transform: translateY(-100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* ============================================================
 * タブレット
 * ============================================================ */
@media screen and (max-width: 1100px) {
    .recruit-hero {
        min-height: 720px;
        padding: 140px 0 250px;
    }

    .recruit-hero__inner { width: min(1280px, 100% - 96px); }

    .recruit-hero__scroll { right: 28px; }

    .recruit-hero__track img { width: 240px; }
}

/* ============================================================
 * スマホ
 * ============================================================ */
@media screen and (max-width: 768px) {
    .recruit-hero {
        align-items: flex-end;
        min-height: 0;
        padding: 140px 0 210px;
    }

    .recruit-hero__mark {
        right: -6%;
        height: 46%;
    }

    .recruit-hero__mark img { opacity: 0.05; }

    .recruit-hero__inner { width: calc(100% - 48px); }

    .recruit-hero__label {
        gap: 12px;
        margin-bottom: 24px;
    }

    .recruit-hero__label::before { width: 34px; }

    .recruit-hero__title {
        margin-bottom: 22px;
        font-size: 30px;
        line-height: 1.5;
        letter-spacing: 0.072em;
    }

    .recruit-hero__catch { margin-bottom: 26px; }

    .recruit-hero__text {
        margin-bottom: 34px;
        font-size: 13px;
        line-height: 2;
    }

    .recruit-hero__cta {
        gap: 14px;
        width: 100%;
        justify-content: center;
        padding: 18px 24px;
    }

    .recruit-hero__marquee { padding-bottom: 30px; }

    .recruit-hero__track {
        gap: 10px;
        animation-duration: 34s;
    }

    .recruit-hero__track img { width: 160px; }

    @keyframes recruit-hero-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-50% - 5px)); }
    }

    /* 縦に余裕がないので誘導は出さない */
    .recruit-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .recruit-hero__mark img,
    .recruit-hero__track,
    .recruit-hero__scroll-line::after {
        animation: none;
    }
}

/* ============================================================
 * エントリーCTAセクション（採用の流れの直後）
 *
 * 本文中の応募導線がFVのボタン1つだけだったため新設。
 * FVと同じトーン（深緑＋写真＋ゴールド）で揃えている。
 * ============================================================ */
.recruit-entry {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 140px 0;
    background: #1b2622;
    text-align: center;
}

.recruit-entry__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.recruit-entry__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.22;
}

.recruit-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(27, 38, 34, 0.72) 0%, rgba(27, 38, 34, 0.95) 70%);
    pointer-events: none;
}

.recruit-entry__inner {
    position: relative;
    z-index: 2;
    width: min(880px, 100% - 96px);
    margin: 0 auto;
}

.recruit-entry__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 26px;
}

.recruit-entry__label::before,
.recruit-entry__label::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: #b39845;
}

.recruit-entry__label-en {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    color: #b39845;
}

.recruit-entry__label-ja {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(11px, 0.85vw, 12px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.6);
}

.recruit-entry__title {
    margin: 0 0 26px;
    font-family: "Zen Old Mincho", serif;
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.1em;
    color: #fff;
}

.recruit-entry__text {
    margin: 0 0 48px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 400;
    line-height: 2.1;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.76);
}

.recruit-entry__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-width: 340px;
    padding: 24px 52px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: #1b2622;
    border: 1px solid #b39845;
    background: #b39845;
    transition: color 0.45s ease, background-color 0.45s ease;
}

.recruit-entry__cta svg {
    width: 20px;
    height: auto;
    transition: transform 0.45s ease;
}

.recruit-entry__cta:hover {
    color: #b39845;
    background: transparent;
}

.recruit-entry__cta:hover svg {
    transform: translateX(6px);
}

@media screen and (max-width: 768px) {
    .recruit-entry {
        padding: 90px 0;
    }

    .recruit-entry__inner { width: calc(100% - 48px); }

    .recruit-entry__label {
        gap: 10px;
        margin-bottom: 20px;
    }

    .recruit-entry__label::before,
    .recruit-entry__label::after { width: 24px; }

    .recruit-entry__title {
        margin-bottom: 20px;
        line-height: 1.6;
        letter-spacing: 0.06em;
    }

    .recruit-entry__text {
        margin-bottom: 34px;
        line-height: 2;
    }

    .recruit-entry__cta {
        gap: 14px;
        width: 100%;
        min-width: 0;
        padding: 20px 24px;
    }
}

/* ============================================================
 * シンボルマークにザラつきを与える
 *
 * ロゴのSVGでマスクを作り、中身をノイズ（feTurbulenceで生成した
 * グレースケールのタイル）に置き換えている。
 * ベタ塗りではなく粒状になるため、深緑の上で紙質のような質感になる。
 *
 * mask 未対応の環境では従来どおり <img> がそのまま表示されるよう
 * @supports で囲っている。
 * ============================================================ */
@supports (mask-image: url("../img/page/recruit-mark.svg")) or (-webkit-mask-image: url("../img/page/recruit-mark.svg")) {

    .recruit-hero__mark {
        aspect-ratio: 120.21 / 167.68;

        /* アニメーションで transform を使うため、中央寄せは margin:auto で行う */
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        transform: none;

        -webkit-mask-image: url("../img/page/recruit-mark.svg");
        mask-image: url("../img/page/recruit-mark.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;

        /* ノイズのタイル（グレースケール） */
        /* feComponentTransfer でコントラストを上げ、粒を粗く見せている */
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 230px 230px;

        opacity: 0.09;
        animation: recruit-hero-float 18s ease-in-out infinite alternate;
    }

    /* マスク側で描くので元画像は隠す */
    .recruit-hero__mark img {
        visibility: hidden;
        animation: none;
    }

    @media screen and (max-width: 768px) {
        .recruit-hero__mark {
            background-size: 150px 150px;
            opacity: 0.08;
        }
    }

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

/* ============================================================
 * 社員インタビュー（People）／ 働く環境（Culture）
 *
 * 前提の修正:
 * 採用ページの .job / .flow は「見出しを全幅・本文を1280px」に
 * 上書きしているのに対し、新規セクションには上書きが無く
 * 汎用ルール（見出し475pxの2カラム＝本文約805px）が当たっていた。
 * 写真主体のブロックが最も狭いという状態だったため、
 * 他セクションと同じ全幅レイアウトに揃える。
 * ============================================================ */
.people.section .is-wrapper,
.culture.section .is-wrapper {
    display: block;
}

.people.section .is-wrapper > .head,
.culture.section .is-wrapper > .head {
    width: 100%;
    margin-bottom: 56px;
}

.people.section .is-wrapper > .content,
.culture.section .is-wrapper > .content {
    width: 100%;
}

/* ============================================================
 * 働く環境（Culture）
 *
 * ページの流れが「暗いFV → 明るい連続 → 暗いCTA」で中盤が単調なため、
 * このセクションだけ深緑にしてリズムをつける。写真も暗背景で締まる。
 *
 * 1枚目だけ2列×2行の大きな枠、残りを正方形で敷き詰めるモザイク。
 * ============================================================ */
.culture.section {
    background: #1b2622;
}

.culture.section .is-wrapper > .head { color: #fff; }
.culture.section .is-wrapper > .head span { color: #b39845; }

.culture-lead {
    max-width: 46em;
    margin: 0 0 56px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 2.15;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.76);
}

.culture-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: culture-item;
}

.culture-item {
    margin: 0;
    min-width: 0;
    counter-increment: culture-item;
}

/* 1枚目は2列×2行ぶんの大きな枠。
   キャプションの高さを差し引くため縦フレックスにして写真側を伸ばす。 */
.culture-item--wide {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.culture-item__photo {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.culture-item__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.culture-item--wide .culture-item__photo {
    flex: 1;
    min-height: 0;
}

.culture-item--wide .culture-item__photo img {
    height: 100%;
    aspect-ratio: auto;
}

.culture-item:hover .culture-item__photo img { transform: scale(1.05); }

.culture-item__caption {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.66);
}

.culture-item__caption::before {
    content: counter(culture-item, decimal-leading-zero);
    flex-shrink: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #b39845;
}

@media screen and (max-width: 768px) {
    .culture-lead {
        margin-bottom: 7.69vw;
        font-size: 3.5897vw;
        line-height: 2;
    }

    .culture-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5.12vw 2.56vw;
    }

    .culture-item--wide {
        grid-column: span 2;
        grid-row: auto;
        display: block;
    }

    .culture-item--wide .culture-item__photo { flex: none; }

    .culture-item--wide .culture-item__photo img {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .culture-item__caption {
        gap: 1.79vw;
        margin-top: 2.05vw;
        font-size: 2.82vw;
    }

    .culture-item__caption::before { font-size: 2.56vw; }
}

@media (prefers-reduced-motion: reduce) {
    .culture-item__photo img { transition: none; }
}

/* ============================================================
 * 社員インタビュー（カード）
 *
 * カードは写真1枚に集約し、部署・入社年・氏名を写真へ重ねる。
 * キャッチコピーと本文はクリックで開くモーダル側で見せる。
 * ============================================================ */
.people-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: people-card;
}

.people-card {
    margin: 0;
    min-width: 0;
    counter-increment: people-card;
}

.people-card__button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.people-card__photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: #3a3a37;
}

.people-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

/* 下端を暗くして、重ねた文字を読めるようにする */
.people-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(18, 18, 18, 0.88) 0%,
        rgba(18, 18, 18, 0.45) 30%,
        rgba(18, 18, 18, 0) 62%);
    pointer-events: none;
}

/* 左上の通し番号 */
.people-card__photo::before {
    content: counter(people-card, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 12px 18px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    color: #1b2622;
    background: #b39845;
}

.people-card__button:hover .people-card__photo img {
    transform: scale(1.05);
    filter: brightness(0.88);
}

.people-card__button:focus-visible .people-card__photo {
    outline: 2px solid #b39845;
    outline-offset: 3px;
}

/* ---------- 写真に重ねるテキスト ---------- */
.people-card__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 26px 26px;
}

.people-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
}

.people-card__dept { color: #d8c48a; }

.people-card__year {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
}

.people-card__name {
    font-family: "Zen Old Mincho", serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #fff;
}
/* ============================================================
 * 社員インタビューのモーダル
 * 生成は assets/js/interview.js
 * ============================================================ */
.itv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: rgba(18, 18, 18, 0.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.itv-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.itv-modal__inner {
    position: relative;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 56px;
    width: min(1080px, 100%);
    max-height: 100%;
    padding: 64px;
    overflow-y: auto;
    background: #fff;
    transform: translateY(16px);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.itv-modal.is-active .itv-modal__inner { transform: translateY(0); }

.itv-modal__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #ededea;
}

/* ---------- 右側テキスト ---------- */
.itv-modal__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
}

.itv-modal__dept { color: #b39845; }

.itv-modal__year {
    padding-left: 14px;
    border-left: 1px solid #d5d2ca;
    color: #8a8a8a;
}

.itv-modal__catch {
    margin: 0 0 22px;
    font-family: "Zen Old Mincho", serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: #121212;
}

.itv-modal__name {
    position: relative;
    margin: 0 0 40px;
    padding-bottom: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #5c5c5c;
}

.itv-modal__name::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: #b39845;
}

/* ---------- 質問と回答 ---------- */
.itv-modal__block + .itv-modal__block { margin-top: 34px; }

.itv-modal__q {
    position: relative;
    margin: 0 0 12px;
    padding-left: 16px;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: #121212;
}

.itv-modal__q::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 3px;
    height: 1em;
    background: #b39845;
}

.itv-modal__a {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 2.1;
    letter-spacing: 0.06em;
    color: #4a4a4a;
}

/* ---------- 閉じる ---------- */
.itv-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.itv-modal__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1.5px;
    background: #121212;
    transition: background 0.3s ease;
}

.itv-modal__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.itv-modal__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.itv-modal__close:hover span { background: #b39845; }

/* ============================================================
 * スマホ
 * ============================================================ */
@media screen and (max-width: 768px) {
    .people-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5.12vw 3.07vw;
    }

    .people-card__photo::before {
        padding: 1.79vw 2.82vw;
        font-size: 2.56vw;
    }

    .people-card__overlay {
        gap: 1.53vw;
        padding: 4.6vw 3.58vw 3.58vw;
    }

    .people-card__meta { gap: 2.05vw; font-size: 2.56vw; }
    .people-card__year { padding-left: 2.05vw; }
    .people-card__name { font-size: 4.35vw; }

    .itv-modal { padding: 16px 12px; }

    .itv-modal__inner {
        grid-template-columns: 1fr;
        gap: 7.69vw;
        padding: 12.8vw 6.15vw 10.25vw;
    }

    .itv-modal__photo img { aspect-ratio: 4 / 3; }

    .itv-modal__catch {
        margin-bottom: 4.6vw;
        font-size: 5.6vw;
    }

    .itv-modal__name {
        margin-bottom: 8.2vw;
        padding-bottom: 4.6vw;
        font-size: 3.33vw;
    }

    .itv-modal__block + .itv-modal__block { margin-top: 7.69vw; }

    .itv-modal__q { font-size: 4.1vw; }
    .itv-modal__a { font-size: 3.5897vw; line-height: 2; }

    .itv-modal__close {
        top: 3.07vw;
        right: 3.07vw;
        width: 10.25vw;
        height: 10.25vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .people-card__photo img,
    .itv-modal__inner { transition: none; }
}

/* ============================================================
 * FV 登場アニメーションの初期状態
 *
 * 動きは assets/js/recruit-hero.js（GSAP）で付ける。
 * ここでは「表示前に見えていない」状態だけを定義し、
 * JSが .is-shown を付けてからアニメーションが走る。
 * JSやGSAPが動かない場合も .is-shown が付与されるため、
 * 内容が隠れたままになることはない。
 * ============================================================ */

/* 見出しは1行ずつマスクして、下から立ち上げる */
.recruit-hero__line {
    display: block;
    overflow: hidden;
}

.recruit-hero__line > span {
    display: block;
}

.recruit-hero:not(.is-shown) .recruit-hero__label,
.recruit-hero:not(.is-shown) .recruit-hero__catch,
.recruit-hero:not(.is-shown) .recruit-hero__text,
.recruit-hero:not(.is-shown) .recruit-hero__marquee,
.recruit-hero:not(.is-shown) .recruit-hero__scroll {
    opacity: 0;
}

.recruit-hero:not(.is-shown) .recruit-hero__line > span {
    transform: translateY(110%);
}

/* 動きを減らす設定の端末では、初期状態から表示しておく */
@media (prefers-reduced-motion: reduce) {
    .recruit-hero .recruit-hero__label,
    .recruit-hero .recruit-hero__catch,
    .recruit-hero .recruit-hero__text,
    .recruit-hero .recruit-hero__marquee,
    .recruit-hero .recruit-hero__scroll {
        opacity: 1;
    }

    .recruit-hero .recruit-hero__line > span {
        transform: none;
    }
}