@charset "utf-8";




/*===========================================================*/
/* home */
/*===========================================================*/


.home{




/* mv
--------------------------------------------------------------------*/

#mv{
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    #gc_container{
        position: absolute;
        right: 0;
    }
    .copy_area{
        z-index: 2;
        position: absolute;
        bottom: 60px;
        left: 60px;
        .main{
            margin-bottom: 24px;
            font-size: 3.2rem;
            line-height: 1.6;
            letter-spacing: 2px;
            display: flex;
            & span{
                padding:4px 8px;
                position: relative;
                opacity: 0;
                filter: blur(1px);
                &::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    /* background-color: var(--white); */
                    z-index: -1;
                    transform-origin: left;
                }
                &.start{
                    opacity: 1;
                    filter: blur(0);
                    transition: .9s ease-out .6s;
                    &::before{
                        width: 100%;
                        transition: .8s ease-out .2s;
                    }
                }
            }
        }
        .sub{
            font-size: 1.6rem;
            line-height: 1.6;
            & span{
                padding:4px 8px;
                display: inline-block;
                position: relative;
                opacity: 0;
                filter: blur(1px);
                line-height: 1.4;
                &::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    /* background-color: var(--white); */
                    z-index: -1;
                    transform-origin: left;
                }
                &.start{
                    opacity: 1;
                    transition: .9s ease-out opacity,.9s ease-out filter;
                    filter: blur(0);
                    &::before{
                        width: 100%;
                        transition: .8s ease-out;
                    }
                }
                &:nth-child(1){
                    transition-delay: .8s;
                    &::before{
                        transition-delay: .4s;
                    }
                }
                &:nth-child(3){
                    transition-delay: 1s;
                    &::before{
                        transition-delay: .6s;
                    }
                }
                &:nth-child(5){
                    transition-delay: 1.2s;
                    &::before{
                        transition-delay: .8s;
                    } 
                }
                &:nth-child(7){
                    transition-delay: 1.4s;
                    &::before{
                        transition-delay: 1s;
                    } 
                }
            }
        }
    }
    @media screen and (max-width: 960px) {
        .copy_area{
            bottom: 40px;
            left: 40px;
        }
    }
    @media screen and (max-width: 767px) {
        .copy_area{
            bottom: 20px;
            left: 20px;
            .main{
                margin-bottom: 16px;
                font-size: 2.4rem;
            }
            .sub{
                font-size: 1.4rem;
            }
        }
    }
    @media (hover: none) {
        .copy_area{
            .main{
                & span{
                    &::before{
                        background-color: var(--white);
                    }
                }
            }
            .sub{
                & span{
                    &::before{
                        background-color: var(--white);
                    }
                }
            }
        }
    }
}




/* about
--------------------------------------------------------------------*/

    #about{
    .content{
        display: flex;
        @media screen and (max-width: 767px) {
            flex-direction: column;
        }
        .vision_txt{
            width: 50%;
            margin-right: 40px;
            margin-bottom: 24px;
            @media screen and (max-width: 767px) {
                width: 100%;
                margin-right: unset;
                margin-bottom: 32px;
            }
        }
        .cmn_btn{
            @media screen and (max-width: 767px) {
                margin: 0 auto 40px;
            }
        }
    }
    .about_slide{
        .swiper-wrapper{
            transition-timing-function: linear;
            .swiper-slide{
                /* font-family: Lexend,sans-serif; */
                /* font-family: Albert Sans,sans-serif; */
                font-family: 'Roboto Mono', monospace;
                font-size:min(15.7143vw,22rem);
                color: var(--gray);
                color: hsl(0, 0%, 91%);
                color: var(--main_light);
                color: var(--main);
                /* font-weight: 700; */
                font-weight: 500;
                white-space: nowrap;
                letter-spacing: .008rem;
                letter-spacing: .03rem;
                line-height: 1;
                @media screen and (max-width: 767px) {
                    font-size: 18.2529vw;
                }
            }
        }
    }
    }


