@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 base {

    /* ---- 基本定義 -------------------------------- */
    :root {
        /* ---- 変数定義 ---------------- */
        /* Fastaskカラー */
        /* --color-*-decは rgb(var(--color-*-dec) / 0.5) のように適用 */
        --color-fastask-darkblue: #0b396c;
        --color-fastask-darkblue-dec: 11 57 108;
        --color-fastask-royalblue: #2f4ba8;
        --color-fastask-royalblue-dec: 47 75 168;
        --color-fastask-darkviolet: #002b5f;
        --color-fastask-darkviolet-dec: 0 43 95;
        --color-fastask-orange: #f39e2f;
        --color-fastask-orange-dec: 243 158 47;
        --color-fastask-lightcyan: #7ed2ff;
        --color-fastask-lightcyan-dec: 126 210 255;
        --color-fastask-cobaltblue: #3666b5;
        --color-fastask-cobaltblue-dec: 54 102 181;
        --color-fastask-blue: #4285f4;
        --color-fastask-blue-dec: 66 133 244;
        /* Fastask UIカラー */
        --color-fastask-ui-blue: #5983ee;
        --color-fastask-ui-blue-dec: 89 131 238;
        --color-fastask-navyblack: #092038;
        --color-fastask-navyblack-dec: 9 32 56;
        --color-fastask-cyan: #4594fe;
        --color-fastask-cyan-dec: 69 148 254;
        --color-fastask-violet: #103372;
        --color-fastask-violet-dec: 16 51 114;
        --color-fastask-forestgreen: #106a72;
        --color-fastask-forestgreen-dec: 16 106 114;
        /* 基本カラー */
        --color-body-text: black;
        --color-lightgray: #dddddd;
        --color-lightgray-dec: 221 221 221;
        --color-lightskyblue: #bfe8ff;
        --color-lightskyblue-dec: 191 232 255;
        --color-grayishblue: #8095af;
        --color-grayishblue-dec: 128 149 175;
        --color-grayishwhite: #f7f8f9;
        --color-grayishwhite-dec: 247 248 249;
        --color-skyblue: #66b9dd;
        --color-skyblue-dec: 102 185 221;
        --color-marineblue: #3F7EAF;
        --color-marineblue-dec: 63 126 175;
        --color-vivid-cobaltblue: #3D69C8;
        --color-vivid-cobaltblue-dec: 61 105 200;
        --color-salvia-blue: #5070B4;
        --color-salvia-blue-dec: 80 112 180;
        --color-deepblue: #0e3c70;
        --color-deepblue-dec: 14 60 112;
        --color-jayblue: #245B8C;
        --color-jayblue-dec: 36 91 140;
        /* サイズ［JSで動的に定義］ */
        --scrollbar-width: 0;
        /* サイズ */
        --viewport-width: calc(100vw - var(--scrollbar-width));
        --header-height: clamp(48px, 7.2vw, 72px);
        --container-width: 86vw;
        --container-max-width: 1200px;
        --container-wide-max-width: 1360px;
        --wide-width: min(calc(var(--container-width) - var(--scrollbar-width)), var(--container-wide-max-width));
        --nallow-width: min(calc(var(--container-width) - var(--scrollbar-width)), var(--container-max-width));
        --section-block-margin: clamp(60px, 12vw, 120px);
        --header-inline-margin: clamp(16px, 3.2vw, 32px);
        --header-block-margin: clamp(12px, 2.4vw, 24px);
        --header-width: calc(var(--viewport-width) - calc(var(--header-inline-margin) * 2));
        --header-safe-margin: calc(var(--header-height) + calc(var(--header-block-margin) * 2));

        /* ---- ルート基本設定 ---------------- */
        font-size: clamp(14px, 3.5vw, 16px);
        font-feature-settings: 'palt';
        letter-spacing: 0.02em;
        line-height: 1.8;
        color: var(--color-body-text);
        font-family: "Open Sans", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
        font-optical-sizing: auto;
        text-align: justify;
        scroll-behavior: smooth;

        @media screen and (max-width: 500px) {
            font-size: clamp(14px, 3.85vw, 17px);
        }
    }

    /* ---- 要素基本設定 ---------------- */
    * {
        box-sizing: border-box;
    }

    :is(html, body) {
        margin: 0;
        padding: 0;
        min-height: 100dvh;
    }

    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.6;
    }

    :is(h1, h2, h3, h4, h5, h6):has(br, wbr) {
        line-height: 1.4;
    }

    a {
        text-decoration: none;
    }

    img {
        max-width: 100%;
    }

    ol,
    ul,
    menu {
        list-style: none;
        padding-inline-start: 0;
    }

    ol {
        counter-reset: index;
    }

    ol li {
        counter-increment: index;
    }
}



/* ---- レイアウト定義 ------------------------------------------------ */
@layer layout {

    /* ---- ナビ（.header） -------------------------------- */
    /* .header {} */

    .header.pc,
    .header.sp {
        top: var(--header-block-margin);
        left: var(--header-inline-margin);
        width: var(--header-width);
    }

    .header.pc .header_area {
        width: var(--header-width);
    }

    @media screen and (max-width: 900px) {
        .header.sp .header_area {
            width: var(--header-width);
            /* width: calc(var(--viewport-width) - calc(var(--header-inline-margin) * 2)); */
            /* top: 0; */
        }
    }
}



