.body-new25-staff {
    /* position: relative; */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.2;
    letter-spacing: .02rem;
    font-family: "source-han-sans-jp-variable", "Open Sans", serif, sans-serif, "ヒラギノ丸ゴ ProN", ' Noto Sans JP', sans-serif, " Helvetica Neue", Helvetica, Arial, sans-serif;
    font-variation-settings: "wght"350;
    font-style: normal;
    background-color: #FFFFFF;
    font-size: 1.095rem;
    color: #000;
    font-display: swap;
}

.header-staff {
    width: 100%;
    background-color: #fff;
    max-width: 440px;
}

.re_head_flex-mov {
    display: flex;
    padding: 3rem 3rem 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    position: relative;
    z-index: 100;
}

.re_header_rogo_img {
    width: 12rem;
}



h1 {
    font-size: 1.5rem;
    color: #000;
    margin-block-start: 0;
    margin-block-end: 0;
}

p {
    color: #000;
    font-variation-settings: "wght"500;
}

section[id] {
    /* 固定ヘッダーの高さ (6rem) と同じ値を設定 */
    scroll-margin-top: 10rem;
}

.scroll-m-t-10 {
    scroll-margin-top: 10rem;
}

.top-h1 {
    font-variation-settings: "wght"500;
    line-height: 2;
    margin-bottom: 1rem !important;
    padding-top: 12rem !important;
    padding-bottom: 3rem;
}

.top-bg-staff {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 134 / 179;
}

.com-mov-box-staff {
    position: absolute;
    max-width: 440px;
}

.z-i-2 {
    z-index: 2;
}

.bg-yellow-s {
    background-color: #ffc000;
}

.line-top-s {
    border-top: 1px solid #1f1f1f;
}

.line-bottom-s {
    border-bottom: 1px solid #1f1f1f;
}

.top-ul {
    margin-bottom: .2rem;
}

.top-ul-li {
    font-size: 1rem;
    border: .5px solid #1f1f1f;
    border-radius: 1.3rem;
    display: inline-block;
    padding: .1rem .6rem;
    font-variation-settings: "wght"500;
    color: #000;
    line-height: 1.7;
}

.t-center {
    text-align: center;
}

.t-left {
    text-align: left;
}

