@charset "utf-8";

/* ==========================================
カバー
========================================== */

.mv-wrapper {
    max-width: 192rem;
    width: 100%;
    padding: 1.2rem 0 12.6rem;
    margin: auto;
    position: relative;
}

.mv-inner {
    max-width: 184.1rem;
    width: 100%;
    padding: 0 0 0 1.5rem;
    margin: 0 0 0 auto;
    position: relative;
}

.mv-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mv-left-block {
    max-width: 78rem;
    width: 42.71%;
    margin: 12.4rem 0 0;
}

.mv-right-block {
    max-width: 95.1rem;
    width: 52.08%;
}

.mv-text-box01 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 0 auto;
}

.mv-text {
    display: inline-block;
    font-size: 6.2rem;
    font-weight: bold;
    line-height: 1.45em;
    background: var(--c-white);
    padding: 0.8rem 2.2rem 0.9rem;
}

.mv-text:not(:first-child) {
    margin: 0.8rem 0 0;
}

.mv-img-box01 {
    max-width: 70.7rem;
    width: 90.64%;
    margin: 4.6rem 0 0;
}

.mv-img-box02 {
    max-width: 89.7rem;
    width: 94.32%;
    margin: 0 0 0 auto;
}

.mv-text-box02 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: -4.5rem 0 0;
}

.mv-decoration {
    margin: auto;
    position: absolute;
}

.mv-decoration01 {
    max-width: 109.8rem;
    width: 57.18%;
    top: -21.5%;
    left: -14.42%;
}

.mv-decoration02 {
    max-width: 37.5rem;
    width: 19.53%;
    top: 5.83%;
    left: 37.84%;
}

.mv-decoration03 {
    max-width: 39.2rem;
    width: 20.41%;
    top: 24.15%;
    left: 27.65%;
}

.mv-decoration04 {
    max-width: 43.3rem;
    width: 22.55%;
    right: -1.51%;
    bottom: 4.43%;
}

.mv-decoration05 {
    max-width: 30rem;
    width: 15.62%;
    left: 40.48%;
    bottom: 0;
}

.mv-decoration06 {
    max-width: 11.8rem;
    width: 6.14%;
    left: 1.82%;
    bottom: 5.94%;
}

/* ==========================================
カサブランカについて
========================================== */

.about-wrapper {
    padding: 9rem 0 21.1rem;
    position: relative;
}

.about-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
}

.about-area01 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.about-img-block01 {
    max-width: 49.9rem;
    width: 41.58%;
    aspect-ratio: 499 / 530;
}

.about-text-block01 {
    max-width: 63.3rem;
    width: 52.75%;
    margin: 7.8rem 0 0;
}

.about-speech-bubble {
    width: fit-content;
    background: var(--c-secondary);
    border-radius: 0.5rem;
    font-size: 2.5rem;
    line-height: 1.44em;
    color: var(--c-white);
    padding: 0.7rem 1.5rem;
    margin-bottom: 1.8rem;
    position: relative;
}

.about-speech-bubble:after {
    content: "";
    display: block;
    max-width: 1.7rem;
    width: 100%;
    height: 1.9rem;
    background: var(--c-secondary);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    position: absolute;
    left: 2.8rem;
    bottom: -1.8rem;
}

.about-text01 {
    font-weight: bold;
    margin: 3.6rem 0 0;
}

.about-area02 {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    margin: 17.1rem 0 0;
}

.about-img-block02 {
    max-width: 49.9rem;
    width: 41.58%;
    aspect-ratio: 499 / 530;
}

.about-text-block02 {
    max-width: 63.4rem;
    width: 52.83%;
    margin: -2.5rem 0 0;
}

.about-text02 {
    font-weight: bold;
    margin: 2.2rem 0 0;
}

.about-btn01 {
    max-width: 55rem;
    margin: 5.1rem 0 0;
}

.about-decoration {
    margin: auto;
    position: absolute;
}

