@charset "utf-8";

/* -----------------------------------------------------------
    キャスト・スタッフ共通
----------------------------------------------------------- */

:root {
    --page-title-height: 1000px;
}

@media screen and (max-width: 768px) {
    :root {
        --page-title-height: auto;
    }

    .bread-h1-wrap {
        top: 70vw;
    }
}

/*-------------------------------------
    page-title-area
-------------------------------------*/

.page-title-area::after {
    display: none;
}

.page-title-area .page-title-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    --txt-width: clamp(600px, 45%, 800px);
    --gap: clamp(80px, 8vw, 150px);
}

.page-title-area .page-title-txt {
    width: var(--txt-width);
}

.page-title-area .bg-wrap {
    width: calc(100% - calc(var(--txt-width) + var(--gap)));
}

.page-title-area .bg-wrap img {
    width: 100%;
}

.page-title-inner .en img {
    width: 100%;
}

.page-title-inner .ja {
    padding-left: 80px;
    margin-top: 30px;
}


/*cast*/
.cast .page-title-area::before {
    background: linear-gradient(0deg, #ffffff, #fdfbf9, #fbf7f3, #faf3ed, #f8eee7, #f6eae2, #f4e6dc, #f2e2d6);
    background-size: auto;
    animation: none;
}

@media screen and (max-width: 768px) {
    .page-title-area .page-title-inner {
        --txt-width: 100%;
        --gap: 5vw;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: 7vw 0;
    }

    .page-title-area .bg-wrap {
        width: 60vw;
        margin: 0 0 0 auto;
    }

    .page-title-area .page-title-txt {
        margin-top: -25vw;
        margin-right: auto;
        width: 90vw;
    }

    .page-title-inner .ja {
        padding-left: 10vw;
        margin-top: 5vw;
    }

}

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

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

.catch-area .catch-txt {
    flex-shrink: 0;
    margin-bottom: 70px;
}

.catch-area .catch-txt .catch {
    font-size: clamp(3.0rem, 2.5cqw, 4.2rem);
    margin: 0;
}

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

    .catch-area .inner {
        gap: 0;
        flex-wrap: wrap;
    }

    .catch-area .catch-txt {
        flex-shrink: initial;
        margin-bottom: 5vw;
        width: 100%;
    }

    .catch-area .catch-txt .sub-catch {
        font-size: clamp(1.5rem, 4.3cqw, 1.8rem);
    }

    .catch-area .catch-txt .catch {
        font-size: clamp(2.0rem, 6.2cqw, 3.0rem);
        margin: 0;
    }
}

/*-------------------------------------
    feature-area
-------------------------------------*/
.feature-area {
    --wave-height: 20%;
    position: relative;
    /*beforeの要素(width:100%・aspect-ratio:1600/310)の高さ分margin-topを作る(310/1600=19.375%)*/
    padding: var(--wave-height) 0 clamp(300px, 30vw, 500px);
}

.feature-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1600/320;
    background: url(../../img/cast/section-half-circle-yellow-width-txt.svg) no-repeat center/contain;
}

.feature-area::after {
    content: "";
    display: block;
    position: absolute;
    /*top/heightの%は高さ基準になるため、幅基準で計算されるmargin-topでオフセットする*/
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: var(--wave-height);
    z-index: -1;
    background: linear-gradient(0deg, #ebdcde, #eedfdf, #f1e2e0, #f3e6e1, #f4e9e3, #f6ede5, #f7f0e7, #f8f4ea);
}

.feature-area .feature-bg {
    position: absolute;
    background: url(../../img/bg-zara.png) center/auto, repeat-y;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: plus-lighter;
}

.feature-area .section-title {
    margin-top: -100px;
}

.feature-area .section-title .jp {
    color: var(--gold);
}

.feature-area .feature-block-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-top: 100px;
}

.feature-area .feature-block {
    --gap: clamp(70px, 6vw, 120px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--gap);
    justify-content: center;
}

.feature-area .feature-block .feature-img {
    width: 45%;
    border-radius: 5vw 0 2vw 0;
    overflow: hidden;
}

.feature-area .feature-block .feature-txt {
    width: calc(55% - var(--gap));
    container-type: inline-size;
    position: relative;
    z-index: 1;
    padding: 50px 0;
}