.pd-tb03 {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.pd-lr3 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.top-h1-span01 {
    font-variation-settings: "wght"400;
    display: block;
    margin-bottom: -3.5rem;
    font-size: 1.095rem;
}

.pd-b1 {
    padding-bottom: 1rem;
}

.top-h1-box {
    position: relative;
    z-index: 5;
}

.top-h1-box::before {
    position: absolute;
    /* content: "";*/
    display: block;
    background-size: contain;
    background-image: url(/assets/images/recruit2/top-pokeko.webp);
    background-repeat: no-repeat;
    transform: translateY(-100%) translateX(-50%);
    width: 100%;
    height: 140%;
    top: 0%;
    right: -50%;
}

.mg-lr-staff {
    margin-left: 3rem;
    margin-right: 3rem;
}

.top-dl dt {
    font-size: 1.3rem;
    font-variation-settings: "wght"700;
    position: relative;
}

.top-dl dt::after {
    content: '';
    border-top: 1px solid #000;
    width: 7rem;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    right: -10%;
    top: 50%;
}

.top-dl dt::before {
    content: '';
    border-top: 1px solid #000;
    width: 7rem;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 16%;
    top: 50%;
}


.top-dl dd {
    margin-left: 2.2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.top-btn-box {
    border: 1px solid #000;
    border-radius: 1.6rem;
    background-color: #fff;
    display: inline-block;
    line-height: 1.3;
    padding: .5rem 4rem .5rem 1.5rem;
    position: relative;
    width: 12rem;
    font-size: 1rem;
}

.top-btn-box::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/zai-new/sig-tri.svg);
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    right: 6%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.disp-inline {
    display: inline-block;
}

.col-000 {
    color: #000;
}

.header-mag {
    margin-top: 6rem;
}

.mg-t-1 {
    margin-top: -1rem;
}

.top-btn-flexd {
    position: fixed;
    z-index: 7;
}

.top-staff-btn1,
.top-staff-btn2 {
    position: relative;
    max-width: 440px;
    z-index: 5;
}

.top-staff-btn1 {
    right: -22.7rem;
    top: 2rem;
}

.top-staff-btn2 {
    right: -22.7rem;
    top: 6rem;
}

@media (min-width: 820px) {
    .header-mag {
        margin-top: 0;
    }

    .top-staff-btn1 {
        right: -22.7rem;
        top: 3rem;
    }

    .top-staff-btn2 {
        right: -22.7rem;
        top: 8rem;
    }
}

.hr-line-s {
    border: none;
    height: 1px;
    background-color: #eee;
    margin: 3rem 0;
}

.sec-h2-box, .sec-h2-box-b, .sec-h2-box-c {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 3rem;
}

.sec-h2-box::first-letter, .sec-h2-box-b::first-letter, .sec-h2-box-c::first-letter {
    color: #ffc000;
}

.sec-h2-box::before, .sec-h2-box-b::before, .sec-h2-box-c::before {
    display: block;
    position: absolute;
    left: -.8rem;
    top: 1.5rem;
    font-size: 4.5rem;
    color: #ccc;
}

.sec-h2-box::before {
    content: 'Our Growth';
}

.sec-h2-box-b::before {
    content: 'INTERVIEW';
}

.sec-h2-box-c::before {
    content: 'PROCESS';
}

.sec-3-p {
    width: 55%;
    margin-right: 1rem;
    line-height: 1.5;
    font-size: 1rem;
}

.s-p2 {
    line-height: 1.7;
    font-size: 1rem;
}

.s-p3 {
    line-height: 1.7;
}

.sec-3-img {
    width: 45%;
}

.sec4-ul>li>dl {
    display: flex;
    align-items: baseline;
    margin-bottom: .8rem;
}

.sec4-ul>li>dl>dt {
    width: 6rem;
    flex-shrink: 0;
    background: #2D588B;
    color: white;
    padding: .4rem;
    border-radius: .8rem;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 1rem;
}

.sec4-ul>li>dl>dd {
    flex: 1;
    margin-left: 1rem;
}


.office-list {
    display: block;
    width: 23rem;
}

.office-list dt {
    width: auto;
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    text-align: left;
    font-weight: bold;
    float: left;
    clear: left;
    width: 4rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px dotted #ccc;
    padding-bottom: .3rem;
    font-size: 1rem;
}


.office-list dd {
    margin-left: 4.1rem;
    padding-bottom: .3rem;
    position: relative;
    margin-bottom: 0.3rem;
    border-bottom: 1px dotted #ccc;
    padding-bottom: .3rem;
    font-size: 1rem;


}

.dd-office-list {
    position: relative;
    top: 3rem;
    left: -8.5rem;
    width: 100%;
    border: 1px solid #000;
    padding: 2rem;
    border-radius: 1rem;
    margin-left: 2.5rem !important;
}

.mg-t-1_5 {
    margin-top: -1.5rem;
}

.sec-h2-box2 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 2rem;
}

.sec-h2-box2::first-letter {
    color: #ffc000;
}

.sec-h2-box2::before {
    content: 'Company';
    display: block;
    position: absolute;
    left: -.8rem;
    top: -6.5rem;
    font-size: 4.5rem;
    color: #ccc;
}

.sec-h2-box2::after {
    content: 'Profile';
    display: block;
    position: absolute;
    right: -.8rem;
    top: -2.5rem;
    font-size: 4.5rem;
    color: #ccc;
}

.sec4-div {
    position: relative;
    margin-bottom: 2rem;
}

.sec4-div::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-04.svg);
    background-repeat: no-repeat;
    width: 12rem;
    height: 15rem;
    right: -30%;
    top: 24%;
    transform: translate(-50%, -50%);
}

.mg-t9 {
    margin-top: 9rem;
}

.mg-t-7 {
    margin-top: -7rem;
}

.sec-h3-box {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}


.sec-h3-box::before {
    content: 'Working Environment';
    display: block;
    position: absolute;
    left: -1.2rem;
    top: -9.5rem;
    font-size: 4.5rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: .9;
}

.pd-t12 {
    padding-top: 12rem;
}

.mg-b-2 {
    margin-bottom: -2rem;
}

.mg-b-05 {
    margin-bottom: -.5rem;
}

.img-loop-item {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* 1.5秒かけてふわっと変化 */
    z-index: 1;
}