.about-decoration01 {
    max-width: 44.1rem;
    width: 22.96%;
    top: 5.66%;
    left: 4.89%;
}

.about-decoration02 {
    max-width: 91.6rem;
    width: 47.7%;
    right: -10.48%;
    bottom: 20.95%;
}

.about-decoration03 {
    max-width: 47.3rem;
    width: 24.63%;
    left: -3.19%;
    bottom: -9.62%;
}

/* ==========================================
こんなお悩みありませんか？
========================================== */

.worry-wrapper {
    padding: 0.1rem 0 0;
    background: var(--bg-gray-light);
    position: relative;
}

.worry-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: -3.9rem auto 0;
    position: relative;
    z-index: 9;
}

.worry-title-box {
    max-width: 74.8rem;
    width: 90%;
    background: var(--c-secondary);
    border-radius: 1.5rem;
    color: var(--c-white);
    text-align: center;
    padding: 3.8rem 1.5rem 3.7rem;
    margin: 0 auto;
    position: relative;
}

.worry-title-box:after {
    content: "";
    display: block;
    max-width: 3.4rem;
    width: 100%;
    height: 3.8rem;
    background: var(--c-secondary);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.8rem;
}

.worry-title {
    font-size: 4.6rem;
    font-weight: bold;
    line-height: 1.43em;
}

.worry-area01 {
    margin: 1.63rem auto 0;
    position: relative;
    z-index: 9;
}

.worry-img-box {
    text-align: center;
}

.worry-img-box-sp {
    display: none;
}

.worry-area01:after {
    content: "";
    display: block;
    max-width: 20.4rem;
    width: 100%;
    height: 6.4rem;
    background: #EDA185;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: 2.8rem auto 0;
}

.worry-area02 {
    margin: -2.8rem auto 0;
    position: relative;
}

.worry-text-box {
    background: var(--c-white);
    border: solid 1.7rem #FCF0ED;
    border-bottom: 0;
    border-radius: 3rem 3rem 0 0;
    padding: 4.9rem 1.5rem 4.1rem;
    text-align: center;
}

.worry-text01 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.45em;
}

.worry-text01 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.worry-text01:before, .worry-text01:after {
    content: "";
    display: inline-block;
    width: 0.3rem;
    height: 1.42em;
    background: var(--c-gray);
    border-radius: 0.3rem;
    margin: 0 1em;
    vertical-align: middle;
    position: relative;
}

.worry-text01:before {
   transform: rotate(-45deg);
}

.worry-text01:after {
   transform: rotate(45deg);
}

.worry-text02 {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1.44em;
    margin: 2rem 0 0;
}

.worry-text02 strong {
    font-weight: inherit;
    background: linear-gradient(transparent 70.87%, #F4ECAD 70.87%);
}

.worry-area02:before {
    content: "";
    display: block;
    width: 88.02%;
    height: 1px;
    background-image: linear-gradient(to right, var(--c-gray), var(--c-gray) 6px, transparent 6px, transparent 12px);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    margin: auto;
    position: absolute;
    bottom: -4rem;
    left: 0;
    right: 0;
}

/* ==========================================
カサブランカの魅力
========================================== */

.charm-wrapper {
    padding: 13.7rem 0 0;
    position: relative;
}

.charm-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
    z-index: 9;
}

.charm-area {
    margin: 5.6rem auto 0;
}

.charm-card-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7rem 5%;
}

.charm-card {
    width: 30%;
}

.charm-card-img {
    aspect-ratio: 36 / 30.7;
    border-radius: 1.5rem;
    overflow: hidden;
}

.charm-card-img > img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.charm-card-number {
    max-width: 8.4rem;
    width: 100%;
    height: 8.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--c-secondary);
    border-radius: 50%;
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.45em;
    color: var(--c-white);
    margin: -5.8rem auto 0;
    position: relative;
    z-index: 9;
}