/* service
--------------------------------------------------------------------*/


    #service{
    .service_wrapper{
        position: relative;
        min-height: 440px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        @media screen and (max-width: 767px) {
            align-items: center;
        }

        & h3{
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 40px;
            width: 460px;
            /* color: var(--white); */
            /* mix-blend-mode: difference; */
            text-shadow: 0px 0px 6px var(--white);
            @media screen and (max-width: 767px) {
                margin-bottom: 16px;
                font-size: 1.8rem;
                width: 100%;
            }
        }
        .description{
            margin-bottom: 40px;
            width: 460px;
            /* color: var(--white); */
            /* mix-blend-mode: difference; */
            text-shadow: 0px 0px 6px var(--white);
            @media screen and (max-width: 767px) {
                margin-bottom: 32px;
                width: 100%;
            }
        }
        .bg_img {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            width: 660px;
            height: 440px;
            object-fit: cover;
            @media screen and (max-width: 767px) {
                width: 100%;
                height: auto;
                position: relative;
                margin-bottom: 24px;
            }
        }
    }
    }


/* works
--------------------------------------------------------------------*/

    #works{
    .works_wrapper{
        position: relative;
        min-height: 440px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        @media screen and (max-width: 767px) {
            align-items: center;
        }

        & h3{
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 40px;
            width: 460px;
            /* color: var(--white); */
            /* mix-blend-mode: difference; */
            text-shadow: 0px 0px 6px var(--white);
            @media screen and (max-width: 767px) {
                margin-bottom: 16px;
                font-size: 1.8rem;
                width: 100%;
            }
        }
        .description{
            margin-bottom: 40px;
            width: 460px;
            /* color: var(--white); */
            /* mix-blend-mode: difference; */
            text-shadow: 0px 0px 6px var(--white);
            @media screen and (max-width: 767px) {
                margin-bottom: 32px;
                width: 100%;
            }
        }
        .bg_img {
            position: absolute;
            z-index: -1;
            top: 0;
            left:0;
            width: 660px;
            height: 440px;
            object-fit: cover;
            @media screen and (max-width: 767px) {
                width: 100%;
                height: auto;
                position: relative;
                margin-bottom: 24px;
            }
        }
    }
    }


}


/*===========================================================*/
/* about */
/*===========================================================*/


.about{

/* vision
--------------------------------------------------------------------*/

    #vision{
        .vision_img{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 32px;
            .outer{
                /* width: 577px; */
                width: 551px;
            }
            .under{
                position: absolute;
                z-index: -1;
                margin-top: 42px;
                width: 457px;
                animation: visionrotate 45s linear 0s infinite both;
                /* @media screen and (max-width: 617px) { */
                @media screen and (max-width: 767px) {
                    max-width: 79.2023%;
                    margin-top: 38px;
                }
                @media screen and (max-width: 520px) {
                    margin-top: 26px;
                }
            }
        }
        .vision_txt{
            & p{
                columns: 2;
                /* column-rule: 2px dashed var(--gray); */
                /* column-gap: 3em; */
                /* font-size: 1.8rem; */
                column-gap: 32px;
                text-align: justify;
                /* border: 1px solid var(--gray); */
                @media screen and (max-width: 767px) {
                      columns: 1;
                      /* font-size: 1.6rem; */
                  }
            }
        }
    }