.img-loop-item.active {
    opacity: 1;
    z-index: 2;
}

.com-mov-box-staff-bg {
    position: absolute;
    max-width: 440px;
    z-index: 4;
}

.com-mov-box-staff-midashi {
    position: absolute;
    max-width: 440px;
    z-index: 4;
    bottom: -13rem;
    margin-left: .8rem;
}



.top-btn-box3,
.top-btn-box3-2 {
    border: 1px solid #000;
    border-radius: 1.6rem;
    display: inline-block;
    line-height: 1.3;
    padding: 1rem 0 1rem 1rem;
    position: relative;
    width: 8.5rem;
    font-size: 1rem;
}

.top-btn-box3 {
    background-color: #fff;
}

.top-btn-box3-2 {
    background-color: #fff;
    font-size: 1.2rem;
}

.top-btn-box3::after,
.top-btn-box3-2::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/zai-new/sig-tri.svg);
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    right: 6%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/** スライダー(jq) 左右に流れ続けるループスライダー *****************************************/
/* スライダー全体 */
.staff-underslider {
    width: 100%;
    /* スライダーの幅 */
    overflow: hidden;
    /* コンテンツがはみ出た部分を隠す */
    position: relative;
}

/* スライドトラック（共通） */
.staff-underslider-track {
    display: flex;
    /* フレックスボックスで横並び */
    position: relative;
    white-space: nowrap;
    /* スライドを横並びに配置 */
    /* アニメーションはjQueryで行うため削除 */
}

/* 上段トラックは左から右へ */
.staff-underslider-track.upper {
    /* 上段用の特別な設定は必要な場合のみ追加 */
}

/* 下段トラックは右から左へ */
.staff-underslider-track.lower {
    /* 下段用の特別な設定は必要な場合のみ追加 */
}

/* 各スライド */
.staff-underslide>img {
    object-fit: cover;
    width: 16rem;
    border-radius: 1rem;
    margin: .5rem;
    /*height: 120px;*/
    aspect-ratio: 4 / 3;
}

.staff-under-srider-gate {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.staff-under-srider-gate-left,
.staff-under-srider-gate-right {
    background-color: #FFFCF0;
    border: 1px solid #404040;
    position: relative;
    margin-right: 0;
    width: 3rem;
    height: 23rem;
    top: -1.2rem;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.staff-under-srider-gate-left {
    left: -1px;
    border-radius: 0 2rem 2rem 0;
}

.staff-under-srider-gate-right {
    right: -1px;
    border-radius: 2rem 0 0 2rem;
}

.staff-underslider-cont {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.staff-underslider-p {
    margin-left: 3.9rem;
    margin-right: 3.9rem;
    margin-bottom: 3rem;
    font-size: 1.095rem;
    margin-top: .5rem;
}

.sec-h3-box2 {
    position: relative;
    font-variation-settings: "wght"500;
    font-size: 1.4rem;
    margin-left: 5rem;
}


.sec-h3-box2::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-05.svg);
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    left: -1.5rem;
    top: .5rem;
    transform: translate(-50%, -50%);
}

.sec-h3-box2::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/benefits.webp);
    background-repeat: no-repeat;
    width: 6rem;
    height: 3rem;
    left: 3rem;
    top: -1rem;
    transform: translate(-50%, -50%);
}

.mg-t4 {
    margin-top: 4rem;
}

.mg-t-4 {
    margin-top: -4rem;
}

.sec-5-ul {
    margin-top: 3rem;
    margin-bottom: 6rem;
}


.sec-5-ul li {
    position: relative;
    padding-bottom: .3rem;
    font-size: 1.2rem;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 1rem;
    padding-left: 3.5rem;
    font-variation-settings: "wght"500;
}

.sec-5-ul li::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/check.svg);
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    left: 2rem;
    top: 40%;
    transform: translate(-50%, -50%);
}

.sec-h2-box3 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 2rem;
}

.sec-h2-box3::first-letter {
    color: #ffc000;
}

.sec-h2-box3::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-02.svg);
    background-repeat: no-repeat;
    width: 15rem;
    height: 11rem;
    right: -10rem;
    top: 60%;
    transform: translate(-50%, -50%);
}

.img-h3-box {
    display: flex;
}