.charm-card-title {
    text-align: center;
    margin: 1.2rem 0 0;
    color: var(--c-secondary);
}

.charm-card-text {
    text-align: justify;
    margin: 1.2rem 0 0;
}

.charm-btn01 {
    max-width: 69.35rem;
    margin: 5.16rem auto 0;
}

.charm-btn01 br {
    display: none;
}

.charm-decoration {
    margin: auto;
    position: absolute;
}

.charm-decoration01 {
    max-width: 37.5rem;
    width: 19.53%;
    top: -9.33%;
    right: -5.9%;
}

.charm-decoration02 {
    max-width: 45rem;
    width: 23.43%;
    left: -8.85%;
    bottom: -2.65%;
}

/* ==========================================
福利厚生
========================================== */

.benefits-wrapper {
    padding: 20.2rem 0 20.4rem;
    position: relative;
}

.benefits-inner {
    max-width: 126rem;
    width: 100%;
    padding: 0 3rem;
    margin: auto;
    position: relative;
    z-index: 9;
}

.benefits-frame {
    padding: 1rem;
    border-radius: 1rem;
    background: url(../../../../uploads/top_benefits_bg.jpg) no-repeat center / cover;
}

.benefits-frame-inner {
    border: solid 1px var(--c-secondary);
    border-radius: 1rem;
    padding: 2.7rem 1.5rem 4rem;
}

.benefits-area {
    max-width: 113.8rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 0 -4rem;
}

.benefits-img-block {
    max-width: 56.4rem;
    width: 49.56%;
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 16%));
}

.benefits-text-block {
    max-width: 52.3rem;
    width: 45.95%;
}

.benefits-text {
    margin: 2.7rem 0 0;
}

.benefits-btn {
    margin: 4.5rem 0 0;
}

.benefits-decoration {
    margin: auto;
    position: absolute;
}

.benefits-decoration01 {
    max-width: 55.5rem;
    width: 28.9%;
    top: -4.81%;
    right: -2.39%;
}

/* ==========================================
数字でみるカサブランカ
========================================== */

.numbers-wrapper {
    background: var(--bg-primary-light);
    padding: 19.5rem 0;
    position: relative;
    z-index: 9;
}

.numbers-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.numbers-area {
    margin: 12.1rem 0 0;
}

.numbers-card-block {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6.1rem 4.2rem;
}

.numbers-card {
    background: var(--c-white);
    padding: 0.1rem 1.4rem 4.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
}

.numbers-card-img {
    max-width: 14.2rem;
    width: 100%;
    margin: -3.6rem auto 0;
}

.numbers-card-content {
    margin: 1rem 0 0;
}

.numbers-card-tag {
    max-width: 13.3rem;
    width: 100%;
    background: #FDF4E6;
    color: var(--c-secondary);
    font-weight: bold;
    line-height: 1.45em;
    padding: 0.5rem 0.5rem 0.4rem;
    border-radius: 5rem;
    text-align: center;
    margin: auto;
}

.numbers-card-title {
    text-align: center;
}

.numbers-card-title-small {
    font-size: 2rem;
    line-height: 1.45em;
}

.numbers-card-title strong {
    font-size: 4rem;
    line-height: 1.45em;
    margin: 0 0.6rem;
}

.numbers-card-text {
    font-size: 1.6rem;
    line-height: 1.5em;
    margin: 0.5rem 0 0;
}

/* ==========================================
仕事を知る
========================================== */

.job-wrapper {
    padding: 19.3rem 0 20.15rem;
    position: relative;
}

.job-inner {
    max-width: 127.84rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
}

.job-area01 {
    margin: 6.44rem 0 0;
}

.job-card-block {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5.65rem;
}

.job-card-img {
    border-radius: 0.5rem;
    overflow: hidden;
    aspect-ratio: 15/19;
    margin: auto;
    position: relative;
    box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
}

