@charset "utf-8";

/* -----------------------------------------------------------
    キャスト求人TOP
----------------------------------------------------------- */
:root {
    --mv-height: clamp(800px, 100vh, 1000px);
    --easing: cubic-bezier(0.2, 1, 0.2, 1);
    --transition: 0.8s var(--easing);
}

.h1-title {
    width: var(--inner-wide);
    position: absolute;
    top: calc(var(--mv-height) - 20px);
    font-size: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    z-index: 1;
    color: #ccc;
}

#wrapper {
    padding-top: var(--mv-height);
}

@media screen and (max-width: 768px) {
    :root {
        --mv-height: 100svh;
    }

    /* SPでは#mainがposition:relativeになりh1-titleの基準がmain上端に変わるため再調整 */
    .h1-title {
        top: -20px;
    }
}

/*-------------------------------------
    mv-area
-------------------------------------*/
.mv-area {
    height: var(--mv-height);
    position: fixed;
    --mv-catch-font-size: clamp(4.0rem, 3.0vw, 5.0rem);
    --mv-catch-en-font-size: clamp(11.0rem, 7.0vw, 15.0rem);
    --mv-sub-catch-font-size: clamp(2.0rem, 1.3vw, 3.0rem);
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

/* mv-heightの2倍スクロールし、mv-areaが見えなくなったらabsoluteに切替 */
.mv-area.is-absolute {
    position: absolute;
}

.mv-area .mv-txt-wrap {
    left: 5%;
    bottom: 5%;
    position: absolute;
    z-index: 1;
}

.mv-area .mv-catch {
    font-size: var(--mv-catch-font-size);
    color: #fff;
    font-family: var(--serif);
    line-height: 1.5;
    padding-top: 25px;
    margin-top: 15px;
    position: relative;
    text-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

.mv-area .mv-catch::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background-color: #fff;
}

.mv-area .mv-catch-en {
    font-size: var(--mv-catch-en-font-size);
    color: #fff;
    font-family: var(--en);
    line-height: .9;
    letter-spacing: .1em;
    font-weight: 400;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

.mv-area .mv-catch-en::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 22.5%;
    right: 15.7%;
    background: url(../../img/cast/deco-kira-white.svg) no-repeat center/contain;
    width: 40px;
    height: 40px;
}

.mv-area .mv-catch-en span:first-child {
    font-family: var(--pinyon);
    font-size: 140%;
    margin-right: 20px;
    vertical-align: -0.7rem;
}

.mv-area .mv-catch-en span:last-child {
    font-family: var(--pinyon);
    font-size: 120%;
    vertical-align: -0.7rem;
}

.mv-area .mv-sub-catch {
    font-size: var(--mv-sub-catch-font-size);
    font-family: var(--serif);
    line-height: 1.5;
    background-color: #fff;
    padding: 5px 15px;
    position: absolute;
    left: 5%;
    bottom: calc(var(--mv-catch-font-size) + (var(--mv-catch-en-font-size) * 2) + 40px + 27%);
    /*40px = mv-catchのpadding-top + margin-topの高さ*/
}

.mv-area .mv-sub-catch .hash-tag {
    content: "#";
    /* display: inline-block; */
    color: var(--coral02);
    padding-right: 5px;
}

@media screen and (max-width: 768px) {
    .mv-area {
        --mv-catch-font-size: clamp(2.0rem, 6.8cqw, 3.0rem);
        --mv-catch-en-font-size: clamp(3.0rem, 13cqw, 10.0rem);
        --mv-sub-catch-font-size: clamp(1.4rem, 5.0cqw, 2.0rem);
    }

    .mv-area .mv-txt-wrap {
        left: 5vw;
        bottom: 5vw;
    }

    .mv-area .mv-catch::before {
        width: 60px;
    }

    .mv-area .mv-catch {
        padding-top: 5vw;
        margin-top: 3vw;
    }

    .mv-area .mv-catch-en span:first-child {
        font-size: 140%;
        margin-right: 8px;
        vertical-align: -0.2rem;
    }

    .mv-area .mv-catch-en span:last-child {
        vertical-align: -0.2rem;
    }

    .mv-area .mv-catch-en::before {
        bottom: 15%;
        right: 13.5%;
        width: 30px;
        height: 30px;
    }

    .mv-area .slide-media img {
        height: 100%;
        object-fit: cover;
    }

    .mv-area .mv-sub-catch {
        padding: 0;
        left: initial;
        right: 0;
        bottom: calc(var(--mv-catch-font-size) + (var(--mv-catch-en-font-size) * 2) + 40px + 30vw);
        text-align: left;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .mv-area .mv-sub-catch .sp-bg {
        background-color: #fff;
        padding: 0 5px;
        display: inline-block;
    }

    .mv-area .mv-sub-catch::before {
        background-color: #fff;
    }
}


/*------------------------------------------------------------------------------
mv slider animation
------------------------------------------------------------------------------*/

/* slider */
.splide {
    z-index: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.splide__pagination {
    font-size: 0;
}

.splide__pagination__page:focus-visible {
    outline: 3px solid var(--coral02);
    outline-offset: 3px;
    z-index: 1;
    transition: none;
}

.splide__slide:focus-visible {
    outline: 3px solid var(--coral02);
    outline-offset: 3px;
    z-index: 1;
    transition: none;
}

.splide-wrapper {
    position: relative;
}

.splide__arrow>svg {
    display: none;
}

.mv-area .splide__pagination {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    height: max-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mv-area .splide__pagination__page {
    display: block;
    width: 1.6rem;
    height: 2px;
    cursor: pointer;
    transition: var(--transition);
    background-color: #fff;
    border-radius: 0;
    margin: 0;
}

.mv-area .splide__pagination>li:not(:first-child) {
    margin-top: 1.6rem;
}

.mv-area .splide__pagination__page.is-active {
    width: 4rem;
    background-color: var(--coral02);
}

.mv-area .splide__track--fade .splide__slide {
    pointer-events: none;
}

.mv-area .splide__track--fade .splide__slide.is-active {
    pointer-events: auto;
}

.mv-area .slide {
    display: grid;
    place-content: center;
    height: var(--mv-height);
    padding: 0 8rem;
    text-align: center;
}

.mv-area .slide-media {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mv-area .slide-media img {
    transition: 7s 1s linear;
    transform: translateX(-1.5%) scale(1.1);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.mv-area .slide-title,
.mv-area .slide-text,
.mv-area .slide-link {
    animation: 2s var(--easing) both;
    opacity: 0;
}


.mv-area .splide__slide[class*=-active] .slide-media img {
    transition-delay: 0s;
    transform: translateX(1.5%) scale(1.05);
}

.mv-area .splide__slide.anm-started .slide-title,
.mv-area .splide__slide.anm-started .slide-text,
.mv-area .splide__slide.anm-started .slide-link {
    animation-name: mv-area-fadeIn;
}

.mv-area .splide__slide.anm-finished .slide-title,
.mv-area .splide__slide.anm-finished .slide-text,
.mv-area .splide__slide.anm-finished .slide-link {
    animation-name: mv-area-fadeOut;
}

@keyframes mv-area-fadeIn {
    0% {
        transform: translateY(6rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes mv-area-fadeOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-6rem);
        opacity: 0;
    }
}

/*-------------------------------------
    catch-area
-------------------------------------*/
.catch-area {
    /* margin-top: var(--mv-height); */
    padding: calc(var(--mv-height) * 0.7) 0 150px;
    position: relative;
    z-index: 2;
    /*下から上に薄くなるグラデーション*/
    background: linear-gradient(to top, rgba(219, 185, 175, 1) 0%, rgba(219, 185, 175, 1) 40%, rgba(219, 185, 175, 0) 100%);
}

.catch-area .inner {
    width: clamp(1200px, 80%, 1400px);
}

.catch-area::before {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: initial;
    aspect-ratio: 160/9;
    background: url(../../img/cast/section-half-circle-coral.svg) no-repeat center/cover;
}

.catch-area .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(50px, 5vw, 100px);
}

.catch-area .catch-wrap {
    flex-shrink: 0;
}

.catch-area .catch-wrap .sub-catch {}

.catch-area .catch-wrap .catch {
    margin-bottom: 0;
}

.catch-area .detail-wrap {
    margin-top: 150px;
}

@media screen and (max-width: 768px) {
    .catch-area {
        /* margin-top: var(--mv-height); */
        padding: calc(var(--mv-height) * .5) 0 10vw;
        background: linear-gradient(to top, rgba(219, 185, 175, 1) 0%, rgba(219, 185, 175, 1) 55%, rgba(219, 185, 175, 0) 100%);
    }

    .catch-area .inner {
        flex-direction: column;
        gap: 5vw;
        width: 100%;
    }

    .catch-area::before {
        top: 100%;
    }

    .catch-area .detail-wrap {
        margin: 0 0 0 auto;
        width: 80%;
    }
}

/*-------------------------------------
    reason-area
-------------------------------------*/
.reason-area {
    padding: 200px 0 100px;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.reason-area .reason-top-block {
    --gap: clamp(70px, 7vw, 130px);
    display: flex;
    gap: var(--gap);
    align-items: flex-end;
}

.reason-area .reason-top-img {
    width: 45%;
}

.reason-area .reason-top-txt {
    width: calc(55% - var(--gap));
    container-type: inline-size;
}

.reason-area .reason-top-txt .section-title .jp {
    color: var(--coral02);
}

.reason-area .reason-top-txt .sub-catch {
    color: var(--cmnblack);
    letter-spacing: 0;
}

.reason-area .reason-bottom-block {
    margin-top: 150px;
}

.reason-area .reason-img-list {
    --gap: clamp(30px, 3vw, 60px);
    gap: var(--gap);
    display: flex;
}

.reason-area .reason-img-item {
    width: calc((100% - var(--gap) * 2) / 3);
}

.reason-area .reason-img {
    aspect-ratio: 44/60;
    overflow: hidden;
}

.reason-area .reason-img-item:first-child .reason-img {
    border-radius: 60px 60px 60px 0;
}

.reason-area .reason-img-item:nth-child(2) .reason-img {
    border-radius: 60px 0 60px 60px;
}

.reason-area .reason-img-item:nth-child(3) .reason-img {
    border-radius: 60px 60px 0 60px;
}

.reason-area .reason-img-item:nth-child(2) {
    margin-top: 120px;
}

.reason-area .reason-txt {
    text-align: center;
    margin-top: 20px;
    container-type: inline-size;
}

.reason-area .reason-num {
    font-family: var(--en);
    line-height: 1;
    font-size: clamp(2.0rem, 6.5cqw, 4.0rem);
}

.reason-area .reason-num em {
    font-size: 180%;
    margin-left: 5px;
}

.reason-area .reason-list-catch {
    font-size: clamp(2.6rem, 6cqw, 4.2rem);
    line-height: 1.5;
    margin-top: 10px;
}

.reason-area .btn-more {
    text-align: center;
}

@media screen and (max-width: 768px) {
    .reason-area {
        padding: 20vw 0 10vw;
    }

    .reason-area .reason-top-block {
        --gap: 5vw;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .reason-area .reason-top-img {
        width: 100%;
        margin-left: -5vw;
    }

    .reason-area .reason-top-txt {
        width: 100%;
        padding: 0 5vw;
    }

    .reason-area .reason-bottom-block {
        margin-top: 10vw;
    }

    .reason-area .reason-img-list {
        --gap: 12vw;
        flex-wrap: wrap;
    }

    .reason-area .reason-img-item {
        width: 100%;
        position: relative;
    }

    .reason-area .reason-img {
        aspect-ratio: 30/18;
        width: 80%;
    }

    .reason-area .reason-img-item:first-child .reason-img,
    .reason-area .reason-img-item:nth-child(3) .reason-img {
        border-radius: 0 100px 20px 0;
    }


    .reason-area .reason-txt {
        text-align: left;
        margin-top: 20px;
        container-type: inline-size;
        padding: 0 5vw;
        width: 80%;
    }

    .reason-area .reason-num {
        font-size: clamp(2.0rem, 6.5cqw, 4.0rem);
        position: absolute;
        top: 0;
        right: 5vw;
        writing-mode: vertical-rl;
    }

    .reason-area .reason-num::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 110%;
        width: 1px;
        height: 26vw;
        background-color: var(--cmnblack);
        left: 50%;
    }

    .reason-area .reason-num em {
        margin: 5px 0 0 0;
    }

    .reason-area .reason-list-catch {
        font-size: clamp(2.0rem, 8.5cqw, 3.0rem);
        margin-top: 0;
    }

    .reason-area .reason-img-item:nth-child(2) {
        margin-top: 0;
    }

    .reason-area .reason-img-item:nth-child(even) .reason-img {
        margin-left: auto;
        border-radius: 100px 0 0 20px;
    }

    .reason-area .reason-img-item:nth-child(even) .reason-txt {
        margin-left: auto;
    }

    .reason-area .reason-img-item:nth-child(even) .reason-num {
        right: initial;
        left: 5vw;
    }

    .reason-area .btn-more {
        text-align: left;
    }


}

/*-------------------------------------
    middle-area
-------------------------------------*/
.middle-area {
    --wave-height: 13.125vw;
    padding: var(--wave-height) 0 clamp(300px, 30vw, 500px);
    position: relative;
}

.middle-area::before {
    content: "";
    display: block;
    position: absolute;
    top: var(--wave-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--wave-height));
    background: linear-gradient(0deg, #f0e8e6, #f0e8e6, #f0e9e6, #f0e9e6, #f0eae6, #f0eae6, #f0ebe6, #f0ebe6);
}

.middle-area::after {
    content: "";
    display: block;
    width: 100%;
    height: initial;
    background: url(../../img/cast/section-wave-beige.svg) no-repeat center/contain;
    aspect-ratio: 1600/210;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.middle-area .inner {
    width: 100%;
}

/*message-block*/
.middle-area .message-block {
    text-align: center;
}

.middle-area .message-block .en {
    color: #D9C2A2;
    font-size: clamp(6.0rem, 6cqw, 10.0rem);
    line-height: 0.8;
}

.middle-area .message-block .jp {
    color: #917A4B;
    margin: 0;
}

/*for-cast-block*/
.middle-area .message-block+.for-cast-block {
    margin-top: 100px;
}

.middle-area .for-cast-block {
    width: 100%;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.middle-area .for-cast-block::before {
    content: "";
    display: block;
    position: absolute;
    top: 7%;
    left: 0;
    width: 80%;
    height: 100%;
    background: var(--bg);
    z-index: -1;
    border-radius: clamp(100px, 7vw, 200px) 0 0 0;
}

.middle-area .for-cast-block .for-cast-txt {
    width: 60%;
    padding: 0 clamp(50px, 5vw, 100px);
    margin-top: 180px;
}

.middle-area .for-cast-block .for-cast-img {
    width: 40%;
}

.middle-area #for-beginner {
    --main: #74A89E;
    --main-border: rgba(116, 168, 158, 0.6);
    --grad: linear-gradient(90deg, #74a89e, #79ada1, #7eb1a5, #84b6a8, #89bbab, #8fc0ae, #94c4b2, #9ac9b5);
    --bg: linear-gradient(90deg, #ffffff, #fcfdfb, #fafcf7, #f7faf3, #f5f8ef, #f2f6eb, #f0f5e7, #edf3e3);
}

.middle-area #for-experienced {
    --main: #E9A067;
    --main-border: rgba(233, 160, 103, 0.6);
    --grad: linear-gradient(90deg, #e28b75, #e49179, #e6977d, #e79c81, #e9a285, #eba889, #ecad8e, #eeb393);
    --bg: linear-gradient(90deg, #ffffff, #fefdfc, #fcfaf8, #fbf8f5, #faf5f2, #f9f3ef, #f7f0eb, #f6eee8);
}

.middle-area .for-cast-block .section-title {
    margin: 0 0 15px;
}

.middle-area .for-cast-block .section-title .en {
    color: var(--main);
    /* font-size: clamp(5.0rem, 7cqw, 12.0rem); */
    font-size: clamp(3rem, 7cqw, 4.4rem);
    line-height: 1;
    letter-spacing: .1em;
    position: relative;
    margin: 0 0 30px;
}

/* .middle-area #for-experienced .section-title .en {
    font-size: clamp(7.0rem, 5.8cqw, 10.0rem);
} */

.middle-area .for-cast-block .section-title .en::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 26%;
    left: 14.5%;
    background: url(../../img/cast/deco-kira-green.svg) no-repeat center/contain;
    width: 24px;
    height: 24px;
}

.middle-area #for-experienced .section-title .en::before {
    background: url(../../img/cast/deco-kira-coral.svg) no-repeat center/contain;
    left: 11.5%;
}


.middle-area .for-cast-block .section-title .jp {
    color: var(--main);
    font-size: clamp(5.0rem, 2.8vw, 6.6rem);
}

.middle-area .for-cast-block .sub-catch {
    color: #fff;
    background: var(--grad);
    display: inline-block;
    padding: 0 7px;
    font-size: clamp(2.6rem, 1.8cqw, 3.2rem);
    margin: 0;
}

.middle-area .for-cast-block .for-cast-reason-list {
    width: 100%;
    margin-top: 30px;
}

.middle-area .for-cast-block .for-cast-reason-item {
    display: flex;
    gap: 15px;
    padding: 30px 0;
    border-bottom: 1px solid var(--main-border);
    align-items: center;
}

.middle-area .for-cast-block .for-cast-reason-num {
    color: var(--main);
    font-family: var(--en);
    line-height: .6;
    text-align: center;
    flex-shrink: 0;
    width: 70px;
}

.middle-area .for-cast-block .for-cast-reason-num em {
    font-size: 400%;
}

.middle-area .for-cast-block .for-icon {
    width: clamp(50px, 2vw, 80px);
    height: initial;
}

.middle-area .for-cast-block .for-icon img {
    width: 100%;
    object-fit: contain;
}

.middle-area .for-cast-block .for-cast-reason-catch {
    font-size: clamp(1.8rem, 1.4cqw, 3.0rem);
    font-family: var(--serif);
    line-height: 1.5;
}

.middle-area .for-cast-block .for-cast-img {
    border-radius: clamp(150px, 13vw, 300px) 0 0 0;
    overflow: hidden;
}

.middle-area .for-cast-block .btn-more {
    margin-top: 50px;
    /* text-align: center; */
}

.middle-area .btn-more a {
    background-color: var(--main);
    color: #fff;
    border-color: #fff;
}

.middle-area #for-beginner .btn-more a::before {
    background: #EDF3E3;
}

.middle-area #for-experienced .btn-more a::before {
    background: #F6EEE8;
}

.middle-area .btn-more>*::after {
    background: url(../../img/cast/deco-kira02-white.svg) no-repeat center/contain;
}


.middle-area #for-beginner .deco-circle {
    top: 70%;
    right: -10%;
    background: url(../../img/cast/deco-circle-for-beginner.svg) no-repeat center/contain;
    width: 400px;
}

.middle-area #for-experienced .deco-circle {
    top: 75%;
    left: -10%;
    background: url(../../img/cast/deco-circle-for-experienced.svg) no-repeat center/contain;
    width: 400px;
}

.middle-area .for-cast-block .deco-circle {
    position: absolute;
    height: auto;
    aspect-ratio: 1/1;
    animation: rotate 40s linear infinite;
}

@media screen and (min-width: 769px) {

    /*beginner*/
    .middle-area #for-beginner .btn-more a:hover {
        color: var(--main);
        border-color: var(--main);
    }

    .middle-area #for-beginner .btn-more a:hover::after {
        background: url(../../img/cast/deco-kira02-green.svg) no-repeat center/contain;
    }


    /*experienced*/
    .middle-area #for-experienced {
        flex-direction: row-reverse;
        margin-top: 200px;
    }

    .middle-area #for-experienced .btn-more a:hover::after {
        background: url(../../img/cast/deco-kira02-coral.svg) no-repeat center/contain;
    }

    .middle-area #for-experienced::before {
        left: initial;
        right: 0;
        border-radius: 0 clamp(100px, 7vw, 200px) 0 0;
    }

    .middle-area #for-experienced .for-cast-img {
        border-radius: 0 clamp(150px, 13vw, 300px) 0 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 768px) {
    .middle-area {
        padding: var(--wave-height) 0 45vw;
    }

    .middle-area .message-block {
        padding: 10vw 5vw 0;
    }

    .middle-area .message-block .en {
        font-size: clamp(4.0rem, 11cqw, 7.0rem);
    }

    .middle-area .message-block .catch {
        font-size: clamp(2.1rem, 5.8cqw, 3.0rem);
    }

    .middle-area .message-block .btn-more {
        margin-top: 5vw;
    }

    .middle-area .for-cast-block {
        margin-top: 15vw;
        flex-direction: column;
        align-items: flex-end;
    }

    .middle-area .for-cast-block .for-cast-img {
        border-radius: 40vw 0 0 0;
        order: 1;
        width: calc(100% - 5vw);
    }

    .middle-area .for-cast-block .for-cast-txt {
        width: 100%;
        padding: 0 5vw;
        order: 2;
        z-index: 1;
        position: relative;
        margin: 0;
    }

    .middle-area .for-cast-block::before {
        top: 7%;
        width: 100%;
        height: 98%;
        border-radius: 0;
    }

    .middle-area .for-cast-block .section-title {
        margin: 0 0 5px;
    }

    .middle-area .for-cast-block .section-title .jp {
        font-size: clamp(1.7rem, 6.5cqw, 2.6rem);
    }

    .middle-area .for-cast-block .section-title .en {
        /* font-size: clamp(5.0rem, 14cqw, 9.0rem); */
        font-size: clamp(3.0rem, 9.0cqw, 10.0rem);
        margin-top: -40px;
        margin-bottom: 3vw;
    }

    .middle-area .for-cast-block .section-title .en::before {
        top: 25%;
        left: 13%;
        width: 20px;
        height: 20px;
    }

    .middle-area .for-cast-block .sub-catch {
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 5px;
        font-size: clamp(1.7rem, 5cqw, 2.6rem);
    }

    .middle-area .for-cast-block .sub-catch .sp-bg {
        background: var(--grad);
        padding: 0 5px;
    }

    .middle-area .for-cast-block .for-cast-reason-list {
        margin-top: 3vw;
    }

    .middle-area .for-cast-block .for-cast-reason-item {
        gap: 3vw;
        padding: 5vw 0;
        align-items: center;
        container-type: inline-size;
    }

    .middle-area .for-cast-block .for-cast-reason-num {
        font-size: 1.5rem;
        flex-shrink: 0;
        width: 13vw;
    }

    .middle-area .for-cast-block .for-cast-reason-num em {
        font-size: 300%;
    }

    .middle-area .for-cast-block .for-icon {
        width: 10vw;
        height: initial;
        flex-shrink: 0;
    }

    .middle-area .for-cast-block .for-cast-reason-catch {
        font-size: clamp(1.5rem, 5cqw, 2.0rem);
        font-family: var(--serif);
        line-height: 1.5;
    }

    .middle-area .for-cast-block .btn-more {
        margin-top: 8vw;
    }

    .middle-area #for-beginner .deco-circle {
        top: initial;
        bottom: 90%;
        right: -20%;
        width: 40vw;
        z-index: 1;
    }

    .middle-area #for-experienced {
        margin-top: 37vw;
    }

    .middle-area #for-experienced .for-cast-img {
        border-radius: 0 40vw 0 0;
        margin-right: auto;
    }

    .middle-area #for-experienced .section-title .en {
        /* font-size: clamp(4.0rem, 10.6cqw, 7.0rem);
        margin-top: -20px; */
        font-size: clamp(2.0rem, 7.5cqw, 10.0rem);
    }

    .middle-area #for-experienced .section-title .en::before {
        left: 10%;
        width: 20px;
        height: 20px;
    }

    .middle-area #for-experienced .deco-circle {
        top: initial;
        bottom: 88%;
        left: -20%;
        width: 45vw;
        z-index: 1;
    }


}