.img-h3-box-img {
    width: 40%;
    margin-right: 1rem;
    position: relative;
}

.img-h3-box-img::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/keycontributors.webp);
    background-repeat: no-repeat;
    width: 12rem;
    height: 6rem;
    left: 4rem;
    top: 0;
    transform: translate(-50%, -50%);
}

.img-h3-box-img2 {
    width: 40%;
    margin-left: 1rem;
    position: relative;
}

.img-h3-box-img2::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/Womenthriving.webp);
    background-repeat: no-repeat;
    width: 12rem;
    height: 6rem;
    left: 4rem;
    top: 0;
    transform: translate(-50%, -50%);
}

.img-h3-box-div {
    width: 60%;
}

.sec-h3-box3 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.5rem;
}

.sec-h3-box3::first-letter {
    color: #ffc000;
}

.s-p4 {
    line-height: 1.7;
    font-size: 1rem;
}

.training-box {
    position: relative;
}

.training-box img {}

.training-box-ul01 {
    position: absolute;
    left: 45%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.training-box-ul01 dt {
    background-color: #ccc;
    display: inline-block;
    padding: .4rem 1rem;
    font-variation-settings: "wght"700;
}

.training-box-ul01 dd {
    background-color: rgba(255, 255, 255, 0.8);
    padding: .5rem 1rem;
    margin-top: .5rem;
    line-height: 1.4;
    font-size: .9rem;
    font-variation-settings: "wght"500;
    margin-left: 1rem;
}

.training-box-ul02 {
    position: absolute;
    left: 71%;
    top: 72%;
    transform: translate(-50%, -50%);
    width: 55%;
}

.training-box-ul02 dt {
    background-color: #ccc;
    display: inline-block;
    padding: .4rem 1rem;
    font-variation-settings: "wght"700;
    margin-left: 4rem;
}

.training-box-ul02 dd {
    background-color: rgba(255, 255, 255, 0.8);
    padding: .5rem 2.5rem .5rem 1rem;
    margin-top: .5rem;
    margin-left: 0;
    line-height: 1.4;
    font-size: .9rem;
    font-variation-settings: "wght"500;
}

.sec-h3-box4 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.5rem;
}

.sec-h3-box4::first-letter {
    color: #ffc000;
}

.sec-h3-box4::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/Training.webp);
    background-repeat: no-repeat;
    width: 7rem;
    height: 6rem;
    left: 2rem;
    top: 0;
    transform: translate(-50%, -50%);
}

.sec-h2-box5 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.sec-h2-box5::before, .sec-h2-box5::after {
    content: '';
    position: absolute;
    top: 80%;
    width: 3rem;
    height: 1px;
    background-color: #333;
    transform: translateY(-50%) rotate(15deg);
    /* 上下に中央寄せし、斜めにする */
}

.sec-h2-box5::after {
    right: 1.5rem;
    transform-origin: left center;
    transform: translateY(-50%) rotate(-65deg);
}

.sec-h2-box5::before {
    left: .5rem;
    transform-origin: right center;
    transform: translateY(-50%) rotate(65deg);
}

.sec-h2-box5::first-letter {
    color: #ffc000;
}

.bg-yellow-sr {
    background-color: #ffc000;
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 2rem;
    padding: 1.5rem 2rem;
}


.hexagon-container {
    position: relative;
    width: 8.2rem;
    height: 10rem;
}

.hexagon {
    width: 100%;
    height: 100%;
    background-color: white;
    clip-path: polygon(50% 0%,
            100% 25%,
            100% 75%,
            50% 100%,
            0% 75%,
            0% 25%);
}

.salary-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: .5rem 1rem;
    border-radius: 20px;
    font-size: 1.1em;
    font-weight: bold;
    z-index: 10;
    width: 70%;
    text-align: center;
}

.salary-content {
    text-align: center;
    padding-top: 2rem;
}

.salary-content p {
    margin: .5rem 0;
    font-size: 1rem;
    text-align: center;
    line-height: 1.1;
}

.monthly-salary {
    font-size: 1.5rem !important;
    font-weight: bold;
}

.monthly-salary strong {
    color: #e57373;
    font-size: 1.5rem;
}

.salary-data {
    display: flex;
    justify-content: space-around;

    width: 100%;
}

