@charset "UTF-8";

/*
 *
 *	ランディングページ用 css
 
 *	01. header / footer
    ├ 01-01. logo
    ├ 01-02. メインメニュー
    └ 01-03. footer

 *	02. parts
    ├ 02-01. section
    ├ 02-02. txt box
    ├ 02-03. banner
    └ 02-04. button

 *	03. main image
    └ 03-01. main

 *	04. card list
    ├ 04-01. card_list
    ├ 04-02. solution_list
    ├ 04-03. arrow_list
    ├ 04-04. arrow_tit_box
    ├ 04-05. 導入事例
    ├ 04-06. 左右画像リスト
    └ 04-07. ご利用開始までの流れ

 *	05. flex0
    ├ 05-01. 文章リスト
    ├ 05-02. よくある質問（FAQ）
    ├ 05-03. Before After
    └ 05-04. dl lidt

 *	06. form
    └ 06-01. タブで切り替えるフォーム
 *
 */

 /*----------------------------------------

	01. header / footer

----------------------------------------*/

@layer layouts {

    /* ----------------------------------
        01-01. logo
    -----------------------------------*/

    #logo_box {
        flex: 0 0 240px;
        padding: 0 24px;
    }

    /* ----------------------------------
        01-02. メインメニュー
    -----------------------------------*/

    #main_nav {
        & > li {
            &:nth-last-child(2) {
                padding-left: 32px;
            }
            &:not(.cta_btn_box) > a {
                border-bottom: 2px solid transparent;

                &:hover,
                &.active {
                    margin-top: 0;
                    color: var(--def-txt-00);
                    border-bottom: 2px solid var(--blue-02);
                    background-color: transparent;
                }
            }
            &.cta_btn_box > a {
                margin: 0 4px;
                height: 64px;
                width: 160px;

                & p {
                    font-size: var(--f-s-10);
                    font-weight: normal;
                }
                & img,
                & svg {
                    max-width: 16px;
                    max-height: 16px;
                }
            }
        }
    }
    .pc_img { display: inline; }
    .sp_img { display: none; }

    /* ----------------------------------
        01-03. footer
    -----------------------------------*/

    #thanks footer {
        padding-bottom: 0;
    }

    /* フローティングバナーは非表示 */
    #floating_banner {
        display: none !important;
    }

}

@layer overwrite {

    /* ---- Tablet / SP ----*/
    @media (width <= 1024px) {

        header {
            border-bottom: 1px solid var(--gray1-04);
        }
        #main_nav {
            & > li {
                &:last-child > a,
                &:nth-last-child(2) > a {
                    margin: 0;
                    width: 100% !important;
                    border-radius: 0;
                }
                &:nth-last-child(2) {
                    padding-left: 0;
                }
            }
        }
        .pc_img { display: none; }
        .sp_img { display: inline; }

        /* スマホ用ヘッダ ---- */
        #sp_logo_box {
            width: 160px;
            height: 26px;
        }
    }
}

/*----------------------------------------

	02. parts

----------------------------------------*/