/* features
--------------------------------------------------------------------*/

    #features{
        .features_list{
            display: flex;
            flex-direction: column;
            gap: 72px;
            .features_item{
                display: flex;
                justify-content: space-between;
                gap: 32px;
                .description{
                    .num{
                        font-weight: 700;
                        color: var(--main_dark);
                    }
                    & h3{
                        font-size: 3.2rem;
                        margin: 8px 0;
                        font-weight: 700;
                    }
                }
                .video_area{
                    flex-shrink: 0;
                    max-width: 424px;
                    width: 40%;
                    /* width: 480px; */
                    & video{
                        width: 100%;
                        height: auto;
                        object-fit: contain;
                        border-radius: 3px;
                    }
                }
                @media screen and (max-width: 767px) {
                    flex-direction: column;
                    align-items: center;
                    gap: 24px;
                    .description{
                        & h3{
                            font-size: 2.4rem;
                            margin: 8px 0;
                        }
                    }
                    .video_area{
                        width: 100%;
                    }
                }
            }
            @media screen and (max-width: 767px) {
                gap: 48px;
            }
        }

    }



/* faq
--------------------------------------------------------------------*/


#faq{
    .list {
        counter-reset: number 0;
        .question{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border: 1px solid var(--black);
            cursor: pointer;
            margin-bottom: 8px;
            border-radius: 3px;
            & p{
                display: flex;
                line-height: 1.7;
                padding-right: 24px;
                &::before{
                    display: inline-block;
                    margin-right: 16px;
                    /* width: 35px; */
                    counter-increment: number 1;
                    content: "Q.0" counter(number);
                }
            }
            .cross{
                font-size: 0;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                /* margin-right: 16px; */
                width: 16px;
                height: 16px;
                &::before{
                    content: "";
                    display: inline-block;
                    position: absolute;
                    background-color: var(--black);
                    border-radius: 3px;
                    height: 16px;
                    width: 2px;
                }
                &::after{
                    content: "";
                    display: inline-block;
                    position: absolute;
                    background-color: var(--black);
                    border-radius: 3px;
                    height: 2px;
                    width: 16px;
                }
            }
            &.is_active{
                .cross{
                    &::before{
                        height: 0;
                    }
                }
                & + .answer{
                    & p{
                        visibility: visible;
                        /* line-height: 2em; */
                        line-height: 1.7;
                        padding: 8px 24px 24px;
                        opacity: 1;
                        height: auto;
                        @media screen and (max-width: 767px){
                            padding: 0 16px 16px;
                        }
                    }
                }
                
            }
            @media screen and (max-width: 767px){
                padding: 8px 16px;
                & p{
                    display: block;
                    padding-right: 16px;
                    &::before{
                        display: block;
                        width: 100%;
                        font-size: 1.4rem;
                    }
                }
                .cross{
                    width: 16px;
                    height: 16px;
                    &::before{
                        height: 16px;
                    }
                    &::after{
                        width: 16px;
                    }
                }
            }
        }
        .answer{ 
            /* visibility: hidden;
            transform: scaleY(0);
            transition: .2s ease;
            line-height: 2em;
            overflow: hidden; */
            & p{
                height: 0;
                overflow: hidden;
                visibility: hidden;
                transition: lineheight .2s ,opacity .2s, padding .2s;
                transition: .2s;
                transition: opacity .2s ease, padding .2s ease;
                line-height: 0;
                opacity: 0;
                padding: 0 24px;
            }
            @media screen and (max-width: 767px){
                & p{
                    padding: 0 16px;
                }
            }
        }

    }
    
} 


}





/*===========================================================*/
/* service */
/*===========================================================*/