.sala-h4-box {
    margin-top: 2rem;
    margin-bottom: 3rem;
    text-align: center;
    background-color: #fff;
    padding: .3rem;
    border-radius: 1rem;
}

.sec-h3-box5 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.4rem;
    margin-bottom: .5rem;
    line-height: 1.8;
    margin-top: 1.5rem;
}



.sec-h3-box5::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-03.svg);
    background-repeat: no-repeat;
    width: 8rem;
    height: 11rem;
    right: -3rem;
    top: 45%;
    transform: translate(-50%, -50%);
}

.hr-line-s2 {
    border: none;
    height: 1px;
    background-color: #000;
    margin: 1.5rem 0;
}

.sec-h3-box5 span {
    color: #FF7976;
    background-color: #000;
    padding: .1rem .5rem;
    border-radius: .4rem;
}

.sala-ul>li {
    border-bottom: 1px dashed #000;
}

.sala-ul>li:last-of-type {
    border-bottom: none;
}


.sala-ul>li>dl {
    display: flex;
    align-items: baseline;
    margin-bottom: .1rem;
    padding-bottom: .3rem;
    padding-top: .3rem;
}

.sala-ul>li>dl>dt {
    width: 6rem;
    flex-shrink: 0;
    padding: .4rem;
    border-radius: .6rem;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 1rem;
    font-variation-settings: "wght"700;
    background-color: #fff;
}

.sala-ul>li>dl>dd {
    flex: 1;
    margin-left: 1rem;
    font-variation-settings: "wght"700;
}

.sec-h2-box6, .sec-h2-box7 {
    position: relative;
    font-variation-settings: "wght"500;
    padding-bottom: 1rem;
    font-size: 1.3rem;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
    background-color: #000;
    color: #ffc000;
    padding: .5rem 1rem;
    display: inline-block;
    border-radius: .5rem;
}

.sec-h2-box6::before, .sec-h2-box7::before {
    content: 'SALARY';
    display: block;
    position: absolute;
    top: 35%;
    font-size: 3.5rem;
    color: #ffc000;
    transform: translate(0%, -50%);
}

.sec-h2-box6::before, .sec-h2-box7::before {
    content: 'SALARY';
    right: -14rem;
}

.sec-h2-box7.disp-inline, .sec-h2-box7::before {
    content: 'JOB TYPE';
    right: -17rem;

}

.sla-container-wrapper {
    position: relative;
    left: -3rem;
    top: -2rem;
}

.sla-slider-track {
    display: flex;
    /* カード間のスペース */
    gap: 20px;
    /* スライドアニメーション */
    transition: transform 0.5s ease-in-out;
    /* 各カードの開始位置を調整するために左に余白 (半分のカードが見えるように) */
    padding-left: 8%;
}

.sla-card {
    min-width: 80%;
    max-width: 95%;
    /* 幅を固定して見切れさせる */
    flex-shrink: 0;
    /* カードが縮まないようにする */
    box-sizing: border-box;
}

.sla-card .sla-box {
    background-color: #fff;
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    height: 12rem;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.sla-title {
    width: 6rem;
    display: inline-block;
    background-color: #fff;
    border-radius: 4rem;
    height: 6rem;
    text-align: center;
    padding: 1.5rem 0 2rem;
    position: relative;
    top: 2.5rem;
    left: 1.5rem;
    font-size: 1.3rem;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.sla-title::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/arrow-w.svg);
    background-repeat: no-repeat;
    width: 13rem;
    height: 1.5rem;
    right: -19rem;
    top: 40%;
    transform: translate(-50%, -50%);
}

.sla-salary {
    font-variation-settings: "wght"700;
}

.sla-salary span {
    background-color: #000;
    color: #ffc000;
    padding: .3rem 1rem;
    font-size: 1rem;
    margin-right: 1rem;
    border-radius: 1rem;
}

.sla-description {
    border-top: 1px dashed #000;
    font-size: .9rem;
    line-height: 1.4;
    margin-top: .5rem;
    padding-top: .5rem;
}

.sla-srider-btn-box {
    position: relative;
    top: 1rem;
    left: 38%;
}

.sla-srider-btn-box button {
    border-radius: 1rem;
    padding: .5rem 1.5rem;
    border: none;
}

