@charset "UTF-8";

/* ============================================================
   アルバイト採用ページ（/recruit/part-time/）専用CSS

   納品HTML「parttime_recruit.html」の <style> をそのまま移植。
   ただしテーマ共通CSS（common.css など）との衝突を避けるため、
   すべてのクラス名に .mf-pt プレフィックスを付け、
   .mf-pt 配下にスコープしている。デザイン・数値は納品版と同一。

   納品HTML側の site-header / footer / mobile-cta は
   テーマのヘッダー・フッターを使うため移植していない
   （固定CTAは使用しない指定のため .mobile-cta も不使用）。
   ============================================================ */

.mf-pt {
    --mf-pt-ink: #65606b;
    --mf-pt-dark: #4a443d;
    --mf-pt-mint: #46b6af;
    --mf-pt-mint-dark: #389a94;
    --mf-pt-peach: #da9e71;
    --mf-pt-cream: #faf6ef;
    --mf-pt-beige: #f2ebdf;
    --mf-pt-line: #d5d5d5;
    --mf-pt-gray: #78737d;
    max-width: 1000px;
    margin: 0 auto 50px;
    padding-top: 65px; /* 固定ヘッダー（SP:65px）分の余白 */
    background: #fff;
    color: var(--mf-pt-ink);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    /* 納品HTMLはブラウザ既定（16px / 通常太さ）が基準。
       common.css の body（font-size:3.5vw / font-weight:500）を打ち消す */
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
}

.mf-pt *,
.mf-pt *::before,
.mf-pt *::after {
    box-sizing: border-box;
}

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

.mf-pt a {
    color: inherit;
    text-decoration: none;
}

/* 共通CSSの見出しリセットを打ち消し、ブラウザ既定（太字）に戻す。
   個別に font-weight を指定している下のルールが優先される */
.mf-pt h1,
.mf-pt h2,
.mf-pt h3,
.mf-pt h4,
.mf-pt th,
.mf-pt strong,
.mf-pt b {
    font-weight: 700;
}

/* ===== FV ===== */
.mf-pt__fv {
    max-width: 1080px;
    margin: 0 auto;
}

.mf-pt__fv a {
    display: block;
}

.mf-pt__fv img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ===== セクション見出し ===== */
.mf-pt__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.mf-pt__head h1,
.mf-pt__head h2 {
    margin: 0 0 14px;
    color: var(--mf-pt-dark);
    font: 600 clamp(25px, 3vw, 34px)/1.55 "Noto Sans JP", sans-serif;
}

.mf-pt__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
}

.mf-pt__kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--mf-pt-mint-dark);
    font: 600 12px Raleway, sans-serif;
    letter-spacing: .18em;
}

/* ===== ストーリー ===== */
.mf-pt__story {
    padding: 72px 36px;
    background: linear-gradient(var(--mf-pt-cream), var(--mf-pt-beige));
}

.mf-pt__story-list {
    display: grid;
    gap: 52px;
}

.mf-pt__story-item {
    display: flex;
    align-items: center;
    gap: 48px;
}

.mf-pt__story-item:nth-child(even) {
    flex-direction: row-reverse;
}

.mf-pt__story-img {
    flex: 1 1 50%;
    aspect-ratio: 4/3;
    border-radius: 18px;
    background: center/cover no-repeat;
    box-shadow: 0 14px 30px rgba(74, 68, 61, .1);
}

.mf-pt__story-body {
    flex: 1 1 50%;
}

.mf-pt__num {
    display: block;
    margin-bottom: 7px;
    color: var(--mf-pt-mint);
    font: 600 40px/1 Raleway, sans-serif;
}

.mf-pt__story-body h3 {
    margin: 0 0 14px;
    color: var(--mf-pt-dark);
    font-size: 20px;
}

.mf-pt__story-body p {
    margin: 0;
    color: var(--mf-pt-dark);
    font-size: 15px;
    line-height: 1.9;
}

.mf-pt__story-close {
    margin: 55px 0 0;
    text-align: center;
    color: var(--mf-pt-mint-dark);
    font: 600 clamp(20px, 2.5vw, 28px) "Noto Sans JP", sans-serif;
}