/*-------------------------------------
    ninews-area
-------------------------------------*/
.ninews-area {
    --wave-height: 16.875vw;
    padding: var(--wave-height) 0 16vw !important;
    position: relative;
}

.ninews-area::before {
    content: "";
    display: block;
    position: absolute;
    top: var(--wave-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--wave-height));
    background-color: #EFE3DD;
}

.ninews-area::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: url(../../img/cast/section-wave02-coral.svg) no-repeat center/contain;
    aspect-ratio: 160/27;
}

.ninews-area .section-title {
    margin: 0 0 20px;
}

.ninews-area .section-title .en {
    line-height: .8;
}

@media screen and (max-width: 768px) {
    .ninews-area {
        padding: var(--wave-height) 0 25vw !important;
    }

    .ninews-area .section-title {
        margin: 10vw 0 5vw 0;
        text-align: left !important;
    }
}

/*-------------------------------------
    environment-area
-------------------------------------*/
.environment-area {
    padding: 100px 0;
}

.environment-area .inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.environment-area .environment-txt {
    width: 55%;
    padding: 0 5%;
    container-type: inline-size;
}

.environment-area .section-title {
    margin-bottom: 20px;
}

.environment-area .section-title .en {
    color: #F5BE80;
}

.environment-area .section-title .jp {
    color: #9C664F;
}