.inq-top-btn2 {
    padding: 1rem 3rem;
    border-radius: 2rem;
    display: inline-block;
    margin: 2rem auto;
    font-size: 0.9rem;
    color: #fff;
    font-weight: bold;
    background-color: #1dcd00;
    width: 100%;
    text-align: center;
    box-shadow: 1px 1px 10px #ccc;
}

.s-p2-job {
    line-height: 1.7;
    font-size: 1rem;
    padding: 1rem .5rem 2rem;
}

/* ======================================= */
/* 1. タブリストとタブのデザイン */
/* ======================================= */

.job-tab-list {
    display: flex;
    /* タブとコンテンツの境界線を重ねるための調整 */
    /* タブリストの水平位置を調整したい場合はここを調整 */
    justify-content: center;
}

.job-tab {
    /* タブの基本的な見た目 */
    background-color: #f0f0f0;
    padding: 1rem 5rem .5rem 1.5rem;
    margin-right: 10px;
    cursor: pointer;
    border-bottom: none;
    border-radius: 1.5rem 1.5rem 0 0;
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    font-variation-settings: "wght"500;
    color: #aaa;
}

.job-tab::after {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/zai-new/sig-tri.svg);
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    right: 6%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 選択されているタブのスタイル */
.job-tab.active {
    background-color: #ffc000;
    border-color: #ccc;
    /* コンテンツの背景色（.bg-yellow-sr の内側）と合わせる */
    font-variation-settings: "wght"500;
    color: #000;
}

/* ======================================= */
/* 2. コンテンツの表示/非表示制御 (必須) */
/* ======================================= */
/* 全コンテンツを初期状態で非表示にする */
.job-content {
    display: none;
}

/* active クラスがついたコンテンツだけを表示する */
.job-content.active {
    display: block;
}

/* 黄色いコンテンツボックス (画像のデザインを再現) */
.job-content-box {
    margin-top: 2rem;
    margin-bottom: 1rem;
}



.job-content-box h2 {
    font-size: 1.6rem;
    font-variation-settings: "wght"500;
    margin: 0;
    color: #333;
    padding-left: 4rem;
    position: relative;
}

.job-content-box p {
    font-size: 1rem;
    color: #000;
    text-align: center;
}

.job-content-box h2::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-06.svg);
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    left: 2rem;
    top: 50%;
    transform: translate(-50%, -50%);
}