/* ===== お問い合わせ後の流れ ===== */
.mf-pt__flow {
    padding: 72px 36px;
    background: var(--mf-pt-cream);
}

.mf-pt__flow-list {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.mf-pt__flow-list::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: #e7dac6;
}

.mf-pt__flow-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    position: relative;
    padding-bottom: 32px;
}

.mf-pt__flow-item:last-child {
    padding-bottom: 0;
}

.mf-pt__flow-num {
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mf-pt-mint);
    color: #fff;
    font: 600 18px Raleway, sans-serif;
}

.mf-pt__flow-panel {
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e7dac6;
    border-radius: 15px;
}

.mf-pt__flow-panel small {
    color: var(--mf-pt-mint-dark);
    font: 600 11px Raleway, sans-serif;
    letter-spacing: .12em;
}

.mf-pt__flow-panel h3 {
    margin: 4px 0 8px;
    color: var(--mf-pt-dark);
    font-size: 17px;
    line-height: 1.6;
}

.mf-pt__flow-panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.mf-pt__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.mf-pt__chips span {
    padding: 6px 12px;
    background: #f0e7d8;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1.3;
}

.mf-pt__recruiter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    background: var(--mf-pt-cream);
    border-radius: 12px;
}

.mf-pt__recruiter img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 16%;
}

.mf-pt__recruiter span {
    font-size: 11px;
}

.mf-pt__recruiter strong {
    display: block;
    color: var(--mf-pt-dark);
    font-size: 15px;
}

.mf-pt__speed {
    max-width: 720px;
    margin: 32px auto 0;
    padding: 12px;
    text-align: center;
    background: #e8f3ef;
    border-radius: 10px;
    color: #2e6e68;
    font-size: 15px;
    font-weight: 600;
}

/* ===== CTA ===== */
.mf-pt__cta-wrap {
    text-align: center;
    margin-top: 35px;
}

/* .mf-pt a{color:inherit} より詳細度を上げて文字色を白に保つ */
.mf-pt a.mf-pt__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 36px;
    background: var(--mf-pt-mint);
    border-radius: 99px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 8px 20px rgba(70, 182, 175, .24);
}

.mf-pt__cta-note {
    margin: 9px 0 0;
    font-size: 12px;
}

/* ===== サマリー（4カード） ===== */
.mf-pt__summary {
    padding: 34px 24px 48px;
    background: #f7f3ee;
}

.mf-pt__summary-title {
    text-align: center;
    margin: 0 0 20px;
    font-size: 13px;
    letter-spacing: .12em;
}

.mf-pt__summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}

.mf-pt__summary-card {
    padding: 22px 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0d5c5;
    border-radius: 10px;
}

.mf-pt__summary-label {
    margin: 0 0 9px;
    color: #a89880;
    font-size: 10px;
    letter-spacing: .12em;
}

.mf-pt__summary-value {
    margin: 0 0 7px;
    color: var(--mf-pt-dark);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.mf-pt__summary-sub {
    margin: 0;
    color: #7a6e65;
    font-size: 11px;
    line-height: 1.8;
}

.mf-pt__badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #e8f4f0;
    color: #4a8a78;
    font-size: 10px;
}

/* ===== 働き方 ===== */
.mf-pt__workstyle {
    padding: 72px 50px;
    background: #fff;
}

.mf-pt__workstyle-list {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--mf-pt-line);
    border: 1px solid var(--mf-pt-line);
}

.mf-pt__workstyle-item {
    padding: 32px;
    background: #fff;
}

.mf-pt__workstyle-no {
    display: block;
    color: var(--mf-pt-mint);
    font: 600 24px/1 Raleway, sans-serif;
}

.mf-pt__workstyle-item h3 {
    margin: 14px 0 10px;
    color: var(--mf-pt-dark);
    font: 700 19px/1.6 "Noto Sans JP", sans-serif;
}

.mf-pt__workstyle-item p {
    margin: 0;
    font-size: 14px;
    line-height: 2;
}

.mf-pt__workstyle-note {
    display: block;
    margin-top: 10px;
    color: #8b8480;
    font-size: 11px;
    line-height: 1.7;
}