@layer layouts {

    /* ----------------------------------
        02-01. section
    -----------------------------------*/

    section {
            scroll-margin-top: 0;
    }
    .mobile section:not(:last-child) {
        padding-bottom: 16px; /* 0pxだとAndroidスマホで崩れる */
    }

    /* ----------------------------------
        02-02. txt box
    -----------------------------------*/

    .txt_box {
        margin: 0 auto 24px;
    }

    /* ----------------------------------
        02-03. banner
    -----------------------------------*/

    .banner_l_box {
        position: relative;
        padding: 32px;
        text-align: center;
        background-color: var(--white);
        z-index: 100;

        & img {
            max-width: 100%;
        }
    }

    /* ----------------------------------
        02-04. button
    -----------------------------------*/

    [class^="btn_"]:not(.btn_box) img,
    [class^="btn_"]:not(.btn_box) svg {
        position: absolute;
        top: 50%;
        right: 16px;
        width: 16px;
        transform: translateY(-50%);
    }
    [class^="btn_"]:not(.btn_box) svg {
        fill: var(--white);
    }

    .btn_s { width: 180px; }
    .btn_m { width: 280px; }
    .btn_l { width: 340px; }

    .cta_btn {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 8px 0;
        width: 88%;
        height: 72px;
        border-radius: var(--bdr-r-8);
        font-weight: bold;
        transition: var(--def-transition);
        box-shadow: var(--def-shadow);

        &:hover {
            transform: translateY(-2px);
        }
        & > p {
            width: 100%;
            font-size: var(--f-s-12);
            text-align: center;
        }
        & > div {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 4px auto 0;
            padding: 2px 0 8px;
            width: 100%;
            font-weight: bold;
        }
        & img,
        & svg {
            margin-right: 8px;
            max-width: 24px;
        }
    }

    .blue_btn         {
        background-color: var(--blue-02);
        color: var(--white);

        &:hover { background-color: var(--blue-03); }
    }
    .green_btn {
        background-color: var(--green2-02);
        color: var(--white);

        &:hover {
            background-color: var(--green2-03);
        }
    }
    .gray_btn {
        background-color: var(--gray2-03);
        color: var(--white);

        &:hover {
            background-color: var(--gray2-04);
        }
    }
    .orange_btn {
        background-color: var(--orange-btn-bg);
        color: var(--white);
        border: 2px solid var(--orange2-02);

        &:hover {
            background-color: var(--orange-btn-bg-hvr);
        }
    }
    .def_btn {
        color: var(--gray2-04);
        background-color: var(--white);
        border: 2px solid var(--gray2-04);

        & svg {
            fill: var(--gray2-04);
            transition: var(--def-transition);
        }
        &:hover {
            color: var(--white);
            background-color: var(--gray2-04);

            & svg {
                fill: var(--white);
            }
        }
    }

    /* ---- tab ----*/
    @media (width <= 1024px) {

        #menu_box .def_btn {
            border: none;
        }
    }
    @media (width <= 728px) {

        .txt_box {
            margin: 0 16px 24px;
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        section:last-child {
            padding-bottom: 0;
        }
    }
}

/*----------------------------------------

	03. main image

----------------------------------------*/

@layer layouts {

    /* ----------------------------------
        03-01. main
    -----------------------------------*/

    #wrapper #sec-1 {
        padding-bottom: 0;
    }
    #main_img {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 auto;
        padding: 0 32px;
        max-width: var(--max-w-1500);
        aspect-ratio: 0;

        & > div {
            position: relative;

            /* メインイメージ左エリア */
            &:first-child {
                width: 48%;
                z-index: 1;
            }
        }
        & h2 {
            margin: 0 auto 24px;
            padding: 32px 0;
            width: 100%;
            line-height: 1.4;
            letter-spacing: 4px;
            border-bottom: 1px solid var(--gray2-04);

            & span {
                display: inline-block;
                font-weight: bold;
            }
        }
        /* CTAボタンエリア */
        & #main_cta_box {
            display: flex;
            justify-content: center;
            margin-top: 32px;
            padding-bottom: 40px;
            z-index: 1;

            & > div {
                flex: 0 0 50%;
            }
        }
        /* 月桂冠エリア */
        #main_num_flex {
            display: flex;
            margin: 0 auto;
            padding: 0 0 24px;
            width: 80%;

            & > div {
                flex: 0 0 33.33%;
                padding: 0 4px;

                & img {
                    max-width: 100%;
                }
            }
        }
    }
    #main_img + p {
        display: none;
    }
    /* メインイメージ右エリア（flexの場合） */
    .biz_cloud #main_img > div:last-child {
        width: 52%;
        text-align: center;
    }

    /* メインイメージ右エリア（背景画像の場合） */
    .lp_img {
        & #lp-img-main {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;

            &:last-child::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgb(0 0 0 / .4);
            }
            & img {
                max-width: 100%;
            }
        }
        & #main_img h2 {
            border-bottom: 1px solid var(--white) !important;
        }
    }
    /* ---- aws logo ----*/
    #aws_box {
        position: absolute;
        top: 96%;
        right: 24px;
        color: var(--white);
        font-size: var(--f-s-12);
        text-align: center;
        z-index: 1;
    }

}
@layer overwrite {

    @media (width <= 1200px) {

        .lp_img #lp-img-main img {
            position: absolute;
            top: 0;
            right: -106px;
            max-width: 1000%;
            max-height: 100%;
        }
    }
    @media (width <= 1024px) {

        #main_cta_box {
            & a {
                margin: 0 auto;
            }
        }
        .biz_edu #main_img {
            padding: 0;
        }
    }

    /* ---- tab ----*/
    @media (width <= 820px) {

        #sec-1 {
            padding-top: 0 !important;
        }
        #main_img {
            flex-direction: column;
            width: 100%;

            & > div {
                flex: 0 0 100%;
                width: 100% !important;

                &:first-child {
                    order: 2;
                }
                &:last-child {
                    order: 1;
                }
            }
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        #main_img {
            padding: 0 24px;

            & h2 {
                letter-spacing: 2px;
            }
            & #main_cta_box {
                display: block;

                & > div:last-child {
                    margin-top: 24px;
                }
                & .cta_btn {
                    width: 100%;
                }
            }
            & #main_num_flex {
                width: 100%;
            }
            & #aws_box {
                bottom: -16px;
                right: 0;
                margin: 0 auto;
                padding: 24px;
            }
        }
    }
}