.job-content-icon {
    /* アイコンのサイズと配置を調整 */
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.job-content-img {
    object-fit: cover;
    width: 100%;
    height: 200px;
    border-radius: 1rem;
}

.job-content-body {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
}

/* ======================================= */
/* 2. 定義項目 (DT) のスタイル */
/* ======================================= */

.job-details-dl dt {
    /* 項目名を強調 */
    font-size: 1.1rem;
    font-variation-settings: "wght"700;
    color: #000;
    margin-top: 15px;
    /* 左側に太い線を入れるデザイン (画像参照) */
    border-left: 5px solid #ffcc00;
    padding-left: 10px;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* DLの最初のDTには上の線は不要 */
.job-details-dl dt:first-of-type {
    border-top: none;
    margin-top: 0;
}

/* ======================================= */
/* 3. 定義内容 (DD) のスタイル */
/* ======================================= */

.job-details-dl dd {
    font-size: 1rem;
    line-height: 1.6;
    margin-left: 0;
    padding: .5rem 0 .3rem 1rem;
    border-bottom: 1px dashed #aaa;
}

/* DD内の通常のテキストやPタグ */
.job-details-dl dd p,
.job-details-dl dd h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1rem;
    font-variation-settings: "wght"400;
    line-height: 1.6;
}

/* DD内の小見出し (アピールポイントなど) */
.job-details-dl dd h4 {
    font-size: 1rem;
    color: #000;
    margin-top: 10px;
    font-variation-settings: "wght"500;
    border-bottom: 1px dashed #aaa;
    padding-bottom: 0.3rem;
    margin-bottom: .3rem;
}

/* ======================================= */
/* 4. DD内のULリストのスタイル */
/* ======================================= */

.job-details-dl dd ul {
    list-style: none;
    /* リストマークを消す */
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.job-details-dl dd ul li {
    position: relative;
    margin-bottom: 1rem;
    padding-left: .7rem;
}

/* カスタムリストマーク（画像参照の黄色い点） */


/* ======================================= */
/* 5. アクセス情報のスタイル調整 */
/* ======================================= */
/* カスタムリストマーク（画像参照の黄色い点） */
.job-details-dl dd ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ffcc00;
    /* 黄色い点 */
    font-size: 1.2em;
    line-height: 1;
}

/* アクセス情報内のリンク */
.job-details-dl dd ul.access-list li a {
    color: #5d98d1;
    /* 青色 */
    text-decoration: none;
    border-bottom: 1px solid #5d98d1;
    /* 下線 */
}

/* アクセス情報の改行位置調整 */
.job-details-dl dd ul.access-list li br {
    /* 地名と駅情報を別の行にするため、brはそのまま使用 */
}

.inte-box-a,
.inte-box-b {
    background-color: #ECFFEF;
    width: 100%;
    height: auto;
    adding-top: 1rem;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

.inte-box-a {
    background-color: #ECFFEF;
}

.inte-box-b {
    background-color: #ECF9FF;
}

.inte-box-a div .inte-img img,
.inte-box-b div .inte-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
    border-radius: 1rem;
}

.inte-img {
    position: relative;
    z-index: 1;
}

.inte-box-a div .inte-img img {
    object-position: top;
}

.inte-box-b div .inte-img img {
    object-position: center;
}

.mg-t1_5 {
    margin-top: 1.5rem;
}

.inte-box-a div dl,
.inte-box-b div dl {
    margin-top: 2rem;
}

.inte-box-a div p,
.inte-box-b div p {
    text-align: right;
    font-size: 1.5rem;
    font-variation-settings: "wght"700;
    line-height: 1;
    margin-bottom: 2rem;
    margin-top: .5rem;
}

.inte-box-a div dl dt,
.inte-box-b div dl dt {
    font-variation-settings: "wght"700;
    font-size: 1.3rem;
    border-bottom: 1px dashed #000;
    padding-bottom: 1rem;
}

.inte-box-a div dl dd,
.inte-box-b div dl dd {
    line-height: 1.7;
    font-size: 1rem;
    margin-left: 0;
    margin-top: 1rem;
}

.inte-box-p,
.inte-box-p2 {
    font-size: 2rem;
    font-variation-settings: "wght"700;
    position: relative;
}

.inte-box-p::before,
.inte-box-p2::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ffc000;
    width: 8rem;
    height: 8rem;
    transform: translate(-50%, -50%);
}

.inte-box-p2::before {
    left: 5%;
    top: 680%;
    border-radius: 5rem;
}

.inte-box-p::before {
    right: -23%;
    top: 180%;
    border-radius: 1.5rem;
}



.inte-box-p span,
.inte-box-p2 span {
    font-size: 1rem;
    font-variation-settings: "wght"400;
}

.inte-box-p::first-letter,
.inte-box-p2::first-letter {
    color: #ffc000;
}

/* ======================================= */
/* 1. 全体コンテナ */
/* ======================================= */
.pro-box-wrapper {
    max-width: 700px;
    /* 画像のコンテンツ幅に合わせて調整 */
    margin: 30px auto;
    /* 中央寄せ */
    position: relative;
    padding-left: 50px;
    /* アイコンの幅の分、中身を右にずらす */
}

/* ======================================= */
/* 2. 各ステップ (.pro-step) のスタイル */
/* ======================================= */
.pro-step {
    position: relative;
    margin-bottom: 40px;
    /* 各ステップ間の余白 */
    padding-bottom: 20px;
}

/* 各ステップ間の縦線（画像参照） */
.pro-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -.4rem;
    top: 4rem;
    bottom: 0rem;
    width: .3rem;
    background-color: #FF7976;
    z-index: 0;
}

.pro-step:not(:last-child)::before {
    content: '';
    position: absolute;
    /* 縦線の終点（bottom）の位置に合わせる */
    left: -1.25rem;
    bottom: -1rem;
    width: 0;
    height: 0;
    /* 三角形を構成するボーダー */
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-top: 1rem solid #FF7976;
    /* 縦線と同じ黄色 */

    z-index: 1;
    /* 線の上に重ねる */
}

/* ======================================= */
/* 3. 番号付きアイコン (.pro-icon-number) */
/* ======================================= */
.pro-icon-number {
    position: absolute;
    left: -2rem;
    top: -1rem;
    width: 6rem;
    height: 6rem;
    background-color: #FF7976;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    z-index: -1;
    font-variation-settings: "wght"700;
}