.job-card-img > img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.job-card {
    padding: 1.86rem 2.42rem 3.64rem;
    position: relative;
}

.job-card-img-box {
    max-width: 33rem;
    width: 100%;
    margin: auto;
    position: relative;
}

.job-card-img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #FDE4DB;
    border-radius: 0.5rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(-7deg);
}

.job-card-text-box {
    max-width: 21.9rem;
    width: 100%;
    height: 21.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFF2ED;
    border: solid 3px #EACABE;
    border-radius: 50%;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
    position: absolute;
    right: -1rem;
    bottom: 0;
}

.job-card-text01 {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--c-secondary);
}

.job-card-text02 {
    margin: 1rem 0 0;
}

.job-card-text02-small {
    font-size: 3rem;
    line-height: 1.13em;
}

.job-text-box {
    font-size: 2rem;
    line-height: 1.8em;
    text-align: center;
    margin: 6.5rem 0 0;
}

.job-btn01 {
    margin: 3.8rem auto 0;
}

.job-area02 {
    max-width: 120rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15.5rem auto 0;
}

.job-img-block01 {
    max-width: 49.9rem;
    width: 41.58%;
    aspect-ratio: 499/530;
}

.job-text-block01 {
    max-width: 60rem;
    width: 50%;
}

.job-text01 {
    margin: 4rem 0 0;
}

.job-btn02 {
    margin: 4rem 0 0;
}

.job-title01 {
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1.44em;
}

.job-area03 {
    max-width: 120rem;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin: 15.5rem auto 0;
}

.job-text02 {
    margin: 2.5rem 0 0;
}

.job-btn03 {
    margin: 4rem 0 0;
}

.job-decoration {
    margin: auto;
    position: absolute;
}

.job-decoration01 {
    max-width: 55.5rem;
    width: 28.9%;
    top: -7.1%;
    right: -12.65%;
}

.job-decoration02 {
    max-width: 37.5rem;
    width: 19.53%;
    top: 38.81%;
    left: -6.04%;
}

.job-decoration03 {
    max-width: 45rem;
    width: 23.43%;
    right: -4.63%;
    bottom: 22.81%;
}

/* ==========================================
よくある質問
========================================== */

.faq-wrapper {
    background: var(--bg-primary-light);
    padding: 12.3rem 0 11.3rem;
    position: relative;
    z-index: 9;
}

.faq-inner {max-width: 123rem;width: 100%;padding: 0 1.5rem;margin: auto;}

.faq-area {
    margin: 7.7rem auto 0;
}

.faq-block {
    background: var(--c-white);
    border-radius: 1rem;
    overflow: hidden;
}

.faq-block:not(:first-child) {
    margin: 3.5rem 0 0;
}

.faq-question {
    display: flex;
    align-items: center;
    background: var(--c-secondary);
    color: var(--c-white);
    padding: 1.5rem 2rem 1.4rem;
}

.faq-answer {
    display: flex;
    align-items: center;
    padding: 1.4rem 2rem 1.5rem;
}

.faq-question:before, .faq-answer:before {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 5.7rem;
    width: 100%;
    height: 5.7rem;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.46em;
    border-radius: 50%;
    padding: 0 0 0.5rem;
    margin: 0 2.6rem 0 0;
}

.faq-question:before {
    content: "Q";
    background: var(--c-white);
    color: var(--c-secondary);
}

.faq-answer:before {
    content: "A";
    background: var(--c-secondary);
    color: var(--c-white);
}