/*----------------------------------------

	04. card list

----------------------------------------*/

@layer layouts {

    /* ----------------------------------
        04-01. card_list
    -----------------------------------*/

    .card_list {
        & h4 {
            text-align: center;
        }
    }
    .even {
        .list_white a {
            background-color: var(--gray1-01);
        }
    }
    /*---- dot list ----*/
    .card_content.dot_box > p {
        position: relative;
        display: block;
        margin: 12px 16px 0 2.6rem;
        padding: 2px 0 12px 0;
        border-bottom: 1px solid var(--gray1-03);
        overflow: visible;

        &:last-child {
            border-bottom: none;
        }
        &::before {
            content: "●";
            position: absolute;
            top: 0;
            left: -19px;
            color: var(--blue-02);
        }
    }

    /* ----------------------------------
        04-02. solution_list
    -----------------------------------*/

    .solution_list {
        & h4 {
            position: relative;
            padding: 16px 4px 0;
            font-size: var(--f-s-18);

            &:before {
                content: "";
                position: absolute;
                bottom: -54px;
                left: 50%;
                margin-left: -16px;
                border: 16px solid transparent;
                border-top: 16px solid var(--gray2-01);
                z-index: 2;
            }
            &:after {
                content: "";
                position: absolute;
                bottom: -24px;
                left: 50%;
                margin-left: -8px;
                width: 16px;
                height: 10px;
                background-color: var(--gray2-01);
                z-index: 2;
            }
        }
        & .card_content {
            padding: 0 0 16px 0;
            border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
        }
        /*---- 上矢印エリア ----*/
        & h5 {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px 0 0 0;
            padding: 0 48px;
            min-height: 4.2rem;
            font-size: var(--fs-l);
            font-weight: bold;
            color: var(--white);
            text-align: center;
            background-color: var(--blue-02);
            border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;

            & img {
                position: absolute;
                top: calc(50% - 18px);
                left: 12px;
                max-width: 32px;
            }
        }
    }
    .even .solution_list .card_content {
        background-color: var(--white);
    }
    .odd .solution_list .card_content {
        background-color: var(--gray1-01);
    }

    /* ----------------------------------
        04-03. arrow_list 青い見出し下に↓があるタイプ
    -----------------------------------*/

    .arrow_list {
        & > div {
            padding-bottom: 0;

            & h4 {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 0;
                padding: 16px 0;
                min-height: 84px;
                text-align: center;
                color: var(--white) !important;
                background-color: var(--blue-02);
                border-radius: var(--bdr-r-8);

                &:before {
                    content: "";
                    position: absolute;
                    bottom: -36px;
                    left: 50%;
                    margin-left: -18px;
                    border: 18px solid transparent;
                    border-top: 18px solid var(--blue-02);
                    z-index: 2;
                }
            }
            & .card_content {
                padding-top: 24px;
                height: 80%;
            }
            & .dot_box {
                margin-top: 16px;
                padding-bottom: 16px;
                color: var(--gray2-04);
                font-size: var(--f-s-14);
                background-color: var(--gray1-01);
                border-radius: var(--bdr-r-8);

                & > div:first-child {
                    text-align: center;

                    & img {
                        max-width: 72%;
                    }
                }
                & p {
                    margin: 12px 16px 0 16px;
                }
            }
        }
    }

    .biz_edu {
        & .arrow_list {
            & h4 {
                padding: 16px 0;
                min-height: auto;
            }
            & .dot_box {
                background-color: var(--white);
            }
        }
    }

    /* ----------------------------------
        04-04. arrow_tit_box
    -----------------------------------*/

    .arrow_tit_list {
        counter-reset: number 0;

        & .arrow_tit_box {
            position: relative;
            margin: 16px 0;
            padding: 8px 0;
            text-align: center;
            color: var(--white);
            font-size: var(--f-s-18);
            border-radius: var(--bdr-r-8);

            &::before { /* 右向き三角形 */
                position: absolute;
                top: 0;
                left: -1px;
                content: "";
                width: 24px;
                height: 44px;
                clip-path: polygon(0 0, 100% 50%, 0 100%);
                background-color: var(--white);
            }
            &::after { /* 直角三角形 右上 */
                position: absolute;
                top: -3px;
                right: -11px;
                content: "";
                width: 32px;
                height: calc(32px / 2);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
                background-color: var(--white);
                transform: rotate(45deg);
            }
            & span { /* 直角三角形 左下 */
                display: block;
                position: absolute;
                bottom: -3px;
                right: -11px;
                content: "";
                width: 32px;
                height: calc(32px / 2);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
                background-color: var(--white);
                transform: rotate(134deg);
            }
        }
        & > div:nth-child(1) {
            & .arrow_tit_box,
            & .card_content::before {
                background-color: var(--blue-03);
            }
        }
        & > div:nth-child(2) {
            & .arrow_tit_box,
            & .card_content::before {
                background-color: var(--blue-02);
            }
        }
        & > div:nth-child(3) {
            & .arrow_tit_box,
            & .card_content::before {
                background-color: var(--blue-01);
            }
        }
        & > div:nth-child(1) .arrow_tit_box::before,
        & > div:nth-child(3) .arrow_tit_box::after,
        & > div:nth-child(3) .arrow_tit_box span {
            display: none;
        }
        & > div {
            padding-bottom: 0;
            background: linear-gradient(to bottom, var(--white) 80%, var(--gray1-01) 80%);
        }
        & .card_thumb {
            background-color: transparent;
        }
        & .card_content {
            position: relative;
            background-color: var(--gray1-01);

            &::before {
                display: block;
                position: absolute;
                top: -4px;
                left: -28px;
                content: " ";
                width: 88px;
                height: calc(88px / 2);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
                transform: rotate(-45deg);
            }
            &::after {
                display: block;
                position: absolute;
                top: 8px;
                left: 8px;
                counter-increment: number 1;
                content: counter(number, decimal-leading-zero) "";
                color: var(--white);
                font-weight: bold;
            }
            & h4 {
                padding: 48px 24px 0 48px;
                color: var(--darkBlue-03);
                text-align: left;
            }
            & p {
                padding: 8px 24px 24px 48px;
                color: var(--darkBlue-03);
            }
        }
    }
    .even {
        & .arrow_tit_list {
            & > div {
                padding-bottom: 0;
                background: linear-gradient(to bottom, var(--gray1-01) 80%, var(--white) 80%);
            }
            & .card_content {
                background-color: var(--white);
            }
        }
    }

    /* ----------------------------------
        04-05. 導入事例
    -----------------------------------*/

    .for_list .type_back {
        padding: 0 8px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: var(--white);
        font-size: var(--f-s-12);
        border-radius: 8px 8px 0 0;
    }
    .type_green_01 .type_back { background-color: var(--green2-02); }
    .type_blue .type_back     { background-color: var(--blue-02); }
    .even {
        & .for_list {
            & a {
                background-color: transparent;
            }
        }
    }

    /* ----------------------------------
        04-06. 左右画像リスト
    -----------------------------------*/

    a.img_list {
        margin: 56px auto;
        border-radius: var(--bdr-r-8);
        box-shadow: var(--def-shadow);

        &:hover {
            box-shadow: var(--def-hvr-shadow);
        }
        & .img_thumb {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &.img_r .img_content { padding-right: 32px; }
        &.img_l .img_content { padding: 24px; }
        & p {
            margin-bottom: 16px;
        }
    }
    .even {
        & a.img_list {
            background-color: var(--white);
        }
    }
    .odd {
        & .img_list {
            & .img_thumb {
                background-color: var(--gray1-01);
            }
        }
    }
    /*---- 吹き出し ----*/
    .bln {
        position: relative;
        width: 100%;
        margin: 0px auto;
        display: flex;
        align-items: center;
        overflow: hidden;

        &:before {
            content: "";
            width: 90px;
            height: 90px;
            background: no-repeat left center / contain;
        }
        &.no-san:before {
            background-image: url("../../lp/bizlat-cloud-education_d/img/no-san.svg");
        }
        &.furuya-san:before {
            background-image: url("../../lp/bizlat-cloud-education_d/img/furuya-san.png");
        }
        & .says {
            position: relative;
            margin: 1rem 0 1rem 1rem;
            padding: .6rem 1rem;
            max-width: calc(100% - 100px);
            border: 2px solid #e4e9e9;
            border-radius: .8rem;
            background-color: var(--white);
            line-height: 1.6;
            font-size: var(--f-s-14);

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -16px;
                margin-top: -8px;
                border: 8px solid transparent;
                border-right: 10px solid var(--white);
                z-index: 2;
            }
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: -21px;
                margin-top: -9px;
                border: 9px solid transparent;
                border-right: 12px solid #e4e9e9;
                z-index: 1;
            }
            & p {
                margin: 0;
                padding: 0;
            }
        }
    }

    /* ----------------------------------
        04-07. ご利用開始までの流れ
    -----------------------------------*/

    #flow_until_use {
        & > h3 + h4 {
            margin: 24px auto 0;
            text-align: center;
            font-weight: normal;

            & span:last-child {
                font-size: var(--f-s-ll);
                font-weight: bold;
                color: var(--orange1-03);
            }
        }
        & .card_list {
            justify-content: center;

            & > div {
                position: relative;
                background-color: var(--gray1-02);
                border-radius: var(--bdr-r-8);
                border-top: 8px solid var(--blue-02);

                &::before { /* 右向き三角形 */
                    content: "";
                    position: absolute;
                    top: calc(50% - 22px);
                    right: -22px;
                    width: 24px;
                    height: 44px;
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                    background-color: var(--gray1-02);
                    z-index: 1;
                }
                &::after { /* 右向き三角形 */
                    content: "";
                    position: absolute;
                    top: calc(50% - 22px);
                    left: 0;
                    width: 24px;
                    height: 44px;
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                    background-color: var(--white);
                }
                &:first-child::after,
                &:last-child::before {
                    display: none;
                }
            }
        }
    }


}