/* ======================================= */
/* 4. コンテンツエリア (.pro-content-area) */
/* ======================================= */
.pro-content-area {
    padding: 0 3rem 0 1rem;
}

/* ======================================= */
/* 5. 見出し (H3) のスタイル */
/* ======================================= */
.pro-heading-1,
.pro-heading-2,
.pro-heading-3,
.pro-heading-4 {
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    margin-top: 0;
    margin-bottom: .5rem;
    font-variation-settings: "wght"500;
}

/* ======================================= */
/* 6. 画像コンテナと画像 (.pro-image-container, .pro-image) */
/* ======================================= */
.pro-image-container {
    width: 100%;
    position: relative;
    /* 画像の高さ固定 */
    margin-bottom: 15px;
    overflow: hidden;
    /* はみ出た部分を隠す */
    border-radius: 5px;
    margin-bottom: 1rem;
}

.pro-heading-1::before,
.pro-heading-2::before,
.pro-heading-3::before,
.pro-heading-4::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

.pro-heading-1::before {
    background-image: url(/assets/images/recruit2/Entry.webp);
    width: 6rem;
    height: 3em;
    left: 6rem;
    top: 1rem;
}

.pro-heading-2::before {
    background-image: url(/assets/images/recruit2/Interview.webp);
    width: 10rem;
    height: 3em;
    left: 8rem;
    top: 0rem;
}

.pro-heading-3::before {
    background-image: url(/assets/images/recruit2/Offer.webp);
    width: 6rem;
    height: 3em;
    left: 6rem;
    top: .5rem;
}

.pro-heading-4::before {
    background-image: url(/assets/images/recruit2/Onboarding.webp);
    width: 11rem;
    height: 4em;
    left: 9rem;
    top: -.2rem;
}

.pro-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 要素全体を覆い、はみ出た部分は切り取る */
    object-position: top;
    /* 画像の上部を優先して表示 (画像に合わせて調整) */
    display: block;
    /* 画像の下の余白をなくす */
    border-radius: 3rem 0 0 0;
}

/* ======================================= */
/* 7. 説明文 (.pro-description) */
/* ======================================= */
.pro-description {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

/* ======================================= */
/* 8. 面接時の持ち物など (.pro-interview-notes) */
/* ======================================= */
.pro-interview-notes {
    background-color: #f8f8f8;
    border: 1px solid #000;
    padding: 1.5rem;
    margin-bottom: 20px;
    border-radius: 1.2rem;

}


.pro-interview-notes h4 {
    font-size: 1rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    font-variation-settings: "wght"500;
    border-bottom: 1px dashed #aaa;
    padding-bottom: .5rem;
}

.pro-interview-notes ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.pro-interview-notes ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.pro-interview-notes ul li::before {
    content: '✓';
    /* チェックマーク */
    position: absolute;
    left: 0;
    color: #f7b731;
    /* 黄色いチェック */
    font-weight: bold;
}

/* ======================================= */
/* 9. ダウンロードセクション (.pro-download-section) */
/* ======================================= */
.pro-download-section {
    text-align: center;
    margin-top: 20px;
}

.pro-download-section h4 {
    font-size: 1.1rem;
    color: #FF7976;
    margin-top: 0;
    margin-bottom: 10px;
    font-variation-settings: "wght"500;
}

.pro-download-button {
    display: inline-block;
    background-color: #aaa;
    color: white;
    padding: 12px 5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    box-shadow: 0px 5px 15px -6px rgba(0, 0, 0, 0.3);
}

.pro-download-button:hover {
    background-color: #e6a72e;
}

.pro-download-note {
    margin-left: 2rem;
    font-size: 1rem;
    color: #777;
    margin-top: 1.5rem;
    margin-right: 2rem;
    line-height: 1.4;
}

/*bg-left css*/
.bg-01-rogo-staff {
    width: 23rem;
    height: 4rem;
    position: relative;
}

.bg-01-rogo-staff::before {
    content: '';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    background-size: contain;
    background-image: url(/assets/images/recruit2/pokeko-staff.webp);
    background-repeat: no-repeat;
    width: 14rem;
    height: 12rem;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
}