/* ---- モジュール定義 ------------------------------------------------ */
@layer module {

    /* ---- リスト -------------------------------- */
    .notes_list {
        padding-inline-start: 1em;
    }

    .notes_list li {
        text-indent: -1em;
        line-height: 1.5;

        &::before {
            content: "※";
        }

        &~li {
            margin-block-start: 0.3em;
        }
    }

    /* ---- レイアウトグリッド -------------------------------- */
    .grid_layout_2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(45px, 9vw, 90px);
    }

    .grid_layout_3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(30px, 6vw, 60px);
    }

    .grid_layout_4col {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(24px, 4.8vw, 48px);
    }

    @media screen and (max-width: 1000px) {

        .grid_layout_2col,
        .grid_layout_3col {
            grid-template-columns: 1fr;
            gap: clamp(45px, 9vw, 90px);
        }

        .grid_layout_4col {
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(45px, 9vw, 90px);
        }
    }

    @media screen and (max-width: 750px) {
        .grid_layout_4col {
            grid-template-columns: 1fr;
            gap: clamp(45px, 9vw, 90px);
        }
    }



    /* ---- リストグリッド -------------------------------- */
    .grid_list_2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(45px, 9vw, 90px);
    }

    .grid_list_3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(30px, 6vw, 60px);
    }

    .grid_list_4col {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(24px, 4.8vw, 48px);
    }

    @media screen and (max-width: 1000px) {
        .grid_list_3col {
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(45px, 9vw, 90px);
        }

        .grid_list_4col {
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(30px, 6vw, 60px);
        }
    }

    @media screen and (max-width: 800px) {
        .grid_list_4col {
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(45px, 9vw, 90px);
        }
    }

    @media screen and (max-width: 750px) {
        .grid_list_2col {
            grid-template-columns: 1fr;
            gap: clamp(45px, 9vw, 90px);
        }
    }

    @media screen and (max-width: 500px) {

        .grid_list_2col,
        .grid_list_3col,
        .grid_list_4col {
            grid-template-columns: 1fr;
            gap: clamp(45px, 9vw, 90px);
        }
    }



    /* ---- フィット画像 -------------------------------- */
    .fit_visual {
        width: min(80%, 600px);
        margin-inline: auto;
        line-height: 1;
    }

    .fit_visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    @media screen and (max-width: 500px) {
        .fit_visual {
            width: min(100%, 600px);
            margin-block: clamp(12px, 3.2vw, 24px);
        }
    }




    /* ---- 千鳥配置 -------------------------------- */
    :has(>.chidori) {
        contain: content;
        overflow: hidden;
    }

    .chidori {
        --chidori-otherside-margin-abs: 10vw;
        --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%;
    }

    .chidori_item {
        /* border: 1px solid var(--color-border-gray); */

        &~& {
            margin-block-start: clamp(30px, 10vw, 60px);
        }
    }

    .chidori_item_inner {
        display: grid;
        gap: clamp(28px, 9vw, 56px);
        /* gap: clamp(24px, 8vw, 48px) */
    }

    .chidori .fit_visual {
        width: 100%;
    }

    /* ---- 左揃え項目 ---------------- */
    .chidori-start_align_left :where(.chidori_item:nth-child(2n+1)),
    .chidori-start_align_right :where(.chidori_item:nth-child(2n)) {
        margin-inline-start: var(--chidori-alignside-margin);
        margin-inline-end: var(--chidori-otherside-margin);

        & .chidori_item_inner {
            grid-template-columns: 6fr 4fr;
            margin-inline-start: 0;
            /* margin-inline-start: var(--chidori-inner-margin); */
            margin-inline-end: calc(var(--chidori-alignside-margin) + var(--chidori-otherside-margin-abs));
            margin-block: var(--chidori-inner-margin);
        }
    }

    /* ---- 右揃え項目 ---------------- */
    .chidori-start_align_left :where(.chidori_item:nth-child(2n)),
    .chidori-start_align_right :where(.chidori_item:nth-child(2n+1)) {
        margin-inline-start: var(--chidori-otherside-margin);
        margin-inline-end: var(--chidori-alignside-margin);

        & .chidori_item_inner {
            grid-template-columns: 4fr 6fr;
            margin-inline-start: calc(var(--chidori-alignside-margin) + var(--chidori-otherside-margin-abs));
            margin-inline-end: 0;
            /* margin-inline-end: var(--chidori-inner-margin); */
            margin-block: var(--chidori-inner-margin);
        }

        & .chidori_item_inner>*:first-child {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        & .chidori_item_inner>*:last-child {
            grid-column: 1 / 2;
            grid-row: 1 / 2
        }
    }

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

        .chidori-start_align_left .chidori_item,
        .chidori-start_align_right .chidori_item {
            margin-inline-start: var(--chidori-alignside-margin);
            margin-inline-end: var(--chidori-otherside-margin);

            & .chidori_item_inner {
                grid-template-columns: 1fr;
                /* 枠がない場合のマージン指定 */
                margin-inline: 0;
                /* 枠がある場合のマージン指定 */
                /* margin-inline-end: var(--chidori-inner-margin); */
            }

            & .chidori_item_inner>* {
                grid-column: unset;
                grid-row: unset;
            }
        }
    }



    /* ---- CTA -------------------------------- */
    :where(.cta_area) .cta_2col {
        display: grid;
        width: min(var(--container-width), 540px);
        margin-inline: auto;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(12px, 3vw, 36px);
    }

    :where(.cta_area) .grid_layout_2col {
        gap: clamp(12px, 3vw, 36px);
    }

    :where(.cta_area) .grid_layout_3col {
        gap: clamp(8px, 2vw, 24px);
    }

    @media screen and (max-width: 1000px) {
        :where(.cta_area) .grid_layout_2col {
            grid-template-columns: repeat(2, 1fr);
        }

        :where(.cta_area) .grid_layout_3col {
            grid-template-columns: repeat(3, 1fr);
        }

        :where(.cta_area) .grid_layout_3col {
            gap: clamp(12px, 3vw, 36px);
        }
    }

    @media screen and (max-width: 750px) {
        :where(.cta_area) .cta_2col {
            width: auto;
            gap: 0;
        }

        :where(.cta_area) .grid_layout_2col {
            grid-template-columns: 1fr;
        }

        :where(.cta_area) .grid_layout_3col {
            grid-template-columns: 1fr;
        }
    }

    .cta_area:has(.grid_layout_3col) .container {
        width: min(var(--container-width), var(--container-max-width));
    }

    .cta_copy {
        width: fit-content;
        margin-block-start: 0;
        margin-block-end: clamp(2px, 0.4vw, 4px);
        margin-inline: auto;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
        position: relative;

        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            width: 1em;
            height: 66.6%;
            background-color: currentColor;
            transform: translateY(-50%);
        }

        &::before {
            right: 100%;
            clip-path: polygon(0 0, 10% 0, 100% 100%, 90% 100%, 0 0);
        }

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

        & span {
            word-break: break-all;
        }
    }

    @media screen and (max-width: 750px) {
        :where(.cta_area) .cta_2col .cta_copy {
            display: none;
        }
    }

    /* ---- CTAボタン ---------------- */
    .cta_btn {
        --cta-btn-padding-init: clamp(6px, 3vw, 15px);
        --cta-btn-padding: var(--cta-btn-padding-init);
        display: block;
        padding: var(--cta-btn-padding);
        font-size: clamp(1rem, 0.825vw, 1.1rem);
        font-weight: 600;
        text-align: center;
        line-height: 1;
        border-radius: clamp(5px, 1vw, 10px);
        /* border-radius: calc(calc(1em + var(--cta-btn-padding) + var(--cta-btn-padding)) * 2); */
        border: 1.5px solid white;
        background-color: white;
        color: var(--color-fastask-darkblue);
        transition: border-color 0.1s ease 0s,
            background-color 0.1s ease 0s,
            color 0.1s ease 0s;

        &.cta_btn-small {
            font-size: 0.9em;
            --cta-btn-padding: clamp(3px, 1.5vw, 8px);
        }
    }

    .cta_btn:has(>br) {
        line-height: 1.4;
    }

    .cta_btn:hover,
    .cta_btn:active,
    .white_btn:hover,
    .white_btn:active {
        border-color: var(--color-fastask-blue);
        background-color: var(--color-fastask-blue);
        color: white;
    }

    .orange_btn {
        border-color: var(--color-fastask-orange);
        background-color: var(--color-fastask-orange);
        color: white;
    }

    .orange_btn:hover,
    .orange_btn:active {
        border-color: white;
        background-color: white;
        color: var(--color-fastask-orange);
    }

    .blue_btn {
        border-color: var(--color-vivid-cobaltblue);
        background-color: var(--color-vivid-cobaltblue);
        color: white;
    }

    .blue_btn:hover,
    .blue_btn:active {
        border-color: white;
        background-color: white;
        color: var(--color-vivid-cobaltblue);
    }

    @media screen and (max-width: 750px) {
        :where(.cta_area) .cta_2col .cta_btn {
            border-radius: 0;
        }
    }


    /* ---- 画面最下部CTAエリア ---------------- */
    .floating_cta {
        display: block;
        position: fixed;
        width: var(--viewport-width);
        padding-block: clamp(8px, 1.4vw, 14px);
        bottom: 0;
        left: 0;
        z-index: 999;
        background-color: rgb(199 199 199 / 0.5);
        box-shadow: inset 0 0.5px 2.5px rgb(0 0 0 / 0.07);
        backdrop-filter: blur(16px);
        transform: translateY(0);
        transition: display 0.5s ease 0s allow-discrete,
            transform 0.5s ease 0s;

        @starting-style {
            transform: translateY(100%);
        }
    }

    .floating_cta.is_hidden {
        display: none;
        transform: translateY(100%);

        @starting-style {
            transform: translateY(0);
        }
    }

    .floating_cta .container {
        width: min(var(--container-width), 540px);
    }

    /*
    .floating_cta .cta_btn {
        --cta-btn-padding: clamp(12px, 1.8vw, 18px);
    }
*/
    .floating_cta .cta_copy {
        font-size: 1rem;
        color: var(--color-fastask-darkblue);
    }

    @media screen and (max-width: 750px) {
        .floating_cta {
            padding-block: 0;
        }
    }


    /* ---- ナビ（.header） -------------------------------- */
    .header .header_bg {
        display: none;
        position: absolute;
        width: var(--viewport-width);
        height: 100dvh;
        top: calc(var(--header-block-margin) * -1);
        left: calc(var(--header-inline-margin) * -1);
        z-index: -1;
        background-color: rgb(0 0 0 / 0);
        transition: display 0.15s ease 0s allow-discrete,
            background-color 0.15s ease 0s;
    }

    .header .header_bg.active {
        display: unset;
        background-color: rgb(0 0 0 / 0.4);

        @starting-style {
            background-color: rgb(0 0 0 / 0);
        }
    }

    a {
        text-decoration: none;
    }

    .header.sp {
        display: none;
    }

    .header.pc {
        position: fixed;
        z-index: 9999;
        border-radius: clamp(4px, 1.6vw, 8px);
        opacity: 1;
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
        transition: opacity 0.2s ease-in-out 0s;

        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            background-color: rgb(0 0 0 / 0.36);
            border-radius: clamp(4px, 1.6vw, 8px);
            box-shadow: inset 0 0.5px 2.5px rgb(0 0 0 / 0.07);
        }
    }

    .header.pc.is_light {
        &::after {
            background-color: rgb(255 255 255 / 0.5);
            /* background-color: rgb(215 215 215 / 0.5); */
        }
    }

    .header.pc.is_light:has(.active) {
        &::after {
            background-color: rgb(255 255 255 / 0.6);
        }
    }

    .header.pc.is_transparent {
        opacity: 0.5;
    }

    .header.pc .header_area {
        display: flex;
        position: relative;
        height: var(--header-height);
        margin: 0;
        padding-inline-end: clamp(12px, 4vw, 24px);
        justify-content: flex-start;
        align-items: center;
        gap: clamp(12px, 4vw, 24px);

        &>*:first-child {
            margin-inline-start: clamp(12px, 4vw, 24px);
        }
    }

    .header.pc .logo {
        width: 138px;
        height: 100%;
        background-image: url(../images/fastask_logo_white.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .header.pc.is_light .logo {
        background-image: url(../images/fastask_logo.svg);
    }

    .header.pc .space {
        flex: 1;
    }

    .header.pc .menu {
        flex-grow: 1;
        display: flex;
        gap: clamp(15px, 5vw, 30px);
    }

    .header.pc .menu .header_link {
        color: white;
        font-size: 16px;
        font-weight: 600;
    }

    .header.pc.is_light .menu .header_link {
        color: var(--color-fastask-darkblue);
    }

    .header.pc .menu .header_link:hover {
        color: var(--color-fastask-cyan);
        transition: .2s;
    }

    .header.pc .side {
        display: flex;
        align-items: center;
        gap: clamp(9px, 3vw, 18px);
    }

    .header.pc .side .header_link {
        padding: clamp(4.5px, 0.75vw, 9px) clamp(9px, 1.5vw, 18px);
        background-color: var(--color-vivid-cobaltblue);
        color: #FFFFFF;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        border-radius: clamp(3px, 1vw, 7px);
        transition: background-color 0.2s ease 0s,
            color 0.2s ease 0s;
    }

    .header.pc .side .header_link:hover {
        background-color: white;
        color: var(--color-vivid-cobaltblue);
    }

    .header.pc .login_button {
        padding: clamp(4.5px, 0.75vw, 9px) clamp(9px, 1.5vw, 18px);
        background-color: white;
        border: 2px solid var(--color-fastask-blue);
        border-radius: clamp(3px, 1vw, 7px);
        font-size: 0.875rem;
        font-weight: bold;
        color: var(--color-fastask-blue);
        transition: background-color 0.2s ease 0s,
            border 0.2s ease 0s,
            color 0.2s ease 0s;
    }

    .header.pc .login_button:hover {
        background-color: var(--color-fastask-blue);
        border-color: white;
        color: white;
    }

    .header.pc .humburgermenu {
        display: none;
    }

    .header.pc .menu_humburger {
        display: none;
    }

    @media screen and (max-width: 1260px) {
        .header.pc .menu {
            display: none;
        }

        .header.pc .space {
            flex: 1;
        }

        .header.pc .side {
            justify-content: flex-end;
        }

        .header.pc .login_button {
            justify-content: flex-end;
        }

        .header.pc .humburgermenu {
            justify-content: flex-end;
            align-self: stretch;
            display: block;
        }

        .header.pc .humburgermenu .menu_button {
            background: none;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 24px;
            height: 100%;
            background: url(../images/menu_open_white.svg) center / contain no-repeat;
        }

        .header.pc.is_light .humburgermenu .menu_button {
            background: url(../images/menu_open_darkblue.svg) center / contain no-repeat;
        }

        .header.pc .humburgermenu .menu_button.active {
            background-image: url(../images/menu_close_white.svg);
        }

        .header.pc.is_light .humburgermenu .menu_button.active {
            background-image: url(../images/menu_close_darkblue.svg);
        }

        .header.pc .menu_humburger {
            align-self: flex-start;
            display: block;
            content-visibility: hidden;
            z-index: 9998;
            width: var(--header-width);
            height: 0;
            opacity: 0;
        }

        .header.pc .menu_humburger a.humbueger_link {
            display: block;
            color: white;
            line-height: 60px;
            height: 60px;
            padding: 0px 20px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid rgb(221 221 221 / 0.5);
        }

        .header.pc.is_light .menu_humburger a.humbueger_link {
            border-bottom: 1px solid rgb(var(--color-fastask-darkblue-dec) / 0.5);
            color: var(--color-fastask-darkblue);
        }

        .header.pc .menu_humburger a.humbueger_link:last-child {
            border-bottom: none;
        }

        .header.pc .menu_humburger .line {
            height: 4px;
            width: 100%;
            border: none;
            background-color: rgb(221 221 221 / 0.5);
        }

        .header.pc.is_light .menu_humburger .line {
            background-color: rgb(var(--color-fastask-darkblue-dec) / 0.5);
        }

        .header.pc .menu_humburger.active {
            content-visibility: auto;
            height: auto;
            opacity: 1;
        }
    }

    @media screen and (max-width: 900px) {
        .header.pc {
            display: none;
        }

        .header.sp {
            display: block;
            position: fixed;
            z-index: 9999;
            border-radius: clamp(4px, 1.6vw, 8px);
            opacity: 1;
            backdrop-filter: blur(16px);
            box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
            transition: opacity 0.2s ease-in-out 0s;

            &::after {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                background-color: rgb(0 0 0 / 0.36);
                border-radius: clamp(4px, 1.6vw, 8px);
                box-shadow: inset 0 0.3px 1.8px rgb(0 0 0 / 0.05);
            }
        }

        .header.sp.is_light {
            &::after {
                background-color: rgb(255 255 255 / 0.5);
                /* background-color: rgb(215 215 215 / 0.5); */
            }
        }

        .header.sp.is_light:has(.active) {
            &::after {
                background-color: rgb(255 255 255 / 0.6);
            }
        }

        .header.sp.is_transparent {
            opacity: 0.5;
        }

        .header.sp .header_area {
            display: flex;
            position: relative;
            height: var(--header-height);
            margin: 0;
            padding-inline-end: clamp(6px, 3vw, 24px);
            justify-content: flex-start;
            align-items: center;
            gap: clamp(6px, 3vw, 24px);

            &>*:first-child {
                margin-inline-start: clamp(6px, 3vw, 24px);
                ;
            }
        }

        .header.sp .header_area .login {
            flex-shrink: 1;
        }

        .header.sp .header_area .login .login_button {
            padding: clamp(4.5px, 0.75vw, 9px) clamp(9px, 1.5vw, 18px);
            background-color: white;
            border: 2px solid var(--color-fastask-blue);
            border-radius: clamp(3px, 1vw, 7px);
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--color-fastask-blue);
            white-space: nowrap;
        }

        .header.sp .header_area .login .login_button:hover {
            background-color: var(--color-fastask-blue);
            border-color: white;
            color: white;
        }

        .header.sp .header_area .space {
            flex: 1;
        }

        .header.sp .header_area .logo {
            flex-basis: clamp(125px, 20vw, 160px);
            height: 100%;
            background-image: url(../images/fastask_logo_white.svg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
        }

        .header.sp.is_light .header_area .logo {
            background-image: url(../images/fastask_logo.svg);
        }

        .header.sp .header_area .side {
            display: flex;
            align-items: center;
            gap: clamp(9px, 3vw, 18px);
        }

        .header.sp .header_area .side .header_link {
            padding: clamp(4.5px, 0.75vw, 9px) clamp(9px, 1.5vw, 18px);
            background-color: var(--color-vivid-cobaltblue);
            color: #FFFFFF;
            font-size: 0.75rem;
            font-weight: 600;
            text-align: center;
            border-radius: clamp(3px, 1vw, 7px);
            transition: background-color 0.2s ease 0s,
                border 0.2s ease 0s,
                color 0.2s ease 0s;
        }

        .header.sp .header_area .side .header_link:hover {
            background-color: white;
            color: var(--color-vivid-cobaltblue);
        }

        .header.sp .header_area .menu {
            flex-shrink: 1;
            align-self: stretch;
            position: relative;
        }

        .header.sp .header_area .menu_button {
            background: none;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 24px;
            height: 100%;
            background: url(../images/menu_open_white.svg) center / contain no-repeat;
        }

        .header.sp.is_light .header_area .menu_button {
            background: url(../images/menu_open_darkblue.svg) center / contain no-repeat;
        }

        .header.sp .header_area .menu_button.active {
            background-image: url(../images/menu_close_white.svg);
        }

        .header.sp.is_light .header_area .menu_button.active {
            background-image: url(../images/menu_close_darkblue.svg);
        }

        .header.sp .menu_humburger {
            display: block;
            content-visibility: hidden;
            z-index: 9998;
            width: var(--header-width);
            height: 0;
            opacity: 0;
        }

        .header.sp .menu_humburger a.humbueger_link {
            display: block;
            color: white;
            line-height: 60px;
            height: 60px;
            padding: 0px 20px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid rgb(221 221 221 / 0.5);
        }

        .header.sp .menu_humburger a.humbueger_link:last-child {
            border-bottom: none;
        }

        .header.sp.is_light .menu_humburger a.humbueger_link {
            border-bottom: 1px solid rgb(var(--color-fastask-darkblue-dec) / 0.5);
            color: var(--color-fastask-darkblue);
        }

        .header.sp .menu_humburger .line {
            height: 4px;
            width: 100%;
            border: none;
            background-color: rgb(221 221 221 / 0.5);
        }

        .header.sp.is_light .menu_humburger .line {
            background-color: rgb(var(--color-fastask-darkblue-dec) / 0.5);
        }

        .header.sp .menu_humburger.active {
            content-visibility: auto;
            height: auto;
            opacity: 1;
        }
    }



    /* ---- セクション（.section） -------------------------------- */
    .section {
        contain: content;
        overflow: hidden;
    }

    .section~.section {
        margin-block: var(--section-block-margin);
    }

    :where(.section) .section_title {
        width: fit-content;
        margin-inline: auto;
        font-size: clamp(1.7rem, 5.5vw, 2rem);
        font-weight: 550;
        text-align: center;
        position: relative;

        &:where(:first-child) {
            margin-block-end: clamp(18px, 6vw, 36px);
        }

        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            width: clamp(36px, 12vw, 72px);
            height: 5%;
        }

        &::before {
            top: 50%;
            left: 0;
            background: linear-gradient(270deg, rgb(var(--color-fastask-lightcyan-dec) / 0.5), rgb(var(--color-fastask-darkviolet-dec) / 0.5)) center / cover no-repeat;
            /* background: linear-gradient(270deg, var(--color-lightskyblue), var(--color-grayishblue)) center / cover no-repeat; */
            transform: translate(-130%, 0);
        }

        &::after {
            top: 50%;
            right: 0;
            background: linear-gradient(90deg, rgb(var(--color-fastask-lightcyan-dec) / 0.5), rgb(var(--color-fastask-darkviolet-dec) / 0.5)) center / cover no-repeat;
            /* background: linear-gradient(90deg, var(--color-lightskyblue), var(--color-grayishblue)) center / cover no-repeat; */
            transform: translate(130%, 0);
        }
    }

    :where(.section) .section_item_title {
        font-size: clamp(1.35rem, 2.4vw, 2rem);
        font-weight: 200;
        color: var(--color-fastask-darkviolet);
        white-space: nowrap;
        text-align: left;

        /*
        font-size: clamp(1.35rem, 3vw, 1.5rem);
        font-weight: 500;
        */
    }

    :where(.section) .section_lead {
        width: var(--width-nallow);
        margin-block: clamp(30px, 4.5vw, 60px);
        margin-inline: auto;
        font-size: 1.2rem;
        font-weight: normal;
        text-align: center;
        word-break: break-all;
    }

    @media screen and (max-width:1000px) {
        :where(.section .section_lead>*) {
            width: 86vw;
            margin-inline: auto;
        }
    }

    @media screen and (max-width: 500px) {
        .section {
            overflow-x: hidden;
        }

        :where(.section) .fit_visual {
            width: min(86vw, 100%);
            margin-inline: auto;
        }
    }



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

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

    img.keyvisual {
        position: static;
        height: auto;
        padding-block-start: 0;

        &::after {
            display: none;
        }
    }

    .keyvisual .keyvisual_container {
        container: keyvisual_container / size;
        display: grid;
        width: min(var(--container-width), var(--container-wide-max-width));
        height: calc(100% - 110px);
        /* 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;
        margin-inline-start: clamp(20px, 5.33vw, 40px);
        font-size: clamp(2rem, 2.15625vw, 2.875rem);
        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 {
        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: max(200px, 30dvh);
            /* height: max(400px, 70dvh); */
        }

        .keyvisual .keyvisual_container {
            height: calc(100% - 70px);
            /* 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);
        }
    }




    /* ---- ロゴパレード -------------------------------- */
    .logo_parade {
        position: relative;
        overflow: hidden;
        /* ---- ロゴパレード基本設定値 -------- */
        /* ［JSで設定する］コンテナ内のロゴの個数（横）。 */
        --logo_parade_container_count: 1;
        --logo_parade_container_logo_count: 0;
        /* ロゴの横幅 */
        --logo_parade_logo_width: 200px;
        /* ロゴ表示エリアの縦横比率（n>1=横長） */
        --logo_parade_logo_wide_ratio: 2;
        /* ロゴ間距離のロゴ横幅に対する比率 */
        --logo_parade_gap_ratio: 0.2;
        /* ロゴコンテナの繰り返し数 */
        --logo_parade_repet_count: 6;
        /* ---- ロゴパレード計算値 -------- */
        --logo_parade_container_width: calc(var(--logo_parade_logo_width) * var(--logo_parade_container_logo_count) + calc(var(--logo_parade_logo_width) * var(--logo_parade_gap_ratio) * var(--logo_parade_container_logo_count)));
        /* --logo_parade_logo_height: 100px; */
        --logo_parade_logo_height: calc(var(--logo_parade_logo_width) / var(--logo_parade_logo_wide_ratio));
        --logo_parade_gap: calc(var(--logo_parade_logo_width) * var(--logo_parade_gap_ratio));
    }

    .logo_parade {
        height: calc(var(--logo_parade_logo_height) * var(--logo_parade_container_count) + calc(var(--logo_parade_gap) * calc(var(--logo_parade_container_count) + 1)));
    }

    .logo_parade ul {
        list-style: none;
    }

    .logo_parade_scroll {
        position: absolute;
        width: calc(var(--logo_parade_container_width) * var(--logo_parade_repet_count));
        left: 50%;
        padding-block: calc(var(--logo_parade_gap) / 2);
        padding-inline: 0;
        display: block flex;
        justify-content: flex-start;
        transform: translate(-33.333%, 0);
        animation: 105s linear 0s infinite logo_parade_anim;
    }

    @keyframes logo_parade_anim {
        from {
            transform: translate(-33.333%, 0);
        }

        to {
            transform: translate(-50%, 0);
        }
    }

    .logo_parade_container {
        width: var(--logo_parade_container_width);
        height: var(--logo_parade_logo_height);
        padding-block: 0;
        padding-inline: calc(var(--logo_parade_gap) / 2);
        display: flex;
        justify-content: space-around;
        column-gap: var(--logo_parade_gap);
    }

    .logo_parade_container~* {
        margin-top: calc(var(--logo_parade_gap) / 2);
    }

    .logo_parade_container>* {
        width: var(--logo_parade_logo_width);
        padding-block: 25px;
        padding-inline: 25px;
        /* max-width: var(--logo_parade_logo_width); */
        background-color: white;
        border-radius: clamp(2px, 0.03vw, 4px);
        box-shadow: 0 4px 12px rgb(3 30 61 / 0.08),
            inset 0 -1px 4px rgb(0 0 0 / 0.1);
    }

    .logo_parade_container>*.scale-1-15 img {
        transform: scale(1.15);
    }

    .logo_parade_container>*.scale-1-10 img {
        transform: scale(1.1);
    }

    .logo_parade_container>*.scale-1-05 img {
        transform: scale(1.05);
    }

    .logo_parade_container>*.scale-0-975 img {
        transform: scale(0.975);
    }

    .logo_parade_container>*.scale-0-95 img {
        transform: scale(0.95);
    }

    .logo_parade_container>*.scale-0-925 img {
        transform: scale(0.925);
    }

    .logo_parade_container>*.scale-0-90 img {
        transform: scale(0.9);
    }

    .logo_parade_container>*.scale-0-875 img {
        transform: scale(0.875);
    }

    .logo_parade_container>*.scale-0-85 img {
        transform: scale(0.85);
    }

    .logo_parade_container>*.scale-0-825 img {
        transform: scale(0.825);
    }

    .logo_parade_container>*.scale-0-80 img {
        transform: scale(0.8);
    }

    .logo_parade_container>* img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    @media screen and (max-width:500px) {
        .logo_parade {
            /* ロゴの横幅 */
            --logo_parade_logo_width: 160px;
        }
    }



    /* ---- フッタCTA -------------------------------- */
    .page_footer {
        display: grid;
        height: 524px;
        margin-block-start: clamp(50px, 10vw, 100px);
        place-content: center;
        position: relative;

        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            background: linear-gradient(334deg, var(--color-fastask-violet), var(--color-fastask-lightcyan)),
                var(--color-fastask-violet);
            mask: linear-gradient(180deg, black, white 15%) luminance center / cover;
        }
    }

    .page_footer .cta_area {
        display: grid;
        width: min(var(--container-width), 848px);
        margin-inline: auto;
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(32px, 6.4vw, 64px);
        row-gap: clamp(16px, 3.2vw, 32px);
    }

    .page_footer .page_footer_title {
        font-size: clamp(1.2rem, 1.8vw, 1.5rem);
        font-weight: normal;
        color: white;
        text-align: center;
        line-height: 1.6;
    }

    .page_footer .cta_item {
        text-align: center;
    }

    .page_footer .cta_icon {
        width: clamp(40px, 6vw, 80px);
    }

    .page_footer .cta_btn {
        color: var(--color-jayblue);
    }

    .page_footer .cta_btn:hover {
        background-color: var(--color-fastask-lightcyan);
        border-color: var(--color-fastask-lightcyan);
    }

    @media screen and (max-width:1000px) {
        .page_footer .cta_area {
            grid-template-columns: 1fr;
        }
    }



    /* ---- フッタ -------------------------------- */
    footer {
        font-size: 100%;
        color: #303030;
        font-family: "Noto Sans", "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans CJK JP Subset", -apple-system, "Helvetica Neue", HelveticaNeue, "游ゴシック", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ ProN", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴシック", Hiragino Sans, Verdana, "メイリオ", Meiryo, sans-serif;
        letter-spacing: 0.1rem;
        display: block;
        /* height: 200px; */
        font-size: 12px;
        color: #7E7E7E;
        text-align: center;
        background-color: #FFF;
        padding-top: 40px;
    }

    footer .link {
        display: flex;
        justify-content: center;
    }

    footer .link a {
        color: #7E7E7E;
        text-decoration: none;
    }

    footer .link a:hover {
        opacity: 0.6;
        transition: 0.2s;
    }

    footer .link a+a {
        margin-left: 15px;
    }

    footer .copyright {
        font-family: Helvetica;
        margin-top: 10px;
        line-height: 30px;
        margin-bottom: 20px;
        text-align: center;
    }

    @media screen and (max-width: 800px) {
        footer {
            width: 100%;
            padding: 24px 0 0;
            height: initial;
        }

        footer .link {
            display: block;
            width: 90%;
            margin-inline: auto;
        }

        footer .link a {
            display: block;
            margin: 0 !important;
            height: 32px;
            line-height: 32px;
            font-weight: 600;
        }

        footer .link a:first-of-type {
            height: auto;
        }

        footer .link a.pc {
            display: none;
        }

        footer .copyright {
            height: 135px;
            margin: 0;
            padding-top: 12px;
        }
    }



    /* ---- サブナビ（.sub-nav-renew） -------------------------------- */
    .sub-nav-renew>* {
        display: flex;
        justify-content: center;
        gap: clamp(20px, 5.33vw, 40px);
        font-size: 1.2rem;
    }

    .sub-nav-renew .link {
        padding-block: clamp(3px, 0.8vw, 6px);
        padding-inline: clamp(3px, 0.8vw, 6px);
        font-weight: 200;
        color: var(--color-body-text);
        position: relative;
        transition: color 0.2s ease 0s;

        &:hover {
            color: var(--color-fastask-cyan);
        }
    }

    .sub-nav-renew .link.active {
        font-weight: 500;

        &:hover {
            color: var(--color-body-text);
        }

        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 4px;
            left: 0;
            bottom: 0;
            background: linear-gradient(180.5deg, rgb(var(--color-fastask-violet-dec) / 1), rgb(var(--color-fastask-lightcyan-dec) / 1)) center / cover no-repeat,
                var(--color-fastask-violet);
            border-radius: 2px;
            opacity: 1;
            transition: background-color 0.2s ease 0s;
        }
    }
}