.mf-pt__workstyle-close {
    max-width: 800px;
    margin: 30px auto 0;
    padding: 19px 25px;
    background: #e8f3ef;
    color: #2e6e68;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

/* ===== コンテンツ（MESSAGE / 研修 / VOICE / 募集要項 / CARE VALUE） ===== */
.mf-pt__content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 50px;
}

.mf-pt__section {
    padding: 50px 0;
    border-top: 1px solid var(--mf-pt-line);
}

.mf-pt__section:first-child {
    border-top: 0;
}

.mf-pt__title {
    margin: 0 0 34px;
    color: var(--mf-pt-ink);
}

.mf-pt__title .mf-pt__en {
    display: block;
    margin-bottom: 10px;
    font: 600 30px/1 Raleway, sans-serif;
    letter-spacing: 2px;
}

.mf-pt__title .mf-pt__jp {
    display: block;
    font-size: 12px;
    font-weight: 400;
}

.mf-pt__message {
    font-size: 15px;
    line-height: 2;
}

.mf-pt__message p {
    margin: 0 0 12px;
}

.mf-pt__message-lead {
    color: var(--mf-pt-peach);
    font-size: 20px;
    font-weight: 700;
}

/* 研修制度 */
.mf-pt__training-intro {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
    font-size: 16px;
    line-height: 2;
}

.mf-pt__training-list {
    display: grid;
    gap: 100px;
    /* 納品HTMLでは ol のブラウザ既定値（左40px・上下1em）がそのまま効いているため、
       共通CSSのリセットに影響されないよう同じ値を明示している */
    margin: 0 0 1em;
    padding-left: 40px;
    list-style: none;
}

.mf-pt__training-item {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
}

.mf-pt__training-item:nth-child(even) {
    flex-direction: row-reverse;
}

.mf-pt__training-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 20px);
    height: 60px;
    width: 1px;
    background: linear-gradient(var(--mf-pt-peach), transparent);
}

.mf-pt__training-img {
    flex: 0 0 52%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(120, 115, 125, .12);
}

.mf-pt__training-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.mf-pt__training-body {
    flex: 1;
}

.mf-pt__step {
    display: inline-block;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mf-pt-peach);
    color: var(--mf-pt-peach);
    font: 600 13px Raleway, sans-serif;
    letter-spacing: .25em;
}

.mf-pt__training-body h3 {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.6;
}

.mf-pt__training-body p {
    margin: 0;
    font-size: 15px;
    line-height: 2;
}

/* スタッフの声 */
.mf-pt__voices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    max-width: 540px;
    margin: 0 auto;
}

.mf-pt__voice {
    text-align: center;
    text-decoration: none;
}

.mf-pt__voice img {
    width: 100%;
    max-width: 222px;
    margin: 0 auto;
    aspect-ratio: 222/294;
    object-fit: cover;
}

.mf-pt__voice strong {
    display: block;
    margin-top: 10px;
    font: 600 20px Raleway, sans-serif;
}

.mf-pt__voice p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

/* 募集要項 */
.mf-pt__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 15px;
    line-height: 1.8;
}

.mf-pt__table th {
    width: 30%;
    padding: 14px 20px;
    background: var(--mf-pt-gray);
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.mf-pt__table td {
    padding: 14px 20px;
    background: #fafafa;
    vertical-align: top;
}

.mf-pt__table ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
}

.mf-pt__note {
    margin-top: 10px;
    padding: 12px;
    background: #f6ecd9;
    font-size: 13px;
}

/* CARE VALUE */
.mf-pt__values dl {
    margin: 0 0 20px;
}

.mf-pt__values dt {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.mf-pt__values dt span {
    padding-right: 6px;
    font: 500 26px Raleway, sans-serif;
}

.mf-pt__values dd {
    margin: 5px 0 0 40px;
    font-size: 14px;
}

/* 詳しい情報はこちらから */
.mf-pt__entry-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.mf-pt__outline-btn {
    min-width: 190px;
    padding: 12px 20px;
    border: 1px solid #aaa;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
}

/* ===== PC（固定ヘッダーの高さが90pxになる） ===== */
@media screen and (min-width: 736px) {
    .mf-pt {
        padding-top: 90px;
    }
}

/* ===== スマホ ===== */
@media screen and (max-width: 735px) {
    .mf-pt {
        max-width: none;
    }

    .mf-pt__story,
    .mf-pt__flow {
        padding: 52px 22px;
    }

    .mf-pt__head {
        margin-bottom: 40px;
    }

    .mf-pt__head h1,
    .mf-pt__head h2 {
        font-size: 5.6vw;
    }

    .mf-pt__head p {
        font-size: clamp(12px, 3.3vw, 14px);
    }

    .mf-pt__story-list {
        gap: 42px;
    }

    .mf-pt__story-item,
    .mf-pt__story-item:nth-child(even) {
        display: block;
    }

    .mf-pt__story-img {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .mf-pt__num {
        font-size: 10vw;
    }

    .mf-pt__story-body h3 {
        font-size: 4.6vw;
    }

    .mf-pt__story-body p {
        font-size: clamp(13px, 3.5vw, 15px);
    }

    .mf-pt__story-close {
        font-size: 5vw;
    }

    .mf-pt__flow-item {
        grid-template-columns: 36px 1fr;
        gap: 14px;
    }

    .mf-pt__flow-num {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .mf-pt__flow-list::before {
        left: 17px;
    }

    .mf-pt__flow-panel {
        padding: 16px;
    }

    .mf-pt__summary {
        padding-inline: 18px;
    }

    .mf-pt__summary-value {
        font-size: 4.5vw;
    }

    .mf-pt__workstyle {
        padding: 52px 18px;
    }

    .mf-pt__workstyle-list {
        grid-template-columns: 1fr;
    }

    .mf-pt__workstyle-item {
        padding: 26px 22px;
    }

    .mf-pt__workstyle-item h3 {
        font-size: 4.6vw;
    }

    .mf-pt__workstyle-item p {
        font-size: clamp(13px, 3.5vw, 15px);
    }

    .mf-pt__workstyle-note {
        font-size: 11px;
    }

    .mf-pt__workstyle-close {
        font-size: clamp(12px, 3.5vw, 14px);
    }

    .mf-pt__content {
        padding: 0 5vw;
    }

    .mf-pt__section {
        padding: 10vw 0;
    }

    .mf-pt__title {
        margin-bottom: 7vw;
    }

    .mf-pt__title .mf-pt__en {
        font-size: 6.6vw;
    }

    .mf-pt__title .mf-pt__jp {
        font-size: 11px;
    }

    .mf-pt__message,
    .mf-pt__training-intro,
    .mf-pt__training-body p {
        font-size: 13px;
    }

    .mf-pt__message-lead {
        font-size: 4.4vw;
    }

    .mf-pt__training-intro {
        margin-bottom: 12vw;
        text-align: left;
    }

    .mf-pt__training-list {
        gap: 14vw;
    }

    .mf-pt__training-item,
    .mf-pt__training-item:nth-child(even) {
        display: block;
    }

    .mf-pt__training-item::after {
        display: none;
    }

    .mf-pt__training-img {
        width: 100%;
        margin-bottom: 6vw;
    }

    .mf-pt__training-body h3 {
        font-size: 3.8vw;
    }

    .mf-pt__step {
        font-size: 2.8vw;
    }

    .mf-pt__voices {
        gap: 2vw;
    }

    .mf-pt__voice strong {
        font-size: 3.8vw;
    }

    .mf-pt__voice p {
        font-size: 11px;
    }

    .mf-pt__table,
    .mf-pt__table tbody,
    .mf-pt__table tr,
    .mf-pt__table th,
    .mf-pt__table td {
        display: block;
        width: 100%;
    }

    .mf-pt__table th {
        padding: 10px 20px;
        font-size: 16px;
    }

    .mf-pt__table td {
        padding: 4%;
        font-size: 4vw;
    }

    .mf-pt__values dt {
        font-size: 5vw;
    }

    .mf-pt__values dt span {
        font-size: 6.6vw;
    }

    .mf-pt__values dd {
        margin-left: 8vw;
        font-size: 12px;
    }

    .mf-pt__entry-links {
        display: grid;
        gap: 12px;
    }
}