.environment-area .environment-img {
    width: 45%;
    border-radius: clamp(100px, 10vw, 200px) 0 0 0;
    overflow: hidden;
}

.environment-area .btn-more {
    margin-top: 30px;
}

.environment-area .environment-sub-catch {
    font-size: clamp(1.8rem, 2.5cqw, 2.4rem);
    margin: 40px 0 5px;
}

.environment-area .environment-catch {
    font-size: clamp(3.0rem, 4.0cqw, 4.2rem);
    line-height: 1.5;
}

.environment-area .environment-list {
    background: linear-gradient(90deg, #fff5f3, #fef4f1, #fdf2ee, #fcf1eb, #fbf0e9, #faefe6, #f8eee4, #f6ede1);
    padding: 30px clamp(25px, 2.5vw, 50px);
    border-radius: 40px 0 40px 0;
}

.environment-area .environment-item {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    align-items: center;
}

.environment-area .environment-item:not(:last-child) {
    border-bottom: 1px solid #fff;
}

.environment-area .environment-list-num {
    font-family: var(--en);
    line-height: .6;
    color: #DDBDAE;
    font-size: clamp(1.2rem, 2.0cqw, 4.0rem);
    text-align: center;
    display: inline-block;
    padding-top: 10px;
}

.environment-area .environment-list-num em {
    font-size: 280%;
}

.environment-area .environment-list-catch {
    font-size: clamp(1.8rem, 2.6cqw, 3.6rem);
    font-family: var(--serif);
}

@media screen and (max-width: 768px) {
    .environment-area {
        padding: 0 0 10vw;
    }

    .environment-area .inner {
        flex-direction: column-reverse;
        gap: 8vw;
    }

    .environment-area .environment-txt {
        width: 100%;
    }

    .environment-area .environment-img {
        width: 90%;
        height: 60vw;
        border-radius: 20vw 0 0 0;
        margin: 0 0 0 auto;
    }

    .environment-area .environment-catch {
        font-size: clamp(2.0rem, 6.8cqw, 3.2rem);
    }

    .environment-area .environment-sub-catch {
        margin: 5vw 0 5px;
    }

    .environment-area .environment-list {
        padding: 5vw;
        border-radius: 7vw 0 7vw 0;
    }

    .environment-area .environment-list-num {
        font-size: clamp(1.4rem, 4cqw, 4.0rem);
        padding-top: 5px;
        flex-shrink: 0;
    }

    .environment-area .environment-item {
        gap: 3vw;
    }

    .environment-area .environment-list-catch {
        font-size: clamp(1.8rem, 5.2cqw, 2.8rem);
        line-height: 1.5;
    }
}