@charset "UTF-8";

/*
@layer base / 基本設定
@layer layout / レイアウト定義
@layer module / モジュール定義（共通のスタイル定義）
@layer state / 状態・JS設定用クラス定義
@layer theme / テーマ定義（OSのテーマ連動）
@layer project / ページ単位スタイル定義
@layer utility / ユーティリティ定義（スポット的に使うスタイル定義）
*/
/* @layer base, layout, module, state, theme, project, utility; */



@layer project {

    /* ---- 基本設定 -------------------------------- */
    .top_section_title {
        margin-block-start: clamp(120px, 30vw, 300px);
        margin-block-end: clamp(20px, 8vw, 80px);
        width: fit-content;
        position: relative;

        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            opacity: 0.1;
            z-index: -1;
            height: clamp(80px, 21.3vw, 160px);
        }

        &::before {
            width: calc(calc(100vw - var(--wide-width)) / 2 + 250px);
            top: clamp(-120px, -16vw, -60px);
            background: linear-gradient(-139deg, var(--color-fastask-darkviolet), var(--color-fastask-lightcyan)) center / cover no-repeat,
                var(--color-fastask-darkviolet);
        }

        &::after {
            width: calc(calc(100vw - var(--wide-width)) / 2 * 0.7);
            top: clamp(-200px, -26.7vw, -100px);
            background: linear-gradient(277deg, var(--color-fastask-darkviolet), var(--color-fastask-lightcyan)) center / cover no-repeat,
                var(--color-fastask-darkviolet);
        }

        &.top_section_title_left {
            margin-inline-start: calc(calc(100vw - var(--wide-width)) / 2);

            &::before {
                left: calc(calc(100vw - var(--wide-width)) / 2 * -1);
            }

            &::after {
                left: calc(calc(100vw - var(--wide-width)) / 2 * -1);
            }
        }

        &.top_section_title_right {
            margin-inline-start: auto;
            margin-inline-end: calc(calc(100vw - var(--wide-width)) / 2);

            &::before {
                right: calc(calc(100vw - var(--wide-width)) / 2 * -1);
            }

            &::after {
                right: calc(calc(100vw - var(--wide-width)) / 2 * -1);
            }
        }
    }

    .top_section_title_eyecatch {
        display: inline-block;
        background: linear-gradient(-139deg, var(--color-fastask-darkviolet), var(--color-fastask-lightcyan)) center / cover no-repeat,
            var(--color-fastask-darkviolet);
        background-clip: text;
        font-family: "Montserrat", sans-serif;
        font-size: clamp(3.5rem, 8vw, 5rem);
        font-weight: 200;
        color: transparent;
        line-height: 1;
        transform: translateX(-3px);
    }

    .top_section_title_body {
        font-size: 1rem;
        font-weight: 200;
        color: var(--color-deepblue);
    }



    /* ---- キービジュアル（.keyvisual） -------------------------------- */
    .keyvisual {
        position: relative;
        height: 1080px;
        padding-block-start: var(--header-safe-margin);

        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: calc(100% - 70px);
            top: 0;
            left: 0;
            z-index: -1;
            background:
                linear-gradient(180deg, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / 1)),
                url(../images/kv_bg_renew_top.webp) center / cover no-repeat,
                var(--color-fastask-darkblue);
            /* mask: linear-gradient(180deg, white 70%, black) luminance; */
        }
    }

    .keyvisual .keyvisual_container {
        container: keyvisual_container / size;
        display: grid;
        width: min(var(--container-width), var(--header-width));
        height: calc(100% - 220px);
        margin-inline: auto;
        grid-template-columns: 1fr minmax(0, 1fr);
        align-content: center;
        column-gap: clamp(12px, 3.6vw, 36px);
        row-gap: max(0px, calc(48px - 1.6vw));
        /* row-gap: clamp(18px, 4.5vw, 45px); */
    }

    .keyvisual h1 {
        align-self: center;
        margin-block: 0;
        font-size: clamp(2rem, 6.4vw, 4rem);
        font-weight: 200;
        color: white;
        letter-spacing: 0.2em;
        white-space: nowrap;
        line-height: 1.5;
        text-align: left;
        transform: translateY(3cqh);
    }

    @container keyvisual_container (max-width: 1343px) {
        .keyvisual h1 {
            transform: translateY(0);
        }
    }

    .keyvisual .keyvisual_cta {
        align-self: flex-end;
        white-space: nowrap;
    }

    .keyvisual .fit_visual {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        align-self: center;
        width: auto;
    }

    .keyvisual .logo_parade {
        position: absolute;
        width: var(--viewport-width);
        bottom: clamp(10.5px, 3.5vw, 35px);
        left: 0;
    }

    @media screen and (max-width:1000px) {
        .keyvisual {
            height: min(1080px, 100dvh);
        }

        .keyvisual .keyvisual_container {
            height: calc(100% - 140px);
            grid-template-columns: 1fr;
            row-gap: clamp(12px, 7.2vw, 36px);
        }

        .keyvisual h1 {
            text-align: center;
        }

        .keyvisual .fit_visual {
            grid-column: unset;
            grid-row: unset;
            width: min(75vw, 600px);
        }
    }



    /* ---- 特長（.benefit） -------------------------------- */
    .benefit .top_catch_copy {
        font-size: clamp(1.8rem, 2.5vw, 2.5rem);
        font-weight: 200;
        text-align: center;
        white-space: nowrap;
    }

    .benefit .fit_visual {
        width: calc(var(--nallow-width) - 25vw);
        margin-block: clamp(30px, 6vw, 60px);
    }

    .benefit .fit_visual:has(img[src$="dummy.webp"]) {
        width: min(var(--container-width), 1050px);
        height: 310px;

        & img {
            object-fit: cover;
        }
    }

    .benefit .top_lead {
        font-size: clamp(1.3rem, 2.5vw, 1.5625rem);
        text-align: center;
        white-space: nowrap;
    }

    @media screen and (max-widht: 500px) {
        .benefit .fit_visual {
            width: var(--nallow-width);
        }
    }



    /* ---- 選ばれる理由（.feature） -------------------------------- */
    .feature .chidori {
        --chidori-otherside-margin-abs: 10vw;
        --chidori-alignside-margin: calc(calc(var(--viewport-width) - var(--wide-width)) / 2);
        /* --chidori-alignside-margin: calc(calc(var(--viewport-width) - min(var(--container-width), var(--container-max-width))) / 2); */
        --chidori-otherside-margin: calc(var(--chidori-otherside-margin-abs) * -1);
        --chidori-inner-margin: clamp(24px, 8vw, 48px);
        width: 100%;
    }

    /* ---- 左揃え項目 ---------------- */
    .feature .chidori-start_align_left :where(.chidori_item:nth-child(2n+1) .chidori_item_inner),
    .feature .chidori-start_align_right :where(.chidori_item:nth-child(2n) .chidori_item_inner) {
        margin-inline-start: clamp(0px, calc(calc(100vw - 750px) * 0.16), 160px);
    }

    /* ---- 右揃え項目 ---------------- */
    .feature .chidori-start_align_left :where(.chidori_item:nth-child(2n) .chidori_item_inner),
    .feature .chidori-start_align_right :where(.chidori_item:nth-child(2n+1) .chidori_item_inner) {
        margin-inline-end: clamp(0px, calc(calc(100vw - 750px) * 0.16), 160px);
    }

    .feature .fit_visual {
        align-self: center;
    }

    .feature .fit_visual:has(img[src$="dummy.webp"]) {
        width: min(44vw, 440px);
        height: min(32vw, 240px);

        & img {
            object-fit: cover;
        }
    }

    .feature .section_item_title .small {
        font-size: clamp(1.3rem, 2.25vw, 1.875rem);
    }

    @media screen and (max-width:750px) {
        .feature .chidori {
            --chidori-otherside-margin-abs: 0px;
            --chidori-otherside-margin: var(--chidori-alignside-margin);
        }

        .feature .fit_visual:has(img[src$="dummy.webp"]) {
            width: min(var(--container-width), 440px);
            height: min(72vw, 400px);
        }
    }



    /* ---- ご利用の流れ（.flow） -------------------------------- */
    :where(.flow) .service_step_container {
        width: 980px;
        margin-inline: auto;
    }

    :where(.flow) .service_step {
        --width-step-gap: clamp(22.5px, 7.5vw, 45px);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: var(--width-step-gap);
        text-align: center;
    }

    :where(.flow) .service_step span {
        text-align: center;
    }

    :where(.flow) .service_step>* {
        position: relative;
    }

    :where(.flow) .service_step .new::before {
        content: "NEW";
        display: block;
        position: absolute;
        top: 0;
        right: 5%;
        padding-inline: 0.5em;
        padding-block: 0.3em;
        background-color: var(--color-fastask-blue);
        border-radius: clamp(2px, 0.75vw, 4px);
        font-size: 0.85em;
        font-family: "Roboto", sans-serif;
        color: white;
        line-height: 1;
    }

    :where(.flow) .service_step .step {
        display: block grid;
        width: 100%;
        height: 100%;
        background-color: white;
        place-content: center;
    }

    :where(.flow) .service_step .step>* {
        padding-block: clamp(12px, 4vw, 24px);
    }

    :where(.flow) .service_step .step img {
        display: block;
        width: 50px;
        margin-inline: auto;
    }

    :where(.flow) .service_step .step_title {
        display: block;
        height: 2lh;
        margin-block-start: clamp(4px, 0.6vw, 8px);
        color: var(--color-salvia-blue);
        line-height: 1.4;
    }

    :where(.flow) .service_step .triangle {
        filter: drop-shadow(0 0 10px rgb(var(--color-fastask-cyan-dec) / 0.5));
        position: absolute;
        width: var(--width-step-gap);
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;

        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            clip-path: polygon(0 100%, 0 0, 100% 50%, 0 100%);
            background-color: white;
            transform-origin: left center;
            transform: translateX(calc(100% - 1px)) scaleX(0.7);
        }
    }

    :where(.flow) .service_arrow {
        display: flex;
        height: 48px;
        width: 100%;

        &::after {
            content: "";
            display: block;
            width: 48px;
            height: 48px;
            background-color: var(--color-salvia-blue);
            clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
        }

        & div {
            inline-size: calc(100% - 48px);
            background: linear-gradient(90deg, rgb(var(--color-salvia-blue-dec) / 0), rgb(var(--color-salvia-blue-dec) / 1) 30%);
            font-weight: 200;
            color: white;
            text-align: center;
            line-height: 48px;
        }
    }

    @media screen and (max-width: 1000px) {
        :where(.flow) .service_step_container {
            display: grid;
            direction: rtl;
            grid-template-columns: 4fr 1fr;
            width: min(var(--container-width), 500px);
            height: 750px;
        }

        :where(.flow) .service_step {
            --height-step-gap: clamp(18px, 6vw, 36px);
            margin-inline: revert;
            grid-template-columns: 1fr;
            row-gap: var(--height-step-gap);
        }

        :where(.flow) .service_step .step>* {
            padding-block: clamp(3px, 1vw, 6px);
            text-align: center;
        }

        :where(.flow) .service_step .triangle {
            width: 70%;
            height: var(--height-step-gap);
            top: revert;
            right: 50%;
            bottom: 0;

            &::after {
                clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
                transform-origin: center top;
                transform: translate(50%, calc(100% - 1px)) scaleY(0.5);
            }
        }

        :where(.flow) .service_arrow {
            display: flex;
            flex-direction: column;
            height: 700px;
            width: 48px;

            &::after {
                clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
            }

            & div {
                writing-mode: vertical-rl;
                background: linear-gradient(180deg, rgb(var(--color-salvia-blue-dec) / 0), rgb(var(--color-salvia-blue-dec) / 1) 30%);
            }
        }
    }



    /* ---- 様々な活用シーン（.scene） -------------------------------- */
    .scene .top_catch_copy {
        font-size: clamp(1.3rem, 2.4vw, 2rem);
        font-weight: 200;
        color: var(--color-fastask-darkviolet);
        text-align: center;
    }

    .scene .scene_list {
        width: var(--nallow-width);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: clamp(18px, 3.45vw, 46px);
        row-gap: clamp(8px, 1.2vw, 16px);
        text-align: center;
        line-height: 1.4;
    }

    .scene .scene_list>* {
        display: grid;
        justify-items: center;
        align-content: flex-end;
    }

    .scene .scene_list img {
        width: 40px;
    }

    .scene .scene_list p {
        margin-block-end: 0;
        height: 2lh;
    }

    @media screen and (max-width:1000px) {
        .scene .scene_list {
            width: min(var(--container-width), 600px);
            grid-template-columns: repeat(3, 1fr);
            row-gap: clamp(18px, 3.45vw, 46px);
        }
    }

    @media screen and (max-width:500px) {
        .scene .scene_list {
            grid-template-columns: repeat(2, 1fr);
        }
    }



    /* ---- 導入事例（.case） -------------------------------- */
    .case .case_slick {
        /*
        container: case_slick / size;
        width: var(--viewport-width);
        height: max(257px, calc(13.75vw + 32px));
        */
    }

    .case *:has(>.case_item) {
        /*
        height: max(257px, calc(13.75vw + 32px));
        */
        padding-block: 16px;
        padding-inline: 48px;
    }

    .case .case_item {
        width: 378px;
        height: 502px;
        /*
        width: max(850px, 70vw);
        height: max(225px, 13.75vw);
        */
        padding: 30px;
        display: grid;
        /*
        grid-template-columns: minmax(200px, 17.18vw) 1fr;
        */
        grid-template-rows: 1fr 60px 44px 1fr;
        column-gap: 40px;
        background-color: white;
        border-radius: clamp(4px, 1.06vw, 8px);
        box-shadow: 0 4px 12px rgb(3 30 61 / 0.08),
            inset 0 -1px 4px rgb(0 0 0 / 0.1);
        color: var(--color-body-text);
    }

    .case .case_item .case_company_logo {
        grid-row: 2 / 3;
        text-align: center;
        /*
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        */
    }

    .case .case_item .case_company_logo img {
        margin-inline: auto;
    }

    .case .case_item .case_company_name {
        /*
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        */
        margin-block: 0;
        font-size: clamp(1.2rem, 1.6vw, 1.3rem);
        /* font-size: clamp(1.2rem, 1.8vw, 1.5rem); */
        font-weight: normal;
        text-align: center;
    }

    .case .case_item .case_company_pic {
        grid-row: 1 / 2;
        /*
        grid-column: 1 / 2;
        grid-row: 1 / 4;
        */
        width: 100%;
        height: 200px;
        /* height: calc(100cqh - 32px - 60px); */
        margin-block: 0;
    }

    .case .case_item .case_company_pic img {
        object-fit: cover;
    }

    .case .case_item .case_copy {
        margin-block: 0;
    }

    /*
    .case .case_kitamura .case_company_logo img {
        transform: translateX(-15%);
    }
        */

    @media screen and (max-width:1000px) {
        .case .case_slick {
            height: 522px;
        }

        .case *:has(>.case_item) {
            height: 522px;
            padding-inline: 24px;
        }

        .case .case_item {
            width: 70vw;
            height: 490px;
            grid-template-columns: 1fr;
            grid-template-rows: 60%;
            row-gap: clamp(6px, 1vw, 12px);
            justify-content: center;
            justify-items: center;
        }

        .case .case_item .case_company_logo {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        .case .case_item .case_company_name {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
            text-align: center;
        }

        .case .case_item .case_company_pic {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            width: 100%;
            height: 100%;
        }

        .case .case_item .case_copy {
            text-align: center;
        }

        .case .case_kitamura .case_company_logo img {
            transform: none;
        }
    }

    @media screen and (max-width:750px) {
        .case .case_item {
            grid-template-rows: 50%;
        }
    }

    @media screen and (max-width:500px) {
        .case .case_item {
            grid-template-rows: 45%;
        }
    }

    /* ---- ロゴパレード2（.brands） -------------------------------- */
    .brands .top_catch_copy {
        margin-block-start: clamp(40px, 8vw, 80px);
        font-size: clamp(1.2rem, 1.8vw, 1.5rem);
        font-weight: 200;
        color: var(--color-deepblue);
        white-space: nowrap;
        text-align: center;
    }



    /* ---- ★★★★（） -------------------------------- */
    /* ---- ★★★★（） -------------------------------- */
    /* ---- ★★★★（） -------------------------------- */
    /* ---- 新機能LPポップアップ（.new_feature_popup） -------------------------------- */
    .new_feature_popup {
        position: fixed;
        bottom: 0;
        right: 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0, 0.5, 0, 0.8) 0s;
        z-index: 4999;
        line-height: 1;
    }

    .new_feature_popup_container {
        position: relative;
        width: 100%;
        height: 100%;

        & .new_feature_popup_switch {
            position: absolute;
            width: 30px;
            height: 30px;
            bottom: 100%;
            right: 0;
            background: url(/images/menu_close_white.svg) center / 80% 80% no-repeat,
                #0b396c;
        }
    }

    .new_feature_popup.is_active {
        transform: translateY(0)
    }
}