@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap');

a {
    transition: 0.4s;
}

a:hover {
    opacity: 0.9;
    transition: 0.4s;
}

.body-hr {
    overflow-x: hidden;
}

.sp-only {
    display: none !important;
}

.sp-only-small {
    display: none !important;
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .sp-only {
        display: block !important;
    }
}

.pc-only {
    display: block !important;
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .pc-only {
        display: none !important;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .sp-only-small {
        display: none !important;
    }
}


.hr-title {
    width: 100%;
    text-align: center;
    position: relative;
}

.hr-title-en {
    font-size: 30px;
    line-height: 20px;
    font-weight: 400;
    color: #ff815a;
    font-family: "Sofia Sans Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: center;
}

.hr-title-en span {
    font-size: 24px;
}

.hr-title-en img {
    max-height: 23px;
}

@media screen and (max-width: 820px) {
    .hr-title-en {
        font-size: 4.8vw;
    }
    .hr-title-en span {
        font-size: 4.2vw;
    }
    .hr-title-en img {
        max-height: 5vw;
    }
}

@media screen and (max-width: 430px) {
    .hr-title-en img {
        max-height: 4.5vw;
    }
}

.hr-title-jp {
    font-size: 38px;
    line-height: 46px;
    font-weight: 900;
    margin: 8px 0 0;
}

@media screen and (max-width: 820px) {
    .hr-title-jp {
        font-size: 5.6vw;
        line-height: 8vw;
        margin: 2px 0 0;
    }
}


.hr-title-jp span {
    color: #ff815a;
}

.hr-title-sub {
    font-size: 16px;
    margin: 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-title-sub {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-title-sub {
        font-size: 4.27vw;
        line-height: 6vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-title-sub {
        font-size: 16px;
        line-height: 6vw;
    }
}

@media screen and (max-width: 330px) {

    /** SPのみ */
    .hr-title-sub {
        font-size: 14px;
    }
}


.hr-main-fv {
    width: 100%;
    position: relative;
}

@media screen and (max-width: 820px) {
    .hr-main-fv {
        padding: 100px 0 0 0;
        box-sizing: border-box;
    }
}

.hr-main-fv-contents {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: translateX(52px);
}

@media screen and (max-width: 820px) {
    .hr-main-fv-contents {
        flex-wrap: wrap;
        transform: translateX(0);
    }
}

.hr-main-fv-text img {
    width: 100%;
    max-width: 615px;
}

@media screen and (max-width: 820px) {
    .hr-main-fv-text {
        width: 100%;
        padding: 0 4%;
        position: relative;
        z-index: 2;
    }
}

.hr-main-fv-text-title {
    font-size: 50px;
    font-weight: bold;
    color: #313435;
    margin: 0 0 25px 0;
}

@media screen and (max-width: 1312px) {
    .hr-main-fv-text-title {
        font-size: 42px;
    }
}

@media screen and (max-width: 1232px) {
    .hr-main-fv-text-title {
        font-size: 36px;
    }
}

@media screen and (max-width: 1164px) {
    .hr-main-fv-text-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 820px) {
    .hr-main-fv-text-title {
        font-size: 6.8vw;
        margin: 0 0 16px 0;
    }
}

.hr-main-fv-text-title p .text01 {
    margin-left: -24px;
}

.hr-main-fv-text-title p .text02 {
    letter-spacing: -24px;
}

@media screen and (max-width: 820px) {
    .hr-main-fv-text-title p .text01 {
        margin-left: -18px;
    }
    
    .hr-main-fv-text-title p .text02 {
        letter-spacing: -16px;
    }
}

@media screen and (max-width: 425px) {
    .hr-main-fv-text-title p .text01 {
        margin-left: -12px;
    }
    
    .hr-main-fv-text-title p .text02 {
        letter-spacing: -10px;
    }
}

.hr-main-fv-text-logo {
    max-width: 413px;
}

@media screen and (max-width: 820px) {
    .hr-main-fv-text-logo {
        max-width: 70vw;
    }
}


.hr-main-fv-text-title p {
    color: #ff815a;
    display: inline-block;
    margin: 0;
}

.hr-main-fv-text-title span {
    letter-spacing: 0;
}

.hr-main-fv-img {
    transform: translateX(-52px);
}

@media screen and (max-width: 820px) {
    .hr-main-fv-img {
        width: 100%;
        transform: translateX(0);
    }
}

.hr-main-fv-img img{
    width: 100%;
    max-width: 652px;
}

@media screen and (max-width: 820px) {
    .hr-main-fv-img img{
        margin-top: -14vw;
        max-width: 100%;
    }
}

.hr-main-fv-btn {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 385px;
    width: 100%;
    height: 69px;
}

@media screen and (max-width: 820px) {
    .hr-main-fv-btn {
        padding: 0 20px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 425px) {
    .hr-main-fv-btn {
        max-width: 240px;
        height: 46px;
        padding: 0;
        bottom: 46px;
    }
}

.hr-main-fv-btn a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    background: linear-gradient(90deg, #FF705E 6.5%, #FFC13B 97%);
    border-radius: 999px;
    box-shadow: 0px 10px 50px rgba(229, 142, 76, 0.5);
    transition: 0.4s;
}

@media screen and (max-width: 425px) {
    .hr-main-fv-btn a {
        font-size: 14px;
    }
}


.hr-main-fv-btn a:hover {
    box-shadow: 0px 10px 50px rgba(229, 142, 76, 0);
    transition: 0.4s;
}

.hr-main-fv-btn img {
    width: 100%;
    max-width: 473px;
}

.hr-about {
    padding: 100px 0;
    background: url(images/about-bg.jpg) top center no-repeat;
}

@media screen and (max-width: 820px) {
    .hr-about {
        padding: 100px 4% 10% 4%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 425px) {
    .hr-about {
        padding: 26px 4% 10% 4%;
        box-sizing: border-box;
        background-size: 100% 190px;
    }
}

.hr-about-contents {
    max-width: 1216px;
    width: 100%;
    background: #FFF;
    margin:  0 auto;
    border-radius: 20px;
    padding: 48px 0;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 820px) {
    .hr-about-contents {
        padding: 48px 0;
        box-sizing: border-box;
    }
}

.hr-about-title {
    display: flex;
    justify-content: center;
}

.hr-about-title img {
    width: 100%;
    max-width: 456px;
}

.hr-about-list {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 81px 0 0 0;
    padding: 0;
    list-style-type: none;
}

@media screen and (max-width: 820px) {
    .hr-about-list {
        flex-wrap: wrap;
        margin: 42px 0 0 0;
    }
}

@media screen and (max-width: 425px) {
    .hr-about-list {
        flex-wrap: wrap;
        margin: 26px 0 0 0;
    }
}

.hr-about-item {
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .hr-about-item {
        width: 100%;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: 0 4%;
    }

    .hr-about-item:last-child .hr-about-item-text p {
        padding-bottom: 0;
    }
}

.hr-about-item-img {
    width: 100%;
    text-align: center;
    
}

.hr-about-item-img img {
    max-width: 362px;
    width: 100%;
    display: inline-block;
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.1));
}

@media screen and (max-width: 820px) {
    .hr-about-item-img img {
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
    }
}

.hr-about-item-text h3{
    font-size: 32px;
    font-weight: bold;
    color: #313435;
    margin: 0;
    padding-top: 37px;
}

@media screen and (max-width: 820px) {
    .hr-about-item-text h3{
        font-size: 4.27vw;
        line-height: 6vw;
        padding-top: 0;
        padding-bottom: 6px;
    }
}

.hr-about-item-text h3 span {
    color: #FF705E;
}

.hr-about-item-text p {
    padding-top: 16px;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-about-item-text p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-about-item-text p {
        font-size: 4.27vw;
        line-height: 6vw;
        padding-top: 4px;
        padding-bottom: 62px;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-about-item-text p {
        padding-bottom: 32px;
        font-size: 16px;
    }
}

@media screen and (max-width: 820px) {
    .hr-about-item-text h3{
        font-size: 4.27vw;
        line-height: 6vw;
        padding-top: 0;
        padding-bottom: 6px;
    }
}

.hr-cycle-contents {
    max-width: 1216px;
    width: 100%;
    background: #313435;
    margin:  0 auto;
    border-radius: 20px;
    padding: 48px 0;
    margin-bottom: 80px;
    position: relative;
}

@media screen and (max-width: 820px) {
    .hr-cycle-contents {
        padding: 48px 10px;
        box-sizing: border-box;
        width: 92%;
        margin: 0 4% 18vw 4%;
    }
}

@media screen and (max-width: 425px) {
    .hr-cycle-contents {
        padding: 24px 10px;
        margin: 0 4% 52px 4%;
    }
}

.hr-cycle-result-label {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hr-cycle-result-label span {
    padding: 24px;
    background: #FFF;
    color: #313435;
    font-size: 32px;
    font-weight: bold;
    border-radius: 10px;
    position: relative;
}

@media screen and (max-width: 820px) {
    .hr-cycle-result-label span {
        font-size: 3.87vw;
        padding: 16px;
    }
}

@media screen and (max-width: 425px) {
    .hr-cycle-result-label span {
        font-size: 16px;
        padding: 10px 16px;
    }
}

.hr-cycle-result-label span::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 0;
    border-right: 18px solid transparent;
    border-top: 18px solid #FFF;
    border-left: 18px solid transparent;
}

.hr-cycle-result-img {
    padding-top: 44px;
    width: 100%;
    text-align: center;
}

.hr-cycle-result-img img {
    width: 100%;
    max-width: 810px;
    display: inline-block;
}

.hr-cycle-title {
    display: flex;
    justify-content: center;
}

.hr-cycle-title img {
    width: 100%;
    max-width: 614px;
}

.hr-cycle-img {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hr-cycle-img img {
    width: 100%;
    max-width: 1026px;
}

@media screen and (max-width: 820px) {
    .hr-cycle-result {
        padding: 0 10px;
        box-sizing: border-box;
    }
}

.hr-cycle-result-list {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
    padding-top: 27px;
    padding-left: 0;
}

@media screen and (max-width: 410px) {
    .hr-cycle-result-list {
        gap: 4%;
    }
}


.hr-cycle-result-item {
    font-size: 20px;
    color: #FF705E;
    list-style-type: none;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-right: 59px;
}

@media screen and (max-width: 820px) {
    .hr-cycle-result-item {
        font-size: 4vw;
        padding-right: 3vw;
    }
}

@media screen and (max-width: 414px) {
    .hr-cycle-result-item {
        font-size: 3vw;
        padding-right: 2vw;
    }
}

.hr-cycle-result-item:nth-child(2) {
    padding-right: 70px;
}

@media screen and (max-width: 820px) {
    .hr-cycle-result-item:nth-child(2) {
        padding-right: 2vw;
    }
}

.hr-cycle-result-item:nth-child(3) {
    padding-right: 0;
}

.hr-cycle-result-item img {
    width: 20px;
    margin-right: 6px;
}

.hr-cycle-img02 {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 820px) {
    .hr-cycle-img02 {
        padding: 64px 20px 0 20px;
        box-sizing: border-box;
    }
}

.hr-cycle-img02 img {
    width: 100%;
    max-width: 810px;
}

.hr-about-img {
    width: 100%;
    display: flex;
    justify-content: center;
}


.hr-about-img02 {
    width: 100%;
    display: flex;
    justify-content: center;
}

.down-arrow-position {
    position: absolute;
    bottom: -63px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 820px) {
    .down-arrow-position {
        bottom: -11.5vw;
    }
}

@media screen and (max-width: 425px) {
    .down-arrow-position {
        bottom: -30px;
    }
}

.down-arrow-position img {
    max-width: 53px;
}

@media screen and (max-width: 820px) {
    .down-arrow-position img {
        max-width: 10vw;
    }
}

@media screen and (max-width: 425px) {
    .down-arrow-position img {
        max-width: 24px;
    }
}


.down-arrow-cycle {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 48px 0 38px 0;
}

@media screen and (max-width: 820px) {
    .down-arrow-cycle {
        padding: 6% 0 0;
    }
}

.down-arrow-cycle img {
    max-width: 53px;
}

@media screen and (max-width: 820px) {
    .down-arrow-cycle img {
        max-width: 10vw;
    }
}

@media screen and (max-width: 425px) {
    .down-arrow-cycle img {
        max-width: 24px;
    }
}


@media screen and (max-width: 820px) {
    .hr-solution {
        flex-wrap: wrap;
        padding: 0 4%;
        box-sizing: border-box;
    }
}

.hr-cycle-title {
    width: 100%;
    text-align: center;
    font-size: 38px;
    line-height: 65px;
    color: #FFF;
    font-weight: bold;
}

@media screen and (max-width: 820px) {
    .hr-cycle-title {
        font-size: 5.87vw;
        line-height: 7.97vw;
    }
}

.hr-solution-title {
    width: 100%;
    max-width: 1156px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.hr-solution-title-img_left {
    max-width: 198px;
    transform: translateX(-5px);
    margin: 0;
    display: flex;
    align-items: flex-end;
}

.hr-solution-title-img_left img {
    width: 198px;
    height: 138px;
}

@media screen and (max-width: 820px) {
    .hr-solution-title-img_left {
        max-width: 25vw;
        transform: translateX(-6vw);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .hr-solution-title-img_left img {
        width: 100%;
        height: auto;
    }
}

.hr-solution-title h3 {
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
}

@media screen and (max-width: 820px) {
    .hr-solution-title h3 {
        font-size: 5vw;
    }
}

.hr-solution-title h3 span {
    font-size: 50px;
    font-weight: bold;
    position: relative;
}

@media screen and (max-width: 820px) {
    .hr-solution-title h3 span {
        font-size: 7vw;
        font-weight: bold;
        position: relative;
    }
}


.hr-solution-title h3 span::after {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #FF705E;
}

.hr-solution-title-img_right {
    max-width: 209px;
    transform: translateX(5px);
    margin: 0;
    display: flex;
    align-items: flex-end;
}

.hr-solution-title-img_right img {
    width: 209px;
    height: 139px;
}

@media screen and (max-width: 820px) {
    .hr-solution-title-img_right {
        max-width: 25vw;
        transform: translateX(6vw);
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .hr-solution-title-img_right img {
        width: 100%;
        height: auto;
    }
}

.hr-solution-contents {
    max-width: 1156px;
    width: 100%;
    background: #FFF;
    margin:  0 auto;
    border-radius: 20px;
    padding: 48px 0 183px 0;
    position: relative;
    margin-bottom: 90px;
    box-shadow: 0px 0px 40px rgba(242, 125, 92, 0.1), 
            0px 0px 10px rgba(242, 125, 92, 0.2);
}

@media screen and (max-width: 820px) {
    .hr-solution-contents {
        width: 100%;
        padding: 48px 20px 30vw 20px;
        box-sizing: border-box;
        margin-bottom: 16%;
    }
}

@media screen and (max-width: 426px) {
    .hr-solution-contents {
        width: 100%;
        padding: 20px 20px 64px 20px;
        box-sizing: border-box;
        margin-bottom: 65px;
    }
}

.hr-solution-list {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    list-style-type: none;
}

@media screen and (max-width: 820px) {
    .hr-solution-list {
        flex-wrap: wrap;
    }
}

.hr-solution-item-img {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 46px;
}

@media screen and (max-width: 820px) {
    .hr-solution-item-img {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 23px;
    }
}

.hr-solution-item-img img {
    max-width: 254px;
}

.hr-solution-item-text {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

@media screen and (max-width: 820px) {
    .hr-solution-item-text {
        font-size: 4.27vw;
    }
}

.hr-solution-item-arrow {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 8px 0 24px 0;
}

.hr-solution-item-arrow img {
    height: 34px;
}

@media screen and (max-width: 820px) {
    .hr-solution-item-list {
        padding-left: 0;
    }
}

.hr-solution-item {
    width: 100%;
}

.hr-solution-item-check {
    width: 100%;
    font-size: 20px;
    color: #FF705E;
    list-style-type: none;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-bottom: 32px;
    letter-spacing: -0.5px;
}

@media screen and (max-width: 820px) {
    .hr-solution-item:nth-child(1) {
        padding-bottom: 12%;
    }
    .hr-solution-item-check {
        padding-left: 0;
        padding-bottom: 16px;
        font-size: 3.1vw;
    }
}

.hr-solution-item-check:last-child {
    padding-bottom: 0;
}

.hr-solution-item-check img {
    width: 30px;
    margin-right: 6px;
}

@media screen and (max-width: 820px) {
    .hr-solution-item-check img {
        width: 20px;
        margin-right: 6px;
    }
}


.hr-solution-position {
    position: absolute;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
}

.hr-solution-position img {
    width: 100%;
    max-width: 615px;
    bottom: -35px;
}

@media screen and (max-width: 820px) {
    .hr-solution-position {
        width: 100%;
    }
    
    .hr-solution-position img {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }  
}

.hr-solution-detail-contents {
    display: flex;
    justify-content: space-between;
    padding-bottom: 151px;
    max-width: 1216px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 820px) {
    .hr-solution-detail-contents {
        flex-wrap: wrap;
        padding-bottom: 15vw;
    }
}

.hr-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 820px) {
    .hr-btn {
        padding: 0 20px;
        box-sizing: border-box;
    }
}

.hr-btn a {
    width: 100%;
    max-width: 385px;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    background: linear-gradient(90deg, #FF705E 6.5%, #FFC13B 97%);
    border-radius: 999px;
    box-shadow: 0px 10px 50px rgba(229, 142, 76, 0.5);
    transition: 0.4s;
}

@media screen and (max-width: 820px) {
    .hr-btn a  {
        font-size: 4.27vw;
    }
}

@media screen and (max-width: 425px) {
    .hr-btn a  {
        max-width: 240px;
        height: 46px;
        font-size: 14px;
    }
}



.hr-btn a:hover {
    box-shadow: 0px 10px 50px rgba(229, 142, 76, 0);
    transition: 0.4s;
}

@media screen and (max-width: 820px) {
    .hr-solution-detail-text {
        padding: 0 16px;
    }
}

.hr-solution-detail-text h4{
    font-size: 32px;
    font-weight: bold;
    line-height: 50px;
    color: #ff815a;
    position: relative;
    padding-bottom: 65px;
    margin: 0;
}

@media screen and (max-width: 820px) {
    .hr-solution-detail-text h4{
        font-size: 4.87vw;
        line-height: 6.5vw;
        padding-bottom: 10vw;
    }
}

@media screen and (max-width: 425px) {
    .hr-solution-detail-text h4{
        font-size: 20px;
        line-height: 7.5vw;
        padding-bottom: 10vw;
    }
}

@media screen and (max-width: 345px) {
    .hr-solution-detail-text h4{
        font-size: 16px;
        line-height: 7.5vw;
        padding-bottom: 10vw;
    }
}

.hr-solution-detail-text h4::after {
    content: '';
    position: absolute;
    background: #ff815a;
    bottom: 32px;
    left: 0;
    width: 100px;
    height: 2px;
}

@media screen and (max-width: 820px) {
    .hr-solution-detail-text h4::after {
        bottom: 5vw;
    }    
}

.hr-solution-detail-text p {
    font-size: 16px;
    line-height: 36px;
    font-weight: 500;
    margin: 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-solution-detail-text p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-solution-detail-text p {
        font-size: 4.27vw;
        line-height: 6vw;
        padding-bottom: 5vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-solution-detail-text p {
        font-size: 12px;
        letter-spacing: -0.5px;
    }
}

.hr-solution-detail-img img {
    width: 100%;
    max-width: 566px;
}

@media screen and (max-width: 820px) {
    .hr-solution-detail-img img {
        width: 100%;
        max-width: 100%;
    }
}

.hr-solution-btn {
    display: flex;
    justify-content: center;
}

.hr-solution-btn img {
    width: 100%;
    max-width: 473px;
}

.hr-service {
    padding-bottom: 98px;
}

@media screen and (max-width: 820px) {
    .hr-service {
        flex-wrap: wrap;
        padding: 0 4% 18% 4%;
        box-sizing: border-box;
    }
}

.hr-service-contents {
    max-width: 1216px;
    width: 100%;
    background: #313435;
    margin:  0 auto;
    border-radius: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 70px 82px;
    box-sizing: border-box;
    position: relative;
}

@media screen and (max-width: 820px) {
    .hr-service-contents {
        padding: 50px 20px;
        box-sizing: border-box;
        margin-bottom: 12%;
    }
}

@media screen and (max-width: 425px) {
    .hr-service-contents {
        padding: 30px 10px;
    }
}

.hr-service-contents .hr-title-jp {
    color: #FFF;
}

@media screen and (max-width: 820px) {
    .hr-service-contents .hr-title-jp {
        font-size: 5.6vw;
        line-height: 8vw;
    }
}

.hr-service-contents .hr-title-sub {
    color: #FFF;
    padding-top: 24px;
    font-size: 16px;
}

@media screen and (max-width: 820px) {
    .hr-service-contents .hr-title-sub {
        color: #FFF;
        padding-top: 0;
        font-size: 16px;
    }
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-service-contents .hr-title-sub {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-service-contents .hr-title-sub {
        font-size: 4.27vw;
        line-height: 6vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-service-contents .hr-title-sub {
        font-size: 16px;
        line-height: 6vw;
    }
}


.hr-title-icon {
    width: 181px;
    position: absolute;
    top: -107px;
    left: 36px;
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-title-icon {
        width: 20vw;
        position: absolute;
        top: -15vw;
        left: 10px;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-title-icon {
        width: 88px;
        top: -18vw;
    }
}

.hr-title-icon img {
    width: 100%;
}

.hr-service-title {
    display: flex;
    justify-content: center;
    transform: translateY(-37px);
    padding-bottom: 20px;
}

.hr-service-title img {
    width: 100%;
    max-width: 1051px;
}

.hr-service-subtitle {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hr-service-subtitle h3 {
    width: 273px;
    height: 60px;
    background: #ff815a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    margin: 56px 0 10px 0;
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-service-subtitle h3 {
        width: auto;
        height: auto;
        padding: 12px 24px;
        font-size: 5.33vw;
        margin: 27px 0 10px 0;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-service-subtitle h3 {
        font-size: 14px;
    }
}


.hr-service-subtitle h3::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 0;
    border-right: 18px solid transparent;
    border-top: 18px solid #ff815a;
    border-left: 18px solid transparent;
}

.hr-service-subtitle img {
    width: 100%;
    max-width: 273px;
}

.hr-service-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 29px;
    margin: 35px 0 0 0;
    padding: 0 86px;
    list-style-type: none;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 56px;
}

.hr-service-list.other {
    padding-bottom: 0;
}

@media screen and (max-width: 820px) {
    .hr-service-list {
        flex-wrap: wrap;  
        padding: 0;
        gap: 12px;
        margin: 22px 0 0 0;
        padding-bottom: 6%;
        justify-content: space-between;
    }
}

.hr-service-item {
    width: 240px;
    background: #FFF;
    border-radius: 10px;
    padding: 14px 28px 24px 28px;
    box-sizing: border-box;
}

@media screen and (max-width: 1220px) {
    .hr-service-item {
        width: 31%;
    }
}

@media screen and (max-width: 1001px) {
    .hr-service-item {
        width: 30%;
    }
}

@media screen and (max-width: 820px) {
    .hr-service-item {
        width: 49%;
        padding: 4% 3%;
    }
}

@media screen and (max-width: 702px) {
    .hr-service-item {
        width: 48%;
        padding: 2% 3%;
    }
}

@media screen and (max-width: 425px) {
    .hr-service-item {
        width: 48%;
        padding: 10px;
    }
}

@media screen and (max-width: 320px) {
    .hr-service-item {
        width: 100%;
    }
}

.hr-service-item-icon {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
}


@media screen and (max-width: 820px) {
    /** PC(1440px以下)のみ */
    .hr-service-item-icon {
        justify-content: center;
    }
}

@media screen and (max-width: 425px) {
    /** PC(1440px以下)のみ */
    .hr-service-item-icon {
        height: 50px;
    }
}

.hr-service-item h4 {
    margin: 0;
    padding-bottom: 11px;
    font-size: 16px;
    font-weight: bold;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-service-item h4 {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-service-item h4 {
        font-size: 4.27vw;
        line-height: 6vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-service-item h4 {
        font-size: 12px;
        line-height: 5px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.hr-service-item h4.sp-1 {
    letter-spacing: -1px;
}

.hr-service-item p {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    height: 65px;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-service-item p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-service-item p {
        font-size: 4.27vw;
        line-height: 6vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-service-item p {
        font-size: 12px;
        line-height: 16px;
    }
}

@media screen and (max-width: 820px) {
    .hr-service-item p {
        height: auto;
    }
}

.hr-service-item-icon img {
    max-width: 100%;
}

.hr-service-btn {
    display: flex;
    justify-content: center;
}

.hr-service-btn img {
    width: 100%;
    max-width: 473px;
}

.hr-feature {
    width: 100%;
    padding: 110px 0 98px 0;
    background: #FFF;
}

@media screen and (max-width: 820px) {
    .hr-feature {
        width: 100%;
        padding: 52px 0 18% 0;
        box-sizing: border-box;
        background: #FFF;
    }  
}

.hr-feature-contetns {
    max-width: 1216px;
    width: 100%;
    margin: 0 auto;
}

.hr-feature-title {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 820px) {
    .hr-feature-title {
        padding-bottom: 50px;
    }
}

.hr-feature-list {
    margin-top: 96px;
}

@media screen and (max-width: 820px) {
    .hr-feature-list {
        padding: 0;
        margin-top: 26px;
    }
}

.hr-feature-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 105px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item {
        flex-wrap: wrap;
        margin-bottom: 12vw;
    }
}

@media screen and (max-width: 820px) {
    .hr-feature-item {
        flex-wrap: wrap;
        margin-bottom: 28px;
    }
}

.hr-feature-item-text {
    width: calc(100% - 701px);
    padding-right: 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-text {
        width: 100%;
        padding-right: 4%;
        padding-left: 4%;
        padding-bottom: 8px;
    }
}

.hr-feature-item-text h3 {
    font-size: 32px;
    font-weight: bold;
    line-height: 45px;
    margin: 0;
    letter-spacing: -0.3px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-text h3 {
        text-align: center;
        font-size: 5.87vw;
        line-height: 6.5vw;
    }
}

.hr-feature-item-text h3 span {
    font-size: 12px;
    vertical-align: top;
    line-height: 34px;
}

.hr-feature-item-text-num {
    width: 100%;
    display: flex;
}

.hr-feature-item-text-num img {
    width: 34px;
    height: 37px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-text-num {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 8px;
    }
    .hr-feature-item-text-num img{
        width: 34px;
        height: 37px;
    }
}

@media screen and (max-width: 425px) {
    .hr-feature-item-text-num {
        padding-bottom: 4px;
    }
    .hr-feature-item-text-num img{
        width: 20px;
        height: auto;
    }
}

.hr-feature-item-text p {
    font-size: 16px;
    margin: 20px 0 0 0;
    letter-spacing: -0.8px;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-feature-item-text p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-feature-item-text p {
        font-size: 4.27vw;
        line-height: 6vw;
        margin: 4px 0 0 0;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-feature-item-text p {
        font-size: 12px;
        line-height: 5vw;
        margin: 4px 0 0 0;
        letter-spacing: 0.01px;
        text-align: justify;
        text-align-last: left;
    }
}

.hr-feature-item-text .sp-caption {
    margin-top: 32px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-text .sp-caption {
        margin-top: 0px;
    }
}

.hr-feature-item-text p span {
    font-size: 12px;
    display: flex;
}

.hr-feature-item-text .sp-caption span {
    font-size: 12px;
    display: flex;
    letter-spacing: 0;
}


.hr-feature-item-text .sp-caption span:nth-child(1)::before {
    content: '※1 ';
    padding-right: 5px;
}

.hr-feature-item-text .sp-caption span:nth-child(2)::before {
    content: '※2 ';
    padding-right: 5px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-text p span {
        font-size: 12px;
        margin-top: 0;
        letter-spacing: 0.06px;
    }
}

.hr-feature-item-img {
    width: 701px;
}

.hr-feature-item-img img {
    width: 100%;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-img {
        width: 100%;
        max-width: 100%;
        padding: 24px 2% 0 2%;
        box-sizing: border-box;
    }
    .hr-feature-item:first-child .hr-feature-item-img {
        padding: 0 2% 0 2%;
    }
}

.hr-feature-item-img-caption {
    font-size: 16px;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-feature-item-img-caption {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-feature-item-img-caption {
        font-size: 4.27vw;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-feature-item-img-caption {
        font-size: 12px;
    }
}

.hr-feature-item-img-caption02 {
    font-size: 12px;
    width: 100%;
    text-align: right;
    padding-right: 40px;
    display: block;
    box-sizing: border-box;
    color: #676767;
}

@media screen and (max-width: 820px) {
    .hr-feature-item-img-caption02 {
        padding-right: 20px;
    }
}

.hr-feature-item:nth-child(2n) {
    flex-direction: row-reverse;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text h3 {
    text-align: right;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text-num img {
    padding-right: 10px;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text {
    padding-right: 0;
    padding-left: 20px;
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-feature-item:nth-child(2n) .hr-feature-item-text {
        padding-right: 4%;
        padding-left: 4%;
    }

    .hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 8px;
    }

    .hr-feature-item:nth-child(2n) .hr-feature-item-text-num img {
        padding-right: 0;
    }

    .hr-feature-item:nth-child(2n) .hr-feature-item-text h3 {
        text-align: center;
    }
}

@media screen and (max-width: 425px) {
    .hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
        padding-bottom: 4px;
    }
}


.hr-feature-item:last-child {
    margin-bottom: 64px;
}

@media screen and (max-width: 820px) {
    .hr-feature-item:last-child {
        margin-bottom: 6%;
    }
}

.hr-feature-btn {
    display: flex;
    justify-content: center;
}

.hr-feature-btn img {
    width: 100%;
    max-width: 473px;
}

.hr-shift {
    width: 100%;
    position: relative;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 37%, rgba(245,245,245,0) 37%, rgba(245,245,245,0) 100%);
}

@media screen and (max-width: 820px) {
    .hr-shift {
       box-sizing: border-box;
    }
}

.hr-shift-contents {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    position: relative;
}

.hr-shift-img {
    max-width: 740px;
}

@media screen and (max-width: 820px) {
    .hr-shift-img {
        max-width: 100%;
    }
}

.hr-shift-img img {
    width: 100%;
}

.hr-shift-text {
    width: 100%;
    max-width: 750px;
    position: absolute;
    background: #FFF;
    right: 0;
    bottom: -165px;
    padding: 50px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1), 
            0px 0px 10px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 820px) {
    .hr-shift-text {
        padding: 20px 16px;
        position: relative;
        width: 94%;
        margin: 0 3%;
        margin-top: -25vw;
        bottom: auto;
        left: auto;
    }
}

.hr-shift-text-logo img {
    max-width: 217px;
}

@media screen and (max-width: 820px) {
    .hr-shift-text-logo {
        display: flex;
        justify-content: center;
    }

    .hr-shift-text-logo img {
        max-width: 50vw;
    }
}

.hr-shift-text h3 {
    font-size: 44px;
    line-height: 60px;
    letter-spacing: -0.5px;
    margin: 20px 0;
}


@media screen and (max-width: 820px) {
    .hr-shift-text h3 {
        font-size: 5vw;
        line-height: 7vw;
        margin: 8px 0;
    }
}

.hr-shift-text p {
    font-size: 16px;
    margin: 0 0 46px 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-shift-text p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-shift-text p {
        font-size: 4.27vw;
        margin: 0 0 23px 0;
    }
}

@media screen and (max-width: 425px) {

    /** SPのみ */
    .hr-shift-text p {
        font-size: 12px;
        margin: 0 0 23px 0;
    }
}


.hr-shift-text-list {
    display: flex;
    list-style: none;
    justify-content: space-between;
    padding-right: 46px;
}

@media screen and (max-width: 820px) {
    .hr-shift-text-list {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
        gap: 20px;
        align-items: flex-end;
        padding: 0 4px;
    }
}

.hr-shift-text-item:nth-child(1) img{
    max-width: 101px;
}

.hr-shift-text-item:nth-child(2) img{
    max-width: 168px;
}

.hr-shift-text-item:nth-child(3) img{
    max-width: 176px;
}

@media screen and (max-width: 820px) {
    .hr-shift-text-item:nth-child(1) img{
        max-width: 100%;
    }
    
    .hr-shift-text-item:nth-child(2) img{
        max-width: 100%;
    }
    
    .hr-shift-text-item:nth-child(3) img{
        max-width: 100%;
    }
}

.hr-system {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 300px 0 0 0;
}

@media screen and (max-width: 820px) {
    .hr-system {
       padding: 0 5px;
       box-sizing: border-box;
       margin-top: 20px;
    }
}

.hr-system .hr-title-sub {
    margin-top: 16px;
}

@media screen and (max-width: 425px) {
    .hr-system .hr-title-sub {
        font-size: 12px;
        margin-top: 2px;
        line-height: 5.2vw;
    }
}

.hr-system-title {
    display: flex;
    justify-content: center;
}

.hr-system-title img {
    width: 100%;
    max-width: 949px;
}

.hr-system-list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 97px;
    margin: 64px 0 100px 0;
    padding: 0;
    list-style-type: none;
}

@media screen and (max-width: 820px) {
    .hr-system-list {
        flex-wrap: wrap;
        gap: 4%;
        margin: 6% 0 10% 0;
    }
}

.hr-system-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 820px) {
    .hr-system-item {
        width: 48%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
    }
}

.hr-system-item:nth-child(1) img {
    width: 100%;
    max-width: 128px;
    display: inline-block;
}

.hr-system-item:nth-child(2) img {
    width: 100%;
    max-width: 93px;
    display: inline-block;
}

.hr-system-item:nth-child(3) img {
    width: 100%;
    max-width: 105px;
    display: inline-block;
}

@media screen and (max-width: 820px) {
    .hr-system-item:nth-child(1) img {
        width: 100%;
        max-width: 93px;
        display: inline-block;
    }
    
    .hr-system-item:nth-child(2) img {
        width: 100%;
        max-width: 93px;
        display: inline-block;
    }

    .hr-system-item:nth-child(3) {
        width: 100%;
        margin-top: 8%;
    }
    
    .hr-system-item:nth-child(3) img {
        width: 100%;
        max-width: 93px;
        display: inline-block;
    }
}

.hr-system-item h3 {
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .hr-system-item h3 {
        font-size: 3.87vw;
    }
}

.hr-system-item p {
    width: 100%;
    font-size: 16px;
    margin: 0;
    letter-spacing: -0.5px;
    text-align: center;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {

    /** PC(1440px以下)のみ */
    .hr-system-item p {
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 820px) {

    /** SPのみ */
    .hr-system-item p {
        font-size: 3vw;
    }
}

@media screen and (max-width: 820px) {
    .hr-price {
        padding: 0 4%;
        box-sizing: border-box;
    }
}

.hr-price .hr-title-sub {
    margin-top: 12px;
}

@media screen and (max-width: 425px) {
    .hr-price {
        margin-top: 2px;
    }
}

.hr-price-contents {
    max-width: 1216px;
    width: 100%;
    background: #FFF;
    margin:  0 auto;
    border-radius: 20px;
    padding: 48px 0 62px 0;
    position: relative;
    margin-bottom: 130px;
}

@media screen and (max-width: 820px) {
    .hr-price-contents {
        padding: 20px 16px 40px 16px;
        box-sizing: border-box;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 425px) {
    .hr-price-contents .hr-title-sub {
        letter-spacing: -0.5px;
        font-size: 12px;
    }
}

@media screen and (max-width: 330px) {
    .hr-price-contents .hr-title-sub {
        letter-spacing: -1px;
        font-size: 11px;
    }
}

.hr-price-title {
    display: flex;
    justify-content: center;
}

.hr-price-title img {
    width: 100%;
    max-width: 949px;
}

.hr-price-list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 260px;
    margin: 64px 0 72px 0;
    padding: 0;
    list-style-type: none;
}

@media screen and (max-width: 820px) {
    .hr-price-list {
        gap: 40px;
        margin: 30px 0 20px 0;
    }
}

.hr-price-item {
}

.hr-price-item:nth-child(1) img {
    width: 100%;
    max-width: 104px;
}

.hr-price-item:nth-child(2) img {
    width: 100%;
    max-width: 104px;
}

@media screen and (max-width: 820px) {
    .hr-price-item:nth-child(1) img {
        width: 100%;
        max-width: 16vw;
    }
    
    .hr-price-item:nth-child(2) img {
        width: 100%;
        max-width: 16vw;
    }
}

@media screen and (max-width: 425px) {
    .hr-price-item:nth-child(1) img {
        width: 100%;
        max-width: 55px;
    }
    
    .hr-price-item:nth-child(2) img {
        width: 100%;
        max-width: 55px;
    }
}


.hr-price-item-img {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hr-price-item h3 {
    width: 100%;
    font-size: 30px;
    text-align: center;
    margin: 16px 0 24px 0;
}

.hr-price-item h3 span {
    font-size: 20px;
    transform: translateY(-7px);
    display: inline-block;
}

@media screen and (max-width: 820px) {
    .hr-price-item h3 {
        width: 100%;
        font-size: 4.87vw;
        text-align: center;
        margin: 6px 0 2px 0;
    }
    
    .hr-price-item h3 span {
        font-size: 3.87vw;
        transform: translateY(0);
        display: inline-block;
    }
}

.hr-price-item-price {
    width: 100%;
    text-align: center;
    font-size: 120px;
    line-height: 70px;
    color: #ff815a;
    font-weight: bold;
}

@media screen and (max-width: 425px) {
    .hr-price-item-price {
        font-size: 60px;
        line-height: 55px;
    }
}

.hr-price-item-price span {
    font-size: 36px;
    color: #313435;
    font-weight: 900;
}

@media screen and (max-width: 425px) {
    .hr-price-item-price span {
        font-size: 18px;
    }
}

.hr-price-btn {
    display: flex;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 6px;
}

.hr-price-btn img {
    width: 100%;
    max-width: 473px;
}

.hr-focus {
    padding-bottom: 100px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 69.5%, rgba(245,245,245,0) 64.5%, rgba(245,245,245,0) 100%)
}

@media screen and (max-width: 820px) {
    .hr-focus {
        padding: 0 4% 10% 4%;
        box-sizing: border-box;
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74.5%, rgba(245,245,245,0) 74.5%, rgba(245,245,245,0) 100%)
    }
}

@media screen and (max-width: 425px) {
    .hr-focus {
        padding: 0 4% 10% 4%;
        box-sizing: border-box;
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 76.5%, rgba(245,245,245,0) 74.5%, rgba(245,245,245,0) 100%)
    }
}

.hr-focus-img {
    width: 100%;
    max-width: 643px;
    margin: 0 auto;
    padding-top: 44px;
}

.hr-focus-img img {
    width: 100%;
}

.hr-focus-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    max-width: 1021px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}

@media screen and (max-width: 820px) {
    .hr-focus-list {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.hr-focus-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (max-width: 820px) {
    .hr-focus-item {
        width: 48%;
    }
    .hr-focus-item:nth-child(3) {
        width: 60%;
    }
}


.hr-focus-item-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding-top: 27px;
    padding-left: 0;
    padding-bottom: 110px;
}

@media screen and (max-width: 820px) {
    .hr-focus-item-list {
        padding-top: 12px;
        padding-left: 0;
        padding-bottom: 40px;
    }
}

.hr-focus-item-img {
    position: relative;
}

.hr-focus-item-img-label {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    padding: 7px 20px;
    color: #FFF;
    background: #313435;
    border-radius: 999px;
}

@media screen and (max-width: 418px) {
    .hr-focus-item-img-label {
        font-size: 12px;
    }
}

@media screen and (max-width: 320px) {
    .hr-focus-item-img-label {
        font-size: 9px;
    }
}

.hr-focus-item-img{
    width: 188px;
}

.hr-focus-item-img img{
    width: 100%;
}

.hr-focus-item-check {
    width: 100%;
    font-size: 20px;
    color: #FF705E;
    list-style-type: none;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-left: 50px;
    padding-bottom: 46px;
}

@media screen and (max-width: 820px) {
    .hr-focus-item-check {
        padding-left: 0;
        padding-bottom: 24px;
        font-size: 3vw;
    }
}

.hr-focus-item-check:last-child {
    padding-bottom: 0;
}

.hr-focus-item-check img {
    width: 20px;
    margin-right: 6px;
}

.hr-focus-btn {
    display: flex;
    justify-content: center;
    padding-top: 79px;
    padding-bottom: 67px;
}

.hr-focus-btn img {
    width: 100%;
    max-width: 473px;
}

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

@media screen and (max-width: 820px) {
    .contact {
        right: 0;
    }
}

@media screen and (max-width: 340px) {
    .contact {
        right: 32px;
    }
}

.header {
    position: fixed;
    backdrop-filter: none;
}

.header.active {
    backdrop-filter: blur(1.2rem);
}