.faq-text-box {
    margin: 3.5rem 0 0;
    text-align: center;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

    /* ==========================================
    カバー
    ========================================== */

    .mv-text {
        font-size: 5.4rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

    /* ==========================================
    カバー
    ========================================== */

    .mv-wrapper {
        padding: 1.2rem 0 8rem;
    }

    .mv-left-block {
        margin: 8rem 0 0;
    }

    .mv-text {
        font-size: 3.6rem;
        padding: 0.5rem 1rem;
    }

    .mv-img-box01 {
        margin: 3rem 0 0;
    }

    .mv-text-box02 {
        margin: -3rem 0 0;
    }

    /* ==========================================
    カサブランカについて
    ========================================== */

    .about-wrapper {
        padding: 6.6rem 0 12rem;
    }

    .about-text-block01 {
        margin: 5rem 0 0;
    }

    .about-text01 {
        margin: 3rem 0 0;
    }

    .about-area02 {
        margin: 12rem 0 0;
    }

    .about-btn01 {
        margin: 3rem 0 0;
    }

    /* ==========================================
    こんなお悩みありませんか？
    ========================================== */

    .worry-inner {
    margin: -3rem auto 0;
    }

    .worry-title-box {
        padding: 3rem 1.5rem;
    }

    .worry-title {
        font-size: 3.4rem;
    }

    .worry-title-box:after {
        max-width: 2rem;
        height: 3rem;
    }

    .worry-area01:after {
        max-width: 15rem;
        height: 4rem;
    }

    .worry-area02 {
        margin: -2rem auto 0;
    }

    .worry-area02:before {
        bottom: -3rem;
    }

    .worry-text-box {
        border-width: 1rem;
        border-radius: 2rem 2rem 0 0;
        padding: 3rem 1.5rem;
    }

    .worry-text01 {
        font-size: 3.2rem;
    }

    .worry-text02 {
        font-size: 4.4rem;
    }

    /* ==========================================
    カサブランカの魅力
    ========================================== */

    .charm-wrapper {
        padding: 8rem 0 0;
    }

    .charm-area {
        margin: 4rem auto 0;
    }

    .charm-card-block {
        gap: 5rem 2.5%;
    }

    .charm-card {
        width: 31.66%;
    }

    .charm-card-number {
        max-width: 6rem;
        height: 6rem;
        font-size: 2.8rem;
        margin: -4rem auto 0;
    }

    /* ==========================================
    福利厚生
    ========================================== */

    .benefits-wrapper {
        padding: 12rem 0;
    }
    
    .benefits-frame-inner {
        padding: 2rem 1.5rem 3rem;
    }
    
    .benefits-text {
        margin: 2rem 0 0;
    }
    
    .benefits-btn {
        margin: 3rem 0 0;
    }

    /* ==========================================
    数字でみるカサブランカ
    ========================================== */

    .numbers-wrapper {
        padding: 12rem 0;
    }

    .numbers-area {
        margin: 8rem 0 0;
    }

    .numbers-card-block {
        gap: 4rem 3rem;
    }

    .numbers-card {
        padding: 0.1rem 1.4rem 3rem;
    }

    .numbers-card-img {
        max-width: 13rem;
        margin: -3rem auto 0;
    }

    /* ==========================================
    仕事を知る
    ========================================== */

    .job-wrapper {
        padding: 12rem 0;
    }
    
    .job-area01 {
        margin: 6rem 0 0;
    }
    
    .job-card-block {
        gap: 4rem;
    }
    
    .job-card {
        padding: 1.5rem 1.5rem 2rem;
    }
    
    .job-card-text-box {
        max-width: 18rem;
        height: 18rem;
    }
    
    .job-card-text01 {
        font-size: 2rem;
    }
    
    .job-card-text02-small {
        font-size: 2.4rem;
    }
    
    .job-text-box {
        font-size: 1.8rem;
        margin: 4rem 0 0;
    }
    
    .job-btn01 {
        margin: 3rem auto 0;
    }
    
    .job-area02 {
        margin: 12rem auto 0;
    }
    
    .job-title01 {
        font-size: 3rem;
    }
    
    .job-text01 {
        margin: 3rem 0 0;
    }
    
    .job-btn02 {
        margin: 3rem 0 0;
    }
    
    .job-area03 {
        margin: 12rem auto 0;
    }
    
    .job-btn03 {
        margin: 3rem 0 0;
    }

    /* ==========================================
    よくある質問
    ========================================== */

    .faq-wrapper {
        padding: 8rem 0;
    }

    .faq-area {
        margin: 4rem auto 0;
    }

    .faq-block:not(:first-child) {
        margin: 2.5rem 0 0;
    }

    .faq-question {
        padding: 1.5rem 1rem 1.4rem;
    }

    .faq-answer {
        padding: 1.4rem 1rem 1.5rem;
    }

    .faq-question:before, .faq-answer:before {
        max-width: 4rem;
        height: 4rem;
        font-size: 2.2rem;
        margin: 0 1.5rem 0 0;
    }

    .faq-text-box {
        margin: 3rem 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

    /* ==========================================
    カバー
    ========================================== */

    .mv-wrapper {
        padding: 5rem 0 6rem;
    }
    
    .mv-area {
        display: block;
    }
    
    .mv-left-block {
        width: 98.61%;
        margin: 0 0 0 auto;
    }
    
    .mv-text:first-child {
        width: 100%;
    }
    
    .mv-img-box01 {
        width: 61.4%;
        margin: 1.6rem 0 0;
    }
    
    .mv-right-block {
        width: 100%;
        margin: 3rem 0 0;
    }
    
    .mv-img-box02 {
        width: 79.17%;
    }
    
    .mv-text-box02 {
        margin: 1.5rem 0 0;
    }
    
    .mv-decoration01 {
        width: 95%;
        top: -10%;
        left: -42%;
    }
    
    .mv-decoration02 {
        width: 36%;
        left: auto;
        top: 9%;
        right: -2%;
    }
    
    .mv-decoration03 {
        width: 37.6%;
        top: 20%;
        left: auto;
        right: 10%;
    }
    
    .mv-decoration04 {
        width: 70.93%;
        right: -2%;
        bottom: 0;
    }
    
    .mv-decoration05 {
        width: 40.66%;
        left: -2%;
        bottom: 0;
    }
    
    .mv-decoration06 {
        width: 21.39%;
        left: 12.21%;
        bottom: 32%;
    }

    /* ==========================================
    カサブランカについて
    ========================================== */

    .about-area01 {
        display: block;
    }
    
    .about-img-block01 {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4/3;
        margin: auto;
    }
    
    .about-text-block01 {
        max-width: 100%;
        width: 100%;
        margin: 3rem 0 0;
    }
    
    .about-area02 {
        display: block;
    }
    
    .about-img-block02 {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4/3;
    }
    
    .about-text-block02 {
        max-width: 100%;
        width: 100%;
        margin: 3rem 0 0;
    }
    
    .about-speech-bubble {
        font-size: 2.2rem;
    }

    .about-btn01 {
        margin: 3rem auto 0;
    }

    .about-decoration01 {
        width: 56.39%;
        top: 6%;
        left: -25.52%;
    }
    
    .about-decoration02 {
        width: 84.22%;
        bottom: 44%;
        right: -42.1%;
    }
    
    .about-decoration03 {
        width: 23.06%;
        left: -7.94%;
        bottom: -0.8%;
    }
    
    /* ==========================================
    こんなお悩みありませんか？
    ========================================== */

    .worry-img-box-pc {
        display: none;
    }
    
    .worry-img-box-sp {
        display: block;
    }
    
    .worry-area02:before {
        bottom: -1.5rem;
    }

    /* ==========================================
    カサブランカの魅力
    ========================================== */

    .charm-card-block {
        flex-direction: column;
    }
    
    .charm-card {
        width: 100%;
    }
    
    .charm-card-img {
        aspect-ratio: 4/3;
    }
    
    .charm-card-text {
        margin: 2rem 0 0;
    }
    
    .charm-btn01 {
        max-width: 40rem;
        margin: 5rem auto 0;
    }

    .charm-btn01 br {
        display: block;
    }

    .charm-decoration01 {
        width: 44.62%;
        top: -12%;
        right: -31.04%;
    }

    .charm-decoration02 {
        width: 61.87%;
        left: -35.46%;
        bottom: 32%;
    }

    /* ==========================================
    福利厚生
    ========================================== */

    .benefits-area {
        display: block;
        margin: 0;
    }
    
    .benefits-img-block {
        max-width: none;
        width: auto;
        margin: 0 -5rem;
    }
    
    .benefits-img-block > img {
        width: 100%;
    }
    
    .benefits-text-block {
        max-width: 100%;
        width: 100%;
        margin: 5rem auto 0;
    }
    
    .benefits-btn {
        margin: 3rem auto 0;
    }
    
    .benefits-frame-inner {
        padding: 3.5rem 3rem;
    }

    .benefits-decoration01 {
        display: none;
    }

    /* ==========================================
    数字でみるカサブランカ
    ========================================== */

    .numbers-card-block {
        grid-template-columns: repeat(1,1fr);
        gap: 9rem;
    }
    
    .numbers-card {
        padding: 0.1rem 2.5rem 2.5rem;
    }

    /* ==========================================
    カサブランカの仕事を知る
    ========================================== */

    .job-card-block {
        grid-template-columns: repeat(1,1fr);
        gap: 5rem;
    }
    
    .job-card {
        width: 80%;
        margin: auto;
    }

    .job-card-img-box {
        max-width: 100%;
    }
    
    .job-btn01 {
        margin: 5rem auto 0;
    }

    .job-area02 {
        display: block;
        margin: 8rem auto 0;
    }
    
    .job-img-block01 {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4/3;
    }
    
    .job-text-block01 {
        max-width: 100%;
        width: 100%;
        margin: 3rem 0 0;
    }
    
    .job-btn02 {
        margin: 5rem auto 0;
    }
    
    .job-area03 {
        display: block;
        margin: 8rem auto 0;
    }
    
    .job-btn03 {
        margin: 5rem auto 0;
    }

    .job-decoration01 {
        width: 34.61%;
        top: -1.5%;
        right: -17.06%;
    }
    
    .job-decoration02 {
        width: 35.68%;
        top: 56%;
        left: -17.86%;
    }
    
    .job-decoration03 {
        width: 34.81%;
        right: -17.33%;
        bottom: 19.5%;
    }

    .job-text-box {
        text-align: left;
    }

    .faq-text-box {
        text-align: left;
    }

    .job-card-text-box {
        max-width: 16rem;
        height: 16rem;
        top: -2rem;
        bottom: auto;
    }
    
    .job-card-text02 {
        font-size: 2.4rem;
        margin: 0.5rem 0 0;
    }
    
    .job-card-text02-small {
        font-size: 2rem;
    }
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

    /* ==========================================
    カバー
    ========================================== */

    .mv-text {
        font-size: 3.07rem;
    }

     /* ==========================================
    カサブランカについて
    ========================================== */

    .about-speech-bubble {
        font-size: 1.97rem;
    }

    /* ==========================================
    こんなお悩みありませんか？
    ========================================== */

    .worry-title {
        font-size: 2.2rem;
    }

    .worry-text01 {
        font-size: 1.7rem;
    }
    
    .worry-text02 {
        font-size: 2rem;
    }

    /* ==========================================
    カサブランカの仕事を知る
    ========================================== */

    .job-card-text-box {
        max-width: 12.4rem;
        height: 12.4rem;
        padding: 0;
    }
    
    .job-card-text01 {
        font-size: 1.4rem;
    }
    
    .job-card-text02 {
        font-size: 2rem;
        margin: 0;
    }
    
    .job-card {
        width: 80%;
    }
    
    .job-card-text02-small {
        font-size: 1.8rem;
    }

    .job-title01 {
        font-size: 2.2rem;
    }

    .numbers-card-text {
        font-size: 1.4rem;
    }
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */