@charset "UTF-8";

/* -------------------------------------------------------
    staff.html タブレット版（768px〜1439px）
    css/staff.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1439px) {

    /* -------------------------
        このファイルは staff.html（18_職員紹介）専用のスタイルです。
        ヘッダー・フッター・共通ボタン・共通見出し（.c-heading）は css/common.css を参照しています。
    ------------------------- */

    .l-main {
        min-width: 69.4444vw;
        background: var(--color-cream);
        overflow: clip;
    }


    /* -------------------------
        ページタイトル（ヒーロー）
    ------------------------- */

    .staff-hero {
        position: relative;
        padding: 17.3611vw 0 4.1667vw;
        overflow: hidden;
    }

    .staff-hero__inner {
        position: relative;
        z-index: 1;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 15.2778vw;
    }

    .staff-hero__tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5556vw 0.8333vw;
        background: var(--color-orange);
        border-radius: 0.2778vw;
        color: #fff;
        font-size: 1.3194vw;
        font-weight: 700;
    }

    .staff-hero__title {
        margin-top: 1.4583vw;
        color: #000;
        font-size: 2.6389vw;
        font-weight: 700;
        letter-spacing: 1.9px;
        line-height: 4.1667vw;
    }

    .staff-hero__profile {
        margin-top: 2.7778vw;
    }

    .staff-hero__profile-heading {
        display: flex;
        align-items: baseline;
        gap: 1.1806vw;
    }

    .staff-hero__profile-role {
        font-size: 1.1111vw;
        letter-spacing: 0.8px;
    }

    .staff-hero__profile-name {
        font-size: 1.6667vw;
        font-weight: 500;
        letter-spacing: 1.2px;
    }

    .staff-hero__profile-meta {
        margin-top: 0.5556vw;
        font-size: 1.1111vw;
        line-height: 2.0833vw;
    }

    .staff-hero__illust {
        position: absolute;
        right: 1.3889vw;
        top: -3.4722vw;
        width: 57.6389vw;
        height: 34.2722vw;
        pointer-events: none;
    }

    .staff-hero__illust-photo {
        position: absolute;
        top: 0;
        left: 15.4625vw;
        width: 42.1764vw;
        height: 32.2021vw;
    }

    .staff-hero__illust-dots {
        position: absolute;
        top: 0.2764vw;
        left: 0.3451vw;
        width: 13.9437vw;
        height: 13.5986vw;
    }

    .staff-hero__illust-mountain {
        position: absolute;
        top: 26.0236vw;
        left: 0;
        width: 32.3056vw;
        height: 8.2486vw;
        z-index: 1;
    }


    /* -------------------------
        インタビュー（Q&A × 2 + 写真 を1グループとして3グループ）
    ------------------------- */

    .staff-interview {
        position: relative;
        padding: 2.7778vw 0 4.1667vw;
        overflow: clip;
    }

    .staff-interview__inner {
        position: relative;
        max-width: 69.4444vw;
        margin: 0 auto;
        padding: 0;
    }

    .staff-interview__group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .staff-interview__group + .staff-interview__group {
        margin-top: 6.9444vw;
    }

    .staff-interview__text {
        align-self: flex-start;
        width: 60.2778vw;
        max-width: 100%;
        margin: 6.9444vw auto 0;
    }

    .staff-interview__q {
        margin-top: 2.7778vw;
        color: var(--color-orange);
        font-size: 2.4306vw;
        font-weight: 700;
        line-height: 4.1667vw;
    }

    .staff-interview__text > .staff-interview__q:first-child {
        margin-top: 0;
    }

    .staff-interview__a {
        font-size: 1.3889vw;
        line-height: 2.4306vw;
    }

    .staff-interview__a--gap-lg {
        margin-bottom: 9.7222vw;
    }

    .staff-interview__photo {
        display: block;
        width: 69.4444vw;
        max-width: 100%;
        aspect-ratio: 1000 / 445;
        object-fit: cover;
        margin-top: 2.7778vw;
        border-radius: 2.1528vw;
    }

    .staff-interview__deco {
        position: absolute;
        pointer-events: none;
    }

    .staff-interview__photo-wrap {
        position: relative;
        display: inline-block;
    }

    .staff-interview__deco--01 {
        top: -2.7778vw;
        right: -4.1667vw;
        width: 10.4167vw;
        height: auto;
    }

    .staff-interview__deco--02 {
        bottom: -2.7778vw;
        left: -4.1667vw;
        width: 15.9722vw;
        height: auto;
    }

    .staff-interview__deco--03 {
        right: -13.1944vw;
        top: 14.5833vw;
        width: 14.5833vw;
        height: auto;
    }

    .staff-interview__deco--04 {
        left: -27.0833vw;
        top: 42.7083vw;
        width: 18.75vw;
        height: auto;
    }

    .staff-interview__deco--05 {
        right: -13.8889vw;
        top: 96.5278vw;
        width: 13.8889vw;
        height: auto;
    }

    .staff-interview__deco--06 {
        left: -17.3611vw;
        top: 194.4444vw;
        width: 14.5833vw;
        height: auto;
    }


    /* -------------------------
        わたしの代表的な1日紹介
    ------------------------- */

    .staff-schedule {
        padding: 6.9444vw 1.3889vw 13.8889vw;
    }

    .staff-schedule__deco {
        position: absolute;
        height: auto;
        pointer-events: none;
    }

    .staff-schedule__deco--01 {
        left: -4.8611vw;
        top: -2.7778vw;
        width: 11.8056vw;
    }

    .staff-schedule__deco--02 {
        right: -20.1389vw;
        top: 0;
        width: 24.3056vw;
    }

    .staff-schedule__deco--03 {
        right: -9.7222vw;
        bottom: -8.3333vw;
        width: 23.6111vw;
    }

    .staff-schedule__deco--04 {
        left: -11.8056vw;
        bottom: -2.0833vw;
        width: 20.8333vw;
    }

    .staff-schedule__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 6.9444vw 2.7778vw 4.1667vw;
        background: #fff;
        border-radius: 2.1528vw;
        text-align: center;
    }

    .staff-schedule__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6944vw 9.0278vw;
        height: 3.6806vw;
        background: var(--color-green);
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 1.6667vw;
        font-weight: 700;
        letter-spacing: 2.4px;
        white-space: nowrap;
        margin: 0 auto 2.0833vw;
    }

    .staff-schedule__timeline {
        position: relative;
        max-width: 50vw;
        margin: 0 auto;
        padding: 0.6944vw 0;
        list-style: none;
        text-align: left;
    }

    .staff-schedule__timeline::before {
        content: "";
        position: absolute;
        left: 10.4vw;
        top: 0.6944vw;
        bottom: 0.6944vw;
        border-left: 0.2vw dashed var(--color-green);
    }

    .staff-schedule__item {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 1.6667vw;
        padding: 1.1111vw 0;
    }

    .staff-schedule__item::before {
        content: "";
        position: absolute;
        left: 10.4167vw;
        top: 2.2222vw;
        width: 0.6944vw;
        height: 0.6944vw;
        background: var(--color-green);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .staff-schedule__time {
        flex: 0 0 8.3333vw;
        min-width: 0;
        color: var(--color-green);
        font-size: 1.3889vw;
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
    }

    .staff-schedule__desc {
        flex: 1;
        margin: 0;
        padding-left: 2.0833vw;
        color: #333;
        font-size: 1.1111vw;
    }


    /* -------------------------
        OFFのわたし
    ------------------------- */

    .staff-off {
        position: relative;
        overflow: visible;
        background: var(--color-cream);
        padding: 12.5vw 0;
    }

    .staff-off__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
    }

    .staff-off__inner {
        position: relative;
        z-index: 1;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .staff-off__card {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4.1667vw;
        margin-top: 4.1667vw;
    }

    .staff-off__deco-book {
        position: absolute;
        right: -6.9444vw;
        top: -6.9444vw;
        width: 14.5833vw;
        height: auto;
        pointer-events: none;
    }

    .staff-off__photo {
        flex-shrink: 0;
        width: 25.5556vw;
        height: 25.5556vw;
        border-radius: 50%;
        object-fit: cover;
    }

    .staff-off__bubble {
        position: relative;
        max-width: 40.2778vw;
        padding: 4.1667vw 4.8611vw;
        background: #fff;
        border-radius: 2.0833vw;
    }

    .staff-off__bubble::after {
        content: "";
        position: absolute;
        left: -2.0833vw;
        top: 50%;
        width: 2.7778vw;
        height: 3.4722vw;
        background: #fff;
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
        transform: translateY(-50%);
    }

    .staff-off__text {
        font-size: 1.3889vw;
        line-height: 2.7778vw;
    }


    /* -------------------------
        職員一覧
    ------------------------- */

    .staff-list {
        padding: 3.4722vw 1.3889vw 27.7778vw;
    }

    .staff-hero:last-child,
    .staff-interview:last-child,
    .staff-schedule:last-child,
    .staff-off:last-child {
        padding-bottom: 27.7778vw;
    }

    .staff-list__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
    }

    .staff-list__note {
        margin: 0 0 6.9444vw;
        color: #000;
        font-size: 1.3889vw;
        letter-spacing: 1px;
        text-align: right;
    }

    .staff-list__deco-dots {
        position: absolute;
        left: -17.3611vw;
        top: -19.4444vw;
        width: 15.2778vw;
        height: auto;
        z-index: 1;
        pointer-events: none;
    }

    .staff-list__slider {
        position: relative;
        margin: 0 0 4.1667vw;
    }

    .staff-list__viewport {
        overflow: hidden;
        padding: 0.6944vw 0;
        margin: -0.6944vw 0;
    }

    .staff-list__viewport img {
        -webkit-user-drag: none;
        user-select: none;
    }

    .staff-list__grid {
        display: flex;
        gap: 1.3889vw;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .recruit-staff-card {
        flex: 0 0 auto;
    }

    .staff-list__prev,
    .staff-list__next {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 4.2361vw;
        height: 4.2361vw;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity 0.3s;
    }

    .staff-list__prev {
        left: -2.0833vw;
    }

    .staff-list__next {
        right: -2.0833vw;
    }

    .staff-list__prev:hover,
    .staff-list__next:hover {
        opacity: 0.8;
    }

    .staff-list__prev-icon,
    .staff-list__next-icon {
        display: block;
        width: 100%;
        height: 100%;
    }

    .staff-list__prev-icon {
        transform: scaleX(-1);
    }

    .recruit-staff-card {
        background: #fff;
        border-radius: 2.0833vw;
        box-shadow: 0 4px 5px rgba(101, 63, 49, 0.2);
    }

    .recruit-staff-card a {
        position: relative;
        display: block;
        padding-bottom: 1.3889vw;
        border-radius: 2.0833vw;
        overflow: hidden;
        text-decoration: none;
        color: #333;
        transition: opacity 0.3s;
    }

    .recruit-staff-card a:hover {
        opacity: 0.8;
    }

    .recruit-staff-card__photo-wrap {
        overflow: hidden;
    }

    .recruit-staff-card__photo {
        display: block;
        width: 100%;
        aspect-ratio: 311 / 319;
        object-fit: cover;
        transform: scale(1.2);
        margin: 0;
    }

    .recruit-staff-card__name {
        margin: 0.3472vw 1.6667vw 0.2778vw;
        font-size: 1.6667vw;
        font-weight: 500;
        letter-spacing: 1.2px;
        text-align: left;
    }

    .recruit-staff-card__meta {
        margin: 1.6667vw 1.6667vw 0;
        font-size: 1.1111vw;
        text-align: left;
    }

    .recruit-staff-card__arrow {
        position: absolute;
        right: 1.3889vw;
        bottom: 1.1111vw;
        width: 2.3611vw;
        height: 2.3611vw;
    }

}