.feature-area .feature-block .feature-num {
    color: #fff;
    font-family: var(--en);
    font-size: clamp(3.0rem, 18cqw, 15.0rem);
    position: absolute;
    top: clamp(-50px, -1.5vw, -30px);
    left: -40px;
    z-index: -1;
}

.feature-area .comparison-table-wrap {
    width: 100%;
    margin-top: 60px;
    padding: clamp(40px, 3vw, 70px);
    border-radius: 40px;
    background: rgba(255, 255, 255, .5);
}

.feature-area .comparison-table {
    border-collapse: collapse;
    width: 100%;
    container-type: inline-size;
}

.feature-area .comparison-table thead th {
    border-bottom: 1px solid var(--gold);
    padding: 20px 10px;
    text-align: center;
    line-height: 1.5;
    font-family: var(--serif);
    color: var(--gold);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.1vw, 2.0rem);
}

.feature-area .comparison-table thead th .img {
    display: block;
    width: 130px;
    height: 160px;
    object-fit: cover;
    border-radius: 100px 100px 5px 5px;
    margin: 0 auto 10px;
}

.feature-area .comparison-table thead th a {
    color: var(--gold);
}

.feature-area .comparison-table thead th a:hover {
    color: var(--link);
    opacity: .8;
}

.feature-area .comparison-table tbody td,
.feature-area .comparison-table tbody th {
    padding: 20px 10px;
    text-align: center;
    border-bottom: 1px solid #ECE0CF;
    font-size: clamp(1.3rem, 1.1vw, 1.6rem);
    line-height: 1.5;
    /* font-family: var(--serif); */
    font-weight: 500;
}

.feature-area .comparison-table tbody th {
    color: #888;
}