@layer overwrite {

    /* ---- TAB & SP ----*/
    @media (width <= 1024px) {

        .img_list {
            margin: 40px 24px;
        }
        a.img_list {
            padding: 0;
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        .img_list {
            & .img_content {
                & p {
                    margin: 0;
                }
            }
        }
    }
}
/*----------------------------------------

	05. list

----------------------------------------*/

@layer layouts {
    
    /* ----------------------------------
        05-01. 文章リスト
    -----------------------------------*/

    .features_list {
        margin: 24px auto;
        max-width: var(--max-w-728);

        & li {
            margin-bottom: 16px;
            padding: 20px 16px 16px 16px;
            background-color: var(--white);
            border-radius: var(--bdr-r-8);
        }
        & h3,
        & h4 {
            margin-bottom: 12px;
            padding: 0 0 16px 0;
            line-height: 1;
            font-size: var(--f-s-18);
            text-align: left;
            border-bottom: 1px solid var(--gray1-03);
        }
        & p {
            margin: 0;
            padding-left: 1.3em;
            text-align: left;
        }
    }
    .odd {
        & .features_list {
            & li {
                background-color: var(--gray1-01);
            }
        }
    }

    /* ----------------------------------
        05-02. よくある質問（FAQ）
    -----------------------------------*/

    .q_list {
        margin: 24px auto;
        max-width: var(--max-w-728);

        & li {
            margin-bottom: 16px;
            padding: 20px 16px 16px 16px;
            background-color: var(--white);
            border-radius: var(--bdr-r-8);

            & h4,
            & p {
                position: relative;
                padding-left: 48px;

                &::before {
                    position: absolute;
                    top: -4px;
                    left: 0;
                    display: block;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    border-radius: 50%;
                }
            }
            & h4 {
                margin-bottom: 16px;

                &::before {
                    content: "Q";
                    color: var(--white);
                    background-color: var(--green2-02);
                }
            }
            & p {
                color: var(--gray2-04);

                &::before {
                    content: "A";
                    line-height: 26px;
                    color: var(--green2-02);
                    border: 2px solid var(--green2-02);
                }
            }
        }
    }

    .odd {
        & .q_list {
            & li {
                background-color: var(--gray1-01);
            }
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        .q_list,
        .features_list {
            margin: 24px 16px;
        }
    }

    /* ----------------------------------
        05-03. Before After
    -----------------------------------*/

    .ba_list2 {
        margin: 40px auto 0;
        max-width: var(--max-w-980);

        & h4 {
            margin: 0 0 16px 16px;
            font-size: var(--f-s-l);
        }
        & img {
            vertical-align: bottom;
        }
        & .card_content {
            display: flex;

            & > div {
                flex: 0 0 50%;

                & p {
                    margin: 0 8px 8px 8px;
                    padding: 16px;
                    font-size: var(--f-s-14);
                }
                &:last-child {
                    background-color: var(--blue-01);

                    & p {
                        color: var(--white);
                        background-color: var(--blue-02);
                    }
                }
            }
        }
    }
    .even {
        & .ba_list2 {
            border-radius: var(--bdr-r-8);

            & .card_content {
                & > div:first-child {
                    background-color: var(--white);

                    & p {
                        background-color: var(--gray1-01);
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {

        .ba_list2 {
            margin: 40px 24px 0;
        }
    }

    /* ----------------------------------
        05-04. dl lidt
    -----------------------------------*/
    .dl_list {
        & dt {
            background-color: transparent;
        }
        &.dt_32 dt { flex: 0 0 32%; }
        &.dt_32 dd { flex: 0 0 calc(100% - 32%); }
    }

}

@layer overwrite {

    /* ---- SP ----*/
    @media (width <= 699px) {

        .dl_list {
            margin: 24px 16px;

            & dt {
                flex: 0 0 100%;
                margin-bottom: 0;
                padding: 0;

                & span {
                    padding: 8px;
                    border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;
                }
            }
            & dd {
                flex: 0 0 100%;
                margin-bottom: 16px;
                padding: 12px;
                border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
                border-top: none;
                border-left: 1px solid var(--gray1-03);
                border-right: 1px solid var(--gray1-03);
                border-bottom: 1px solid var(--gray1-03);
            }
        }
    }
}

/*----------------------------------------

	06. form

----------------------------------------*/

@layer layouts {

    /* ----------------------------------
        06-01. タブで切り替えるフォーム
    -----------------------------------*/

    #tab_box {
        display: flex;
        margin: 24px auto;
        max-width: var(--max-w-728);

        & .cta_btn {
            box-shadow: none;
            border-radius: 0;
            border: none !important;

            &:hover {
                cursor: pointer;
                transform: translateY(0);
            }
            & svg {
                fill: var(--white);
            }
        }
        &.orange_line {
            border-bottom: 4px solid var(--orange-btn-bg);
        }
        &.def_line {
            border-bottom: 4px solid var(--blue-btn-bg);
        }
    }
    #inquiry_txt,
    #dl_txt {
        padding: 0 16px;
    }
    #inquiry_txt,
    #inquiry_form,
    #dl_txt,
    #dl_form {
        visibility: hidden;
        margin-inline: auto;
        max-width: var(--max-w-728);
        height: 0;
        overflow: hidden;

        &.active {
            visibility: visible;
            height: auto;
            overflow: auto;
        }
    }

    @media (width <= 699px) {
        #contact_us_box .txt_gray_box {
            margin: 0;
        }
    }
}