.service{

    /* intro
    --------------------------------------------------------------------*/
    
        #intro{
            .intro_txt{
                margin-bottom: 32px;
                & p{
                    columns: 2;
                    column-gap: 32px;
                    text-align: justify;
                    @media screen and (max-width: 767px) {
                          columns: 1;
                      }
                }
            }
            .range{
                background-color: var(--main_light);
                padding: 24px;
                & h3{
                    font-weight: 600;
                    font-size: 1.6rem;
                    margin-bottom: 8px;
                    text-align: center;
                }
                & ul{
                    border: 2px solid var(--white);
                    padding: 16px;
                    & li{
                        display: flex;
                        line-height: 1.6;
                        .item{
                            width: 272px;
                            color: var(--gray);
                            flex-shrink: 0;
                            @media screen and (max-width: 767px) {
                                width: auto;
                                min-width: 160px;
                                min-width: 128px;
                                font-size: 1.2rem;
                            }
                        }
                        .detail{
                            .sub{
                                display: block;
                            }
                            @media screen and (max-width: 767px) {
                                font-size: 1.2rem;
                            }
                        }
                        & + li{
                            margin-top: 8px;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        padding: 8px;
                    }
                }
                @media screen and (max-width: 767px) {
                    padding: 16px;
                }
            }
        }
    
    
    /* production
    --------------------------------------------------------------------*/
    #production{
        .list{
            display: flex;
            gap: 32px;
            li{
                width: calc((100% - 64px)/3);
                .card{
                    .img_area{
                        margin-bottom: 16px;
                        overflow: hidden;
                        & img{
                            display: block;
                            transition: .4s ease;
                        }
                    }
                    .txt_area{
                        & h3{
                            line-height: 1.5;
                            margin-bottom: 16px;
                            .en{
                                display: block;
                                font-size: 2.4rem;
                                font-weight: 600;
                            }
                            .ja{
                                display: block;
                                font-size: 1.2rem;
                                font-weight: 700;
                                color: var(--gray);
                            }
                        }
                        .description{
                            font-size: 1.4rem;
                            margin-bottom: 16px;
                        }
                        .btn{
                            position: relative;
                            display: inline-flex;
                            align-items: center;
                            line-height: 1.5;
                            gap:8px;
                            &::before{
                                content: '';
                                background-color: var(--black);
                                width: 100%;
                                height: 1px;
                                position: absolute;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                transform-origin: left;
                                transform: scaleX(0);
                            }
                            &::after {
                                content: '';
                                display: block;
                                background-image: url(/images/arrow_black.svg);
                                width: 16px;
                                height: 10px;
                                background-size: cover;
                            }
                            &:hover{
                                &::before{
                                    transition: .25s ease;
                                    transform: scaleX(1);
                                }
                            }
                        }
                    }
                    &:hover{
                        .img_area{
                            & img{
                                transform: scale(1.1);
                            }
                        }
                        .txt_area{
                            .btn{
                                &::before{
                                    transition: .25s ease;
                                    transform: scaleX(1);
                                }
                            }
                        }
                    }
                }
            }
        }
        @media screen and (max-width: 767px) {
            .list{
                flex-direction: column;
                gap: 48px;
                li{
                    width: 100%;
                    .card{
                        .txt_area{
                            & h3{
                                margin-bottom: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
    
    

    
    /* gallery
    --------------------------------------------------------------------*/

    #gallery{
        .gallery-swiper-container{
            position: relative;
            .swiper-wrapper{
                .swiper-slide{
                    transition: transform .6s ease-out;
                    .card{
                        display: block;
                        position: relative;
                        font-size: 0;
                        filter: grayscale(1);
                        transition: filter .4s ease-in-out;
                        & img{
                            width: 100%;
                            object-fit: cover;
                        }
                        /* .info{
                            padding: 16px 0;
                            line-height: 1;
                            background-color: var(--main);
                            color: var(--white);
                            text-align: center;
                            .name{
                                font-size: 1.6rem;
                                font-weight: 700;
                                line-height: 1;
                                @media screen and (max-width: 767px) {
                                    font-size: 1.4rem;
                                }
                            }
                        } */
                    }
                }
                .swiper-slide-active{
                    .card{
                        filter: grayscale(0);
                    }
                }
            }
            .carousel_ctrl{
                .swiper-button-prev{
                    left: 0;
                    right: auto;
                    top: 0;
                    margin: unset;

                    /* background-color: orange;
                    opacity: .5; */
                    /* background-color: transparent; */

                    width: 50vw;
                    height: 100%;

                    z-index: 4;
                    &::after{
                        display: none;
                    }
                }
                .swiper-button-next{
                    right: 0;
                    left: auto;
                    top: 0;
                    margin: unset;

                    /* background-color: red;
                    opacity: .5; */
                    /* background-color: transparent; */

                    width: 50vw;
                    height: 100%;

                    z-index: 4;
                    &::after{
                        display: none;
                    }
                }
            }   
        }
        @media (hover: none) {
            .carousel_ctrl{
                display: none;
            }
        }
    }

    }






/*===========================================================*/
/* production */
/*===========================================================*/


.production{

    /* intro
    --------------------------------------------------------------------*/
    
        #intro{
            .intro_txt{
                /* margin-bottom: 32px; */
                & p{
                    columns: 2;
                    column-gap: 32px;
                    text-align: justify;
                    @media screen and (max-width: 767px) {
                          columns: 1;
                      }
                }
            }
            .range{
                background-color: var(--main_light);
                padding: 24px;
                & h3{
                    font-weight: 700;
                    font-size: 1.6rem;
                    margin-bottom: 8px;
                    text-align: center;
                }
                & ul{
                    border: 2px solid var(--white);
                    padding: 16px;
                    & li{
                        display: flex;
                        line-height: 1.6;
                        .item{
                            width: 272px;
                            color: var(--gray);
                            flex-shrink: 0;
                            @media screen and (max-width: 767px) {
                                width: auto;
                                min-width: 160px;
                                min-width: 128px;
                                font-size: 1.2rem;
                            }
                        }
                        .detail{
                            .sub{
                                display: block;
                            }
                            @media screen and (max-width: 767px) {
                                font-size: 1.2rem;
                            }
                        }
                        & + li{
                            margin-top: 8px;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        padding: 8px;
                    }
                }
                @media screen and (max-width: 767px) {
                    padding: 16px;
                }
            }
        }


/* price
--------------------------------------------------------------------*/

#price{
    .card{
        border: 1px solid var(--black);
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        & h3{
            position: relative;
            font-size: 2.4rem;
            font-weight: 500;
            line-height: 1;
            display: inline-block;
            padding-bottom: 8px;
            border-bottom: 3px double var(--black);
            margin-bottom: 40px;
        }
        .amount{
            font-size: 3.2rem;
            margin-bottom: 40px;
            line-height: 1;
            font-weight: 600;
            .tax{
                font-size: 1.4rem;
                font-weight: 500;
            }
        }
        .note_wrapper{
            .note{
                line-height: 1.4;
                font-size: 1.2rem;
                padding-left: 1.5em;
                text-indent: -1.5em;
                & + .note{
                    margin-top: 4px;
                }
            }
        }
    }
    @media screen and (max-width: 767px) {
        .card{
            padding: 32px;
            & h3{
                font-size: 1.6rem;
                margin-bottom: 32px;
            }
            .amount{
                font-size: 2.4rem;
                margin-bottom: 32px;
                .tax{
                    font-size: 1.2rem;
                }
            }
        }
    }
}


/* Portfolio
--------------------------------------------------------------------*/

#portfolio{
    .note{
        margin-bottom: 96px;
        margin-bottom: 48px;
        /* font-size: 1.4rem; */
    }
    .list{
        display: flex;
        justify-content: center;
        gap: 48px;
        & li{
            .card{
                max-width: 368px;
                /* border: 1px solid var(--gray_light); */
                border: 1px solid var(--main_light);
                transition: filter .4s ease;
                transition: .4s ease;
                &:hover{
                    filter: brightness(1.02);
                    opacity: .9;
                    border-color: var(--main);
                }
            }
        }
    }
    @media screen and (max-width: 767px) {
        .note{
            margin-bottom: 24px;
        }
        .list{
            gap: 24px;
            & li{
                .card{
                    max-width: unset;
                }
                .nav{
                    margin-top: 16px;
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    line-height: 1.5;
                    gap: 8px;
                    &::after{
                        content: '';
                        display: block;
                        background-image: url(/images/arrow_black.svg);
                        width: 16px;
                        height: 10px;
                        background-size: cover;
                    }
                }
            }
        }
    }
}





}








/*===========================================================*/
/* works */
/*===========================================================*/


.works{

    #project{
        line-height: 1.5;
        .project_list{
            /* border-top: 1px solid var(--black); */
            border-top: 3px double var(--black);
            /* border-bottom: 3px double var(--black); */
            & li{
                display: flex;
                width: 100%;
                border-bottom: 1px solid var(--gray);
                /* & + li{
                    border-top: 1px solid var(--black);
                } */
                & a{
                    width: 100%;
                    display: flex;
                    padding: 32px 16px;
                    position: relative;
                    flex-direction: column;
                    justify-content: center;
                    &::before{
                        content: '';
                        background-image: url(/images/arrow_white.svg);
                        width: 16px;
                        height: 10px;
                        background-size: cover;
                        position: absolute;
                        right: 16px;
                        mix-blend-mode: difference;
                    }
                    &::after {
                        content: '';
                        background-color: var(--white);
                        width: 100%;
                        height: 1px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        transform-origin: left;
                        transform: scaleX(0);
                        mix-blend-mode: difference;
                    }
                    & span{
                        display: block;
                    }
                    .client{
                        width: 100%;
                        font-size: 2.4rem;
                        margin-bottom: 8px;
                        @media screen and (max-width: 767px){
                            font-size: 2rem;
                        }
                    }
                    .detail{
                        display: flex;
                        font-size: 1.4rem;
                        color: var(--gray);
                        @media screen and (max-width: 767px){
                            font-size: 1.2rem;
                        }
                    }
                    &:hover{
                        &::after{
                            transition: .25s ease;
                            transform: scaleX(1);
                        }
                    }
                    /* .hidden_img{
                        display: none;
                    } */
                }

            }
        }
    }

}




/*===========================================================*/
/* policy */
/*===========================================================*/


.policy{
 #policy{
    .lead{
        font-size: 1.6rem;
        margin-bottom: 32px;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
    .content{
        background-color: var(--main_light);
        padding: 32px;
        margin-bottom: 8px;
        font-size: 1.4rem;
        & h3{
            font-weight: 700;
            &:not(:nth-of-type(1)){
                margin-top: 24px;
            }
        }
        @media screen and (max-width: 767px) {
            padding: 24px;
            font-size: 1.2rem;
        }
    }

 }
}



/*===========================================================*/
/* contact */
/*===========================================================*/

    .grecaptcha-badge {
     visibility: hidden !important;
    }

    .contact{
        .note_required{
            margin-bottom: 8px;
            text-align: right;
            .txt_red{
                margin-right: 4px;
            }
        }
        .form_list{
            display: flex;
            flex-wrap: wrap;
            .form_title{
                width: 256px;
                font-weight: 700;
                &:not(:nth-child(1)){
                    margin: 32px 0 0;
                }
                .txt_red{
                    margin-left: 4px;
                }
            }
            .form_item{
                width: calc(100% - 256px);
                &.basic {
                    & input{
                        font-size: 1.6rem;
                        padding: 16px 24px;
                        width: 100%;
                        border: 1px solid var(--gray);
                        border-radius: 3px;
                        &:focus{
                            border: 1px solid var(--black);
                        }
                        &:focus-visible{
                            outline: 0;
                        }
                    }
                }
                &:not(:nth-child(2)){
                    margin: 32px 0 0;
                }
                .pull_down{
                    display: block;
                    z-index: 2;
                    position: relative;
                    border-radius: 3px;
                    overflow: hidden;
                    &::before{
                        pointer-events: none;
                        content: "";
                        display: block;
                        position: absolute;
                        width: 56px;
                        height: 100%;
                        top: 0;
                        right: 0;
                        background: var(--main);
                        z-index: 2;
                        border-radius: 3px;
                    }
                    &::after{
                        pointer-events: none;
                        content: "";
                        display: block;
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-right: 2px solid var(--white);
                        border-bottom: 2px solid var(--white);
                        -webkit-transform: translate(0, -50%) rotate(45deg);
                        transform: translate(0, -50%) rotate(45deg);
                        top: 50%;
                        right: 23px;
                        z-index: 3;
                    }
                    & select{
                        font-size: 1.6rem;
                        height: 56px;
                        display: block;
                        position: relative;
                        width: 100%;
                        border: none;
                        padding: 16px 24px;
                        cursor: pointer;
                        appearance: none;
                        border-radius: 3px;
                        border: 1px solid var(--gray);
                        background: transparent;
                        color: var(--black);
                        &:focus{
                            border: 1px solid var(--black);
                        }
                        &:focus-visible{
                            outline: 0;
                        }
                        & option{
                            &:disabled{
                                display: none;
                            }
                        }
                    }
                }
                & textarea{
                    font-size: 1.6rem;
                    padding: 16px 24px;
                    height: 224px;
                    width: 100%;
                    border: 1px solid var(--gray);
                    border-radius: 3px;
                    display: block;
                    resize: vertical;
                    &:focus{
                        border: 1px solid var(--black);
                    }
                    &:focus-visible{
                        outline: 0;
                    }
                }

            }
        }
        .agreement{
            margin: 48px 0;
            text-align: center;
            & label{
                display: inline-flex;
                align-items: center;
                & input{
                    display: block;
                    width: 16px;
                    height: 16px;
                    border: 1px solid var(--gray);
                    border-radius: 3px;
                    appearance: none;
                    padding: 0;
                    position: relative;
                    &:checked{
                        &::before{
                            content: "";
                            position: absolute;
                            top: 3px;
                            left: 3px;
                            display: inline-block;
                            width: 9px;
                            height: 6px;
                            border-left: 2px solid var(--main);
                            border-bottom: 2px solid var(--main);
                            transform: rotate(-54deg);
                        }
                    }
                }
                .admit_label{
                    font-size: 1.6rem;
                    padding-left: 8px;
                }
            }
        }
        .btn_box{
            width: 376px;
            height: 64px;
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
            display: block;
            position: relative;
            border-radius: 3px;
            transition: .2s ease-out;
            background: var(--main);
            & button{
                width: 100%;
                height: 100%;
                background: none;
                font-weight: 700;
                font-size: 1.6rem;
                transition: filter .2s ease-out;
                color: var(--white);
                cursor: pointer;
            }
            &:hover{
                /* background: var(--main_light); */
                filter: brightness(1.2);
                & button{
                    /* color: var(--gray); */
                }
            }
        }
        @media screen and (max-width: 767px) {
            .form_list{
                .form_title{
                    &:not(:nth-child(1)){
                        margin: 24px 0 0;
                    }
                }
                .form_item{
                    margin-top: 8px;
                    width: 100%;
                    &:not(:nth-child(2)){
                        margin: 8px 0 0;
                    }
                    &.basic {
                        & input{
                            height: 48px;
                            padding: 8px 16px;
                        }
                    }
                    & textarea{
                        padding: 8px 16px;
                        height: 160px;
                    }
                    .pull_down{
                        &::before{
                            width: 48px;
                        }
                        &::after{
                            right: 20px;
                        }
                        & select{
                            height: 48px;
                            padding: 8px 16px;
                        }
                    }
                }
            }
            .agreement{
                margin: 40px 0 40px;
                & label{
                    .admit_label{
                        font-size: 1.4rem;
                    }
                }
            }
            .btn_box{
                width: 336px;
                height: 56px;
                & button{
                    font-size: 1.4rem;
                }
            }
        
        }
    }
   

    

/*===========================================================*/
/* confirm */
/*===========================================================*/

 
    .confirm{
        .lead{
            font-weight: 700;
        }
        .frame{
            background: var(--main_light);
            width: 100%;
            padding: 24px;
            margin: 8px 0 48px;
            & p{
                & + p{
                    margin-top: 1em;
                }
            }
        }
        .btn_area{
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 32px;
            .btn_back{
                font-weight: 700;
                font-size: 1.6rem;
                border-radius: 3px;
                width: 136px;
                height: 64px;
                cursor: pointer;
                transition: .2s ease-out;
                border: 1px solid var(--gray);
                background-color: transparent;
                &:hover{
                    border: 1px solid var(--black);
                    background-color: var(--black);
                    color: var(--white);
                }
            }
            .conv_box{
                width: 376px;
                height: 64px;
                max-width: 100%;
                text-align: center;
                display: block;
                position: relative;
                border-radius: 3px;
                transition: filter .2s ease-out;
                background: var(--main);
                &:hover{
                    filter: brightness(1.2);
                }
                & button{
                    width: 100%;
                    height: 100%;
                    background: none;
                    font-weight: 700;
                    font-size: 1.6rem;
                    /* transition: .2s ease-out; */
                    color: var(--white);
                    cursor: pointer;
                }
            }

        }
        .txt_error{
            border: 2px solid var(--red);
            padding: 24px;
            color: var(--red);
            font-weight: 700;
        }
        @media screen and (max-width: 767px) {
            .frame{
                margin: 8px 0 40px;
            }
            .btn_area{
                gap: 24px;
                .btn_back{
                    font-size: 1.4rem;
                    height: 56px;
                }
                .conv_box{
                    width: 336px;
                    height: 56px;
                    & button{
                        font-size: 1.4rem; 
                    }
                }
            }
        }
    }





/*===========================================================*/
/* compleat */
/*===========================================================*/

    .compleat{
        .lead{
            font-weight: 700;
        }
        .frame{
            background: var(--main_light);
            width: 100%;
            padding: 24px;
            margin: 8px 0;
            & p{
                & + p{
                    margin-top: 1em;
                }
            }
        }
        .txt_report{
            margin-bottom: 48px;
        }
        .btn_area{
            text-align: center;
            .back_top{
                font-weight: 700;
                font-size: 1.6rem;
                border-radius: 3px;
                width: 136px;
                height: 64px;
                cursor: pointer;
                transition: .2s ease-out;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--gray);
                background-color: transparent;
                &:hover{
                    border: 1px solid var(--black);
                    background-color: var(--black);
                    color: var(--white);
                }
            }
        }
        @media screen and (max-width: 767px) {
            .txt_report{
                margin-bottom: 40px;
            }
            .btn_area{
                .btn_back{
                    font-size: 1.4rem;
                    height: 56px;
                }
            }
        }
    }



/*===========================================================*/
/* contact_steps */
/*===========================================================*/


#contact_steps{
    display: flex;
    justify-content: center;
    gap: 120px;
    position: relative;
    margin: 16px 0 72px 0;
    .step{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        color: var(--gray);
        &::before{
            content: "";
            background-color: var(--gray);
            position: absolute;
            top: 4px;
            left: 50%;
            width: calc(120px + 100%);
            height: 1px;
        }
        .ball{
            content: "";
            display: block;
            background-color: var(--gray);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: relative;
        }
        &.current{
            color: var(--black);
            .ball{
                background-color: var(--black);
                &::after{
                    content: "";
                    position: absolute;
                    top: -16px;
                    left: -16px;
                    width: 40px;
                    height: 40px;
                    border: 1px solid var(--black);
                    border-radius: 50%;
                }
            }
        }
        &:last-child{
            &::before{
                display: none;
            }
        }
    }
    @media screen and (max-width: 767px) {
        margin: 16px 0 56px 0;
        gap: 80px;
        .step{
            &::before{
                width: calc(80px + 100%);
            }
        }
    }
}