.feature-area .comparison-table-sp {
    /*display: none;*/
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.feature-area .shop-comparison {
    width: calc((100% - 120px) / 4);
    border-bottom: 1px solid #ECE0CF;
}

.feature-area .shop-comparison+.shop-comparison {}

.feature-area .shop-comparison:last-child {}

.feature-area .shop-comparison .img {
    display: block;
    width: 200px;
    height: 240px;
    object-fit: cover;
    border-radius: 100px 100px 5px 5px;
    margin: 0 auto 10px;
}

.feature-area .shop-comparison h5 {
    color: var(--gold);
    font-size: clamp(1.6rem, 5cqw, 2rem);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10px;
}

.feature-area .shop-comparison dl>div {
    /*display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    gap: 1em;*/
    font-size: 1.4rem;
    line-height: 1.6;
}

.feature-area .shop-comparison dl {
    margin: 0 0 10px;
}

.feature-area .shop-comparison dt {
    color: #888;
    display: none;
}

.feature-area .shop-comparison dd {
    min-width: 0;
    margin: 5px 0 0;
}

.feature-area .shop-comparison dl>div:first-child dd {
    color: var(--gold);
    text-align: center;
    margin: 8px 0 0;
}

.feature-area .shop-comparison .link {
    padding: 5px;
    line-height: 1.5;
    font-size: 1.4rem;
    height: initial;
    margin: 0 0 0 auto;
    position: relative;
    display: flex;
    justify-content: end;
    width: fit-content;
}

.feature-area .shop-comparison .link::after {
    content: "";
    display: inline-block;
    background: url(../../../control/img/cast/deco-kira-coral.svg) no-repeat center/contain;
    width: 14px;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 0 0 5px;
}



.feature-area .for-cast-block-wrap {
    --gap: clamp(30px, 3vw, 60px);
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    margin-top: 100px;
}

.feature-area .for-cast-block {
    width: calc((100% - var(--gap)) / 2);
    text-align: center;
    position: relative;
}

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

.feature-area .for-cast-block.experienced {
    --main: #E97D67;
    --grad: linear-gradient(90deg, #e97d67, #ea856c, #eb8d71, #eb9577, #ec9d7e, #eda484, #edac8b, #eeb393);
    --bg-grad: linear-gradient(90deg, #f6eee8, #f7f0eb, #f9f3ef, #faf5f2, #fbf8f5, #fcfaf8, #fefdfc, #ffffff);
}

.feature-area .for-cast-block .deco-circle {
    position: absolute;
    height: auto;
    aspect-ratio: 1/1;
    /*ゆっくり回転する*/
    animation: rotate 40s linear infinite;
}

.feature-area .for-cast-block.beginner .deco-circle {
    top: 40%;
    right: 90%;
    background: url(../../img/cast/deco-circle-for-beginner.svg) no-repeat center/contain;
    width: 300px;
}

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


.feature-area .for-cast-block .en {
    font-size: clamp(3.0rem, 2.8cqw, 8.0rem);
    font-family: var(--en);
    line-height: 1.2;
    color: var(--main);
    margin-top: 10px;
}

.feature-area .for-cast-block .jp {
    font-size: clamp(1.4rem, 1.0cqw, 2.4rem);
    background: var(--grad);
    color: #fff;
    display: inline-block;
    padding: 3px 10px;
    line-height: 1.5;
}


.feature-area .for-cast-block .en::first-letter,
.feature-area .for-cast-block .en span:first-child {
    font-family: var(--pinyon);
    font-size: 140%;
    margin-right: 10px;
}

.feature-area .for-cast-block .for-cast-txt {
    --padding: clamp(50px, 3vw, 80px);
    background: var(--bg-grad);
    padding: calc(var(--padding)*2) var(--padding) var(--padding);
    margin-top: calc(var(--padding) * -2);
    border-radius: clamp(20px, 3vw, 60px);
    border: 1px solid #fff;
}

.feature-area .for-cast-block .for-cast-img {
    width: 70%;
    margin: 0 auto;
}

.feature-area .for-cast-block .for-cast-catch {
    font-size: clamp(2.0rem, 2cqw, 3.3rem);
    margin-top: 30px;
    margin-bottom: 0;
}

.feature-area .for-cast-block .btn-more {
    margin: 30px 0 0;
}

.feature-area .for-cast-block .btn-more a {
    background: transparent;
}

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

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

.feature-area .for-cast-block.beginner .btn-more>*::after {
    background: url(../../img/cast/deco-kira02-green.svg) no-repeat center/contain;
}

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

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

    .feature-area .feature-block:nth-child(even) {
        flex-direction: row-reverse;
    }
}

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

    .feature-area .section-title {
        margin-top: 10vw;
    }

    .feature-area .feature-block-wrap {
        gap: 10vw;
        margin-top: 10vw;
    }

    .feature-area .feature-block {
        --gap: 5vw;
        gap: var(--gap);
    }

    .feature-area .feature-block .feature-img {
        width: 100%;
        height: 50vw;
        border-radius: 10vw 0 5vw 0;
    }

    .feature-area .feature-block .feature-txt {
        width: 100%;
        padding: 5vw 0 0;
    }

    .feature-area .feature-block .feature-num {
        font-size: clamp(7.0rem, 25cqw, 12.0rem);
        position: absolute;
        top: -7vw;
        left: -3vw;
    }

    .feature-area .comparison-table-wrap {
        width: 100%;
        margin-top: 0;
        padding: 5vw;
        border-radius: 5vw;
    }

    .feature-area .comparison-table-wrap .h4-title {
        font-size: clamp(2.0rem, 5.2cqw, 2.8rem);
        margin: 0 0 7vw;
    }

    .feature-area .comparison-table {
        display: none;
    }

    .feature-area .comparison-table-sp {
        display: block;
    }

    .feature-area .shop-comparison {
        width: 100%;
    }

    .feature-area .shop-comparison+.shop-comparison {
        margin-top: 8vw;
    }

    .feature-area .shop-comparison:last-child {
        border-bottom: none;
    }

    .feature-area .shop-comparison .img {
        display: block;
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 5vw 0 5vw 0;
        margin: 0 auto 12px;
    }

    .feature-area .shop-comparison h5 {
        color: var(--gold);
        font-size: clamp(1.8rem, 5cqw, 2.4rem);
        line-height: 1.5;
    }

    .feature-area .shop-comparison dl>div {
        /*display: grid;
        grid-template-columns: 7em minmax(0, 1fr);
        gap: 1em;*/
        padding: 0 0;
        font-size: clamp(1.5rem, 4cqw, 1.7rem);
        line-height: 1.6;
    }

    .feature-area .shop-comparison dl {}

    .feature-area .shop-comparison dt {
        color: #888;
    }

    .feature-area .shop-comparison dd {
        min-width: 0;
    }

    .feature-area .shop-comparison dl>div:first-child dd {
        margin: 6px 0 0;
    }

    .feature-area .shop-comparison .link {}

    .feature-area .shop-comparison .link::after {}

    .feature-area .for-cast-block-wrap {
        --gap: 10vw;
        margin-top: 10vw;
        flex-wrap: wrap;
    }

    .feature-area .for-cast-block {
        width: 100%;
    }

    .feature-area .for-cast-block .for-cast-img {
        width: 70%;
        margin: 0 auto;
    }

    .feature-area .for-cast-block .for-cast-txt {
        --padding: clamp(20px, 5vw, 40px);
        background: var(--bg-grad);
        padding: calc(var(--padding)*3) var(--padding) calc(var(--padding)*2);
        margin-top: calc(var(--padding) * -3);
        border-radius: clamp(10px, 5vw, 30px);
    }

    .feature-area .for-cast-block .for-cast-catch {
        font-size: clamp(2.0rem, 6cqw, 2.4rem);
        margin-top: 5vw;
        margin-bottom: 0;
    }

    .feature-area .for-cast-block .btn-more {
        margin: 5vw 0 0;
    }

    .feature-area .for-cast-block.beginner .deco-circle {
        top: 20%;
        left: 70%;
        width: 40vw;
    }

    .feature-area .for-cast-block.experienced .deco-circle {
        top: 15%;
        left: initial;
        right: 75%;
        width: 50vw;
    }

    .feature-area .for-cast-block .en {
        font-size: clamp(2.5rem, 7cqw, 5.0rem);
    }

}



/*-------------------------------------
    other-btn-area
-------------------------------------*/
.other-btn-area {
    padding: 100px 0;
    background: #F8EEEC;
}

.other-btn-area .other-btn-wrap {
    --gap: clamp(20px, 2vw, 40px);
    display: flex;
    gap: var(--gap);
    width: 100%;
}

.other-btn-area .other-btn {
    width: calc((100% - var(--gap) * 2) / 3);
    text-align: center;
    position: relative;
    display: block;
}

.other-btn-area .other-btn-img {
    width: 70%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.other-btn-area .other-btn-txt {
    --padding: clamp(30px, 3vw, 60px);
    --padding2: calc(var(--padding) * 2);
    background-color: #fff;
    position: relative;
    padding: var(--padding2) var(--padding) var(--padding);
    margin-top: calc(var(--padding2)* -1);
    border-radius: 30px;
    container-type: inline-size;
}

.other-btn-area .other-btn-name {
    font-family: var(--serif);
    color: var(--coral02);
    line-height: 1.5;
    font-size: clamp(2.0rem, 9cqw, 3.2rem);
    margin-top: 30px;
}

.other-btn-area .other-btn-txt .cmn-btn-circle {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

@media screen and (min-width: 769px) {
    .other-btn-area .other-btn:hover {
        transform: translateY(-10px);
        opacity: .7;
    }
}

@media screen and (max-width: 768px) {
    .other-btn-area {
        background: #F8EEEC;
        padding: 18vw 0 15vw;
    }

    .other-btn-area .other-btn-wrap {
        --gap: 15vw;
        flex-wrap: wrap;
    }

    .other-btn-area .other-btn {
        width: 100%;
        position: relative;
    }

    .other-btn-area .other-btn-img {
        width: 30vw;
        margin: 0;
        position: absolute;
        bottom: 0;
        left: -3vw;
    }

    .other-btn-area .other-btn-txt {
        --padding: 5vw;
        --padding2: calc(var(--padding) * 2);
        background-color: #fff;
        position: relative;
        padding: var(--padding) var(--padding) var(--padding) var(--padding2);
        margin-top: 0;
        border-radius: 3vw;
    }

    .other-btn-area .other-btn-name {
        font-size: clamp(1.8rem, 6.5cqw, 2.4rem);
        margin-top: 0;
        margin-left: auto;
        text-align: left;
        width: 70%;
    }

    .other-btn-area .other-btn-txt .cmn-btn-circle {
        position: absolute;
        bottom: 3vw;
        right: 3vw;
        width: 10vw;
    }
}