/* ---- 状態・JS設定用クラス定義 ------------------------------------------------ */
@layer state {

    /* ---- JSでの表示・非表示初期設定 ---------------- */
    .toggle_visible {
        display: revert;
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }

    .toggle_hidden {
        display: none;
        opacity: 0;

        @starting-style {
            opacity: 0;
        }
    }

    .toggle_quick {
        transition: content-visibility 0.2s ease 0s allow-discrete,
            display 0.2s ease 0s allow-discrete,
            opacity 0.2s ease 0s;
    }

    .toggle_middle {
        transition: content-visibility 0.3s ease 0s allow-discrete,
            display 0.3s ease 0s allow-discrete,
            opacity 0.3s ease 0s;
    }

    .toggle_slow {
        transition: content-visibility 0.5s ease 0s allow-discrete,
            display 0.5s ease 0s allow-discrete,
            opacity 0.5s ease 0s;
    }

    /* ---- JSでの表示・非表示 ---------------- */
    .is_toggle_visible {
        content-visibility: auto;
        display: revert;
        opacity: 1;
    }

    .is_toggle_hidden {
        content-visibility: hidden;
        display: none;
        opacity: 0;
    }

    .is_visible {
        content: revert;
    }

    .is_hidden {
        content: revert;
    }
}



/* ---- ユーティリティ定義 ------------------------------------------------ */
@layer utility {

    /* ---- マージン ---------------- */
    .mt_2em {
        margin-block-start: 2em;
    }

    .mb_2em {
        margin-block-end: 2em;
    }

    .mt_1em {
        margin-block-start: 1em;
    }

    .mb_1em {
        margin-block-end: 1em;
    }

    .mt_1rem {
        margin-block-start: 1rem;
    }

    .mb_1rem {
        margin-block-end: 1rem;
    }

    /* ---- ブレイクポイントごとの表示・非表示 ---------------- */
    .show_w_min_500,
    .show_w_min_750,
    .show_w_min_1000 {
        display: revert;
    }

    .show_w_max_500,
    .show_w_max_750,
    .show_w_max_1000,
    .show_w_500_750,
    .show_w_500_1000,
    .show_w_750_1000 {
        display: none;
    }

    @media screen and (max-width: 1000px) {

        .show_w_max_1000,
        .show_w_min_500,
        .show_w_min_750,
        .show_w_500_1000,
        .show_w_750_1000 {
            display: revert;
        }

        .show_w_max_500,
        .show_w_max_750,
        .show_w_min_1000,
        .show_w_500_750 {
            display: none;
        }
    }

    @media screen and (max-width: 750px) {

        .show_w_max_750,
        .show_w_max_1000,
        .show_w_min_500,
        .show_w_500_750,
        .show_w_500_1000 {
            display: revert;
        }

        .show_w_max_500,
        .show_w_min_750,
        .show_w_min_1000,
        .show_w_500_750,
        .show_w_500_1000 {
            display: none;
        }
    }

    @media screen and (max-width: 500px) {

        .show_w_max_500,
        .show_w_max_750,
        .show_w_max_1000 {
            display: revert;
        }

        .show_w_min_500,
        .show_w_min_750,
        .show_w_min_1000,
        .show_w_500_750,
        .show_w_500_1000,
        .show_w_750_1000 {
            display: none;
        }
    }
}