@charset "UTF-8";

/* ==========================================================================
   1. Header
   ========================================================================== */
.header {
    padding: 2rem 0 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    max-width: 104rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.header h1 {
    max-width: 27.6rem;
}

.header p {
    font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
    .header {
        padding: 5.128vw 0 6.154vw;
    }

    .header .container {
        flex-direction: column;
        align-items: center;
    }

    .header h1 {
        max-width: 48.718vw;
    }

    .header p {
        font-size: 3.077vw;
        margin-top: 1.282vw;
    }
}

/* ==========================================================================
   2. Main Visual (MV)
   ========================================================================== */
.mv {
    padding: 4rem 0 2rem;
    overflow: hidden;
}

.mv .inner {
    max-width: 104rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.mv_container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.mv_left {
    flex: 1;
}

.mv_right {
    flex: 1.1;
}

.mv_logo {
    max-width: 42rem;
    margin-bottom: 0.8rem;
}

.mv .btn {
    text-align: left;
}

.mv .btn a {
    display: inline-block;
    max-width: 42rem;
}

.mv .btn a:hover {
    opacity: .7;
}

@media screen and (max-width: 767px) {
    .mv {
        padding: 10.256vw 0 0;
    }

    .mv_container {
        flex-direction: column-reverse;
        gap: 0;
    }

    .mv_left {
        width: 100%;
        padding: 2vw 4vw 8vw;
        text-align: center;
    }

    .mv_logo {
        margin: 0 auto;
    }

    .mv .btn {
        text-align: center;
    }

    .mv .btn a {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   3. Common Section Settings
   ========================================================================== */
section {
    background: #fff;
    padding: 0 0 8rem;
    overflow: hidden;
}

section .inner {
    max-width: 104rem;
    margin: 0 auto;
    padding: 0 2rem;
}

section h2 {
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    margin-top: 4rem;
    margin-bottom: 5rem;
}

@media screen and (max-width: 767px) {
    section {
        padding: 0 0 10vw;
    }

    section h2 {
        font-size: 5.6vw;
        margin-top: 6.4vw;
        margin-bottom: 6vw;
    }
}

/* ==========================================================================
   4. Section Specifics
   ========================================================================== */

/* sec_1 - Job Slider */
.sec_1 {
    background: #F2F0EA;
    padding: 3.7rem 0 8rem;
}

.sec_1 .date {
    display: block;
    text-align: right;
    max-width: 104rem;
    margin: 0 auto;
    padding: 0 2rem;
    font-size: 1.4rem;
}

.sec_1 .slider {
    max-width: 104rem;
    margin: 2rem auto 0;
}

.sec_1 .slider li {
    border-radius: 10px;
}

.sec_1 .slider li a {
    position: relative;
    display: block;
}

.sec_1 .slider li a::before {
    content: "NEW";
    font-weight: bold;
    background: #E22A54;
    display: inline-block;
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    font-size: 1.4rem;
    color: #fff;
    padding: .4rem 1rem;
    border-radius: 8px;
    z-index: 1;
}

.sec_1 .slider .slick-slide {
    margin: 0 1.5rem;
}

.sec_1 .slider .txt_area {
    background: #fff;
    font-size: 1.6rem;
    padding: 2rem;
    border-radius: 0 0 10px 10px;
}

.sec_1 .slider .business_cont {
    font-weight: bold;
}

.sec_1 .slider .prefectures,
.sec_1 .slider .basic_salary {
    margin-top: 1rem;
}

.sec_1 .slider .btn {
    margin-top: 1.7rem;
}

.sec_1 .slider .btn span {
    color: #fff;
    background: #ef776f;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    border-radius: 10px;
}

@media screen and (max-width: 767px) {
    .sec_1 {
        padding: 6.923vw 0 15.385vw;
    }

    .sec_1 .date {
        font-size: 3.077vw;
        padding-right: 5%;
    }

    .sec_1 .slider .txt_area {
        font-size: 3.59vw;
        padding: 5.128vw;
    }

    .sec_1 .slider .btn span {
        font-size: 3.59vw;
        padding: 2.564vw;
    }
}

/* sec_2 - Yellow Banner / Area search */
.sec_2 {
    background: #F9C83C;
    padding: 4rem 0 6rem;
}

.sec_2 h2 {
    margin-top: 0;
}

.sec_2 ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 110rem;
    margin: 2rem auto 0;
}

.sec_2 ul li {
    width: 20%;
}

.sec_2 ul li span {
    background: #fff;
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 12.82vw;
    padding: 1.2rem 0;
    margin: 1rem;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}

.sec_2 .btn a {
    display: inline-block;
    max-width: 52rem;
    margin: 4rem auto 0;
}

@media screen and (max-width: 767px) {
    .sec_2 {
        padding: 6.154vw 3% 7.179vw;
    }

    .sec_2 ul li {
        width: 50%;
    }

    .sec_2 ul li span {
        font-size: 4.103vw;
        padding: 3.077vw 0;
        margin: 1.538vw;
    }

    .sec_2 .btn a {
        max-width: 82.051vw;
        margin: 7.179vw auto 0;
    }
}

/* sec_4 - Features */
.sec_4 .container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.sec_4 .item {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.sec_4 .item .img {
    flex: 0 0 28%;
}

.sec_4 .item .content {
    flex: 1;
}

.sec_4 .item h3 {
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sec_4 .item h3 i {
    color: #28a745;
    font-size: 1em;
}

.sec_4 .item .desc {
    font-size: 1.8rem;
    margin-top: 1.6rem;
}

@media screen and (max-width: 767px) {
    .sec_4 .item {
        flex-direction: column;
        gap: 3.2vw;
    }

    .sec_4 .item:first-child {
        margin-top: 0;
    }

    .sec_4 .item .img {
        width: 100%;
    }

    .sec_4 .item .content {
        text-align: left;
    }

    .sec_4 .item h3 {
        font-size: 4.8vw;
        display: flex;
        align-items: center;
        gap: 2vw;
    }

    .sec_4 .item .desc {
        font-size: 3.825vw;
        margin-top: 3.59vw;
    }
}

/* sec_employer_voice */
.sec_employer_voice .container {
    display: flex;
    gap: 4rem;
}

.sec_employer_voice .item {
    flex: 1;
}

.sec_employer_voice .item .img {
    margin-bottom: 2rem;
}

.sec_employer_voice .item h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.4;
    display: inline-block;
    padding-bottom: 0.6rem;
}

.sec_employer_voice .item .desc {
    font-size: 1.8rem;
    line-height: 1.8;
}

@media screen and (max-width: 767px) {
    .sec_employer_voice .container {
        flex-direction: column;
        gap: 8vw;
    }


    .sec_employer_voice .item h3 {
        font-size: 4.615vw;
    }

    .sec_employer_voice .item .desc {
        font-size: 3.825vw;
    }
}

/* sec_6 - User Voice */
.sec_6 .container {
    display: flex;
    gap: 4rem;
}

.sec_6 .item {
    position: relative;
    background: #fff;
    flex: 1;
    padding: 4.8rem 2rem 3rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.sec_6 .item h3 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 2rem;
    text-align: center;
}

.sec_6 .item .desc {
    font-size: 1.8rem;
    margin-top: 1.6rem;
}

.sec_6 .item>img {
    position: absolute;
    top: -2.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4.8rem;
}

@media screen and (max-width: 767px) {
    .sec_6 .container {
        flex-direction: column;
        gap: 4.8vw;
        margin-top: 5.128vw;
    }

    .sec_6 .item {
        width: 100%;
        padding: 10.256vw 5.128vw 8.205vw;
        margin-top: 0;
    }

    .sec_6 .item h3 {
        font-size: 4.103vw;
        margin-top: 5.128vw;
    }

    .sec_6 .item .desc {
        font-size: 3.825vw;
        margin-top: 4.1vw;
    }

    .sec_6 .item>img {
        width: 12.308vw;
        top: -6.154vw;
    }
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.footer {
    padding: 6rem 0 0;
    background: #fff;
    text-align: center;
}

.footer .logo {
    width: 20rem;
    margin: 0 auto;
}

.footer .footer__link {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 1.4rem;
}

.footer .footer__link a {
    color: #111;
    font-weight: 500;
}

.footer .copy {
    display: block;
    background: #111;
    color: #fff;
    font-size: 1.2rem;
    padding: 2.8rem 0;
    margin-top: 6.4rem;
}

@media screen and (max-width: 767px) {
    .footer {
        padding: 15.385vw 0 0;
    }

    .footer .logo {
        width: 41.026vw;
    }

    .footer .footer__link {
        gap: 6vw;
        margin-top: 2.4vw;
        font-size: 3.33vw;
    }

    .footer .copy {
        margin-top: 12.308vw;
        padding: 6.154vw 0;
        font-size: 3.077vw;
    }
}

/* ==========================================================================
   6. Animation & Utilities
   ========================================================================== */
.animation {
    animation: dokundokun 1300ms ease infinite;
}

@keyframes dokundokun {

    0%,
    30%,
    70% {
        transform: scale(1);
    }

    15%,
    45% {
        transform: scale(1.1);
    }
}

/* Logo Slider */
.logo-slider {
    overflow: hidden;
    white-space: nowrap;
    padding: 3rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
}

.logo-track img {
    height: 50px;
    margin: 0 3rem;
    width: auto;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .logo-slider {
        padding: 7.692vw 0;
    }

    .logo-track img {
        height: 8.974vw;
        margin: 0 3.846vw;
    }
}