.main_bg {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
}
  
.bg_img {
    background-attachment: fixed;
    width: 65.1vw;
    height: 65.57vw;
    background: url(./img/bg_item.png) center/cover no-repeat;
    margin: -2.76vw auto 0 auto;
    z-index: 0;
}
  
main {
    width:100vw;
    position: absolute;
    top:0;
    left:0;
    overflow-y: scroll;
    overflow-x:hidden;
    height:100%;
}
  
.copy{
    text-align: center;
    margin-top:27vw;
}
.copy h2 {
    font-size: 6.25vw;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: #E2CCBB;
    mix-blend-mode: exclusion;
    isolation: isolate;
    transform: translateZ(0);
}
.copy p{
    font-size: 1.25rem;
    font-weight: 700;
    margin-top:1.719rem;
    isolation: isolate;
    transform: translateZ(0);
}




/*ミッション*/
#mission{
    text-align: center;
    margin-top: 25.625rem;
    color: #E2CCBB;
    mix-blend-mode: exclusion;
    scroll-margin-top: 200px;
    isolation: isolate;
    transform: translateZ(0);
}
#mission h2{
    font-size: 1.875rem;
    font-family: "Lato", sans-serif;
    font-weight: 900;
}
.mission_copy{
    font-size: 6.313rem;
    font-weight: 700;
    margin: 1.75rem -4rem 4.25rem 0;
}
.mission_txt{
    width:38.28%;
    line-height:2rem;
    font-weight: 600;
    margin:0 auto;
}




/*私たちの価値*/
#value{
    background: linear-gradient(15deg,#4E224B,#1E1327,#1D1326);
    margin-top:21.25rem;
    padding-bottom:17.531rem;
    position: relative;
    scroll-margin-top: 200px;
}
.section_ttl{
    color:#FFFFFF;
    mix-blend-mode: exclusion;
    position: relative;
    top:-96px;
    z-index: 1;
    isolation: isolate;
    transform: translateZ(0);
}
.section_ttl h3{
    font-size: 16.875rem;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    isolation: isolate;
    transform: translateZ(0);
}
.section_ttl h2{
    font-size: 1.25rem;
    margin-top:-1.875rem;
    font-weight: 400;
    isolation: isolate;
    transform: translateZ(0);
}

.value_content{
    margin-top:8.438rem;
}
.value_content:first-of-type{
    margin-top:6.563rem;
}

.value_info{
    display: flex;
    align-items: center;
    justify-content: center;
}
.value_info img{
    width:340px;
    height:auto;
    margin:0 5.063rem;
}
.value_info .value_name{
    width:calc(80% - 340px);
    mix-blend-mode: exclusion;
    isolation: isolate;
    color:#F8F8F8;
}
.value_info .value_name .value_en{
    font-size: 4rem;
    font-family: "Lato", sans-serif;
    font-weight: 900;
}
.value_info .value_name .value_txt{
    font-size: 1.25rem;
}
.value_info .value_name .number{
    color:#F8F8F8;
    background-color: #2E2436;
    padding:0.25rem 1.281rem;
    border-radius: 999px;
    display: inline-block;
}



/*サービス*/
#service{
    position: relative;
    background: linear-gradient(#F4E1C9,#300D44);
    padding-bottom:10.313rem;
    scroll-margin-top: 200px;
}
.circle{
    width:1658px;
    position: absolute;
    left:-528px;
    top: -35px;
    overflow: hidden;
}
.circle img{
    width:1658px;
    height:auto;
    mix-blend-mode: soft-light; 
}
.service_wrapper{
    position: relative;
    z-index: 1;
}
#service1,#service2,#service3{
    scroll-margin-top: 150px;
}
.service_content{
    width:100%;
    height:100%;
    padding:3.125rem 0;
    background-color: rgba(255, 255, 255,0.7);
    backdrop-filter: blur(30px)brightness(1.4);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 1.25rem;
    margin-bottom:2.5rem;
}
.service_content .service_inner{
    width:1150px;
    margin:0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.service_content .service_inner .service_info{
    font-family:"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
               "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3",
               "Hiragino Sans", sans-serif;
    color: #FFFFFF;
    width:581px;
}
.service_content .service_inner .service_info.link{
    height: 283px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.service_content .service_inner .service_info h3{
    font-size: 1.25rem;
    font-weight: 600;
    mix-blend-mode: exclusion;
}
.service_content .service_inner .service_info p:not(.link .view_btn p){
    margin-top:1.875rem;
    line-height:1.375rem;
    mix-blend-mode: exclusion;
}
.service_content .service_inner img{
    width:480px;
    height:283px;
    object-fit: cover;
    border-radius: 1.25rem;
    mix-blend-mode: hard-light;
}

.view_btn{
    background-color: white;
    width:247px;
    border-radius: 999px;
    transition: .3s;
}
.view_btn a{
    mix-blend-mode: exclusion;
    display: inline-block;
    text-decoration: none;
    width:100%;
    padding:1.375rem 0;
    background-color: #D9C2B6;
    border-radius: 999px;
    border:none;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;

}
.view_btn:hover{
    transform: scale(1.05);
}
.view_btn a div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.view_btn a div p{
    margin-top:0;
    margin-right:2.063rem;
    color:#2E2436;
}
.service_content .view_btn a div img{
    width:32px;
    height:24px;
}


/*私たちについて*/
.company{
    background-color: rgba(255, 255, 255,.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding-bottom:7.25rem;
    position: relative;
    scroll-margin-top: 200px;
}
.company .section_ttl h3{
    color: #D9C2B6;
}
.company_content{
    display: flex;
    align-items: flex-end;
}

.company_content img:not(.view_btn img){
    width:486px;
    height:286px;
    object-fit: cover;
    border-radius: 1.25rem;
    margin-right:4.813rem;
}
.company_content .view_btn a div img{
        width:1rem;
        height:auto;
}

.company .view_btn a{
    text-align: center;
    position: relative;
}
.company .view_btn a i{
    color:#2E2436;
    font-weight: 900;
    position: absolute;
    top:50%;
    right:21px;
    transform: translateY(-50%);
}
.company .view_btn a p{
    color:#2E2436;
}

/*ページトップボタン*/
.page_top{
    width:136.39px;
    height:137.39px;
    margin-left:auto;
    position: absolute;
    bottom:2.913rem;
    right:27px;
    transition: .3s;
}
.page_top:hover{
    transform: scale(1.1);
}
.page_top img{
    width:100%;
    height:100%;
    mix-blend-mode: exclusion;
}







/*------------------------------------------------------------------------
                                レスポンシブ
--------------------------------------------------------------------------*/
@media(max-width:1440px){

    /*ミッション*/
    #mission{
        margin-top: 20vw;
    }

    .section_ttl{
        top: -6.67vw;
    }
    .section_ttl h3{
        font-size: clamp(12.875rem, 18.75vw, 16.875rem);
    }


    /*私たちの価値観*/
    #value{
        margin-top: 15.97vw;
        padding-bottom: 17.01vw;
    }


    /*サービス*/
    #service{
        padding-bottom: 11.46vw;
    }
    .circle {
        width: 83.33vw;
        left: -30vw;
        top: -1.39vw;
    }
    .circle img {
        width: 83.33vw;
    }
    .service_content .service_inner{
        width:90%;
    }
    .service_content .service_inner .service_info{
        width: calc(100% - 480px - 3rem);
    }
}

@media(max-width:1024px){
    /*ミッション*/
    .mission_copy{
        margin: 1.75rem -3.5rem 4.25rem 0;
    }
    .mission_txt{
        width:50%;
    }
    
    .inner {
        width: 90%;
    }
    .section_ttl h3 {
        font-size: 18vw;
    }


    /*私たちの価値観*/
    #value{
        margin-top: 19.53vw;
    }
    .value_content{
        margin-top: 8.79vw;
    }
    .value_info img{
        width:250px;
    }
    .value_info .value_name{
        width:calc(80% - 250px);
    }
    .value_content:first-of-type {
        margin-top: 3.9vw;
    }


    /*サービス*/
    .service_content .service_inner img{
        width: 400px;
        height: 235px;
    }
    .service_content .service_inner .service_info{
        width: calc(100% - 400px - 3rem);
    }


    /*私たちについて*/
    .company{
        padding-bottom:19.53vw;
    }
    .page_top {
        width: clamp(100px, 13.32vw, 139px);
        height: clamp(101px, 13.42vw, 137px);
        bottom: 2rem;
        right: 30px;
    }

}


@media(max-width:768px){
    .bg_img{
        width: 100vw;
        height: 100vw;
        margin: 1.5vw auto 0 auto;
    }
    .copy {
        margin-top: 40vw;
    }
    .copy h2{
        font-size: 9.41vw;
    }


    /*ミッション*/
    #mission{
        margin-top: 11.625rem;
    }
    .mission_copy {
        font-size: 9.41vw;
        margin-right: -3rem;
    }
    .mission_txt {
        width: 86.97%;
    }


    .section_ttl h2{
        margin-top:0;
        font-size: clamp(16px, 2.6vw, 20px);
    }


    /*私たちの価値観*/
    #value{
        margin-top: 18.19vw;
        padding-bottom: 19.53vw;
    }

    .value_info{
        width: 100%;
        margin-top:2rem;
    }
    .value_info img{
        margin:0;
        margin-right: 2rem;
        width: 32.55vw;
    }
    .value_info .value_name{
        width: calc(90% - 32.55vw);
    }
    .value_info .value_name .value_en{
        font-size: 7.29vw;
    }
    .value_info .value_name .value_txt {
        font-size: 2.21vw;
    }


    /*サービス*/
    #service {
        padding-bottom: 11.72vw;
    }
    .circle {
        width: 104.17vw;
        left: -40vw;
    }
    .circle img {
        width: 104.17vw;
    }
    .service_content .service_inner{
        flex-flow: column-reverse;
        align-items: center;
    }
    .service_content .service_inner .service_info {
        width: 80%;
        margin-top: 2rem;
    }
    .service_content .service_inner img {
        width: 80%;
        height: 30.6vw;
    }
    .service_content .service_inner .service_info.link{
        height:100%;
    }
    .service_info .view_btn {
        margin-top: 2rem;
    }


    /*私たちについて*/
    .company_content{
        align-items: flex-start;
        flex-flow: column;
    }
    .company_content img:not(.view_btn img){
        width: clamp(380px, 36.46vw, 480px);
        height: clamp(200px, 31.25vw, 240px);
        margin-right:0;
    }
    .company_content .view_btn{
        margin-top:2rem;
    }
    .page_top{
        width: clamp(80px, 13.02vw, 100px);
        height: clamp(81px, 13.15vw, 101px);
    }

}

@media(max-width:425px){
    /*バッグ背景*/
    .bg_img{
        margin: 7.5vw auto 0 auto;
    }

    /*ミッション*/
    .mission_copy{
        margin-right: -1.5rem;
    }

    .section_ttl h3 {
        font-size: 20vw;
    }


    /*私たちの価値観*/
    #value {
        margin-top: 30.59vw;
        padding-bottom: 30.59vw;
    }
    .value_content {
        margin-top: 14.12vw;
    }
    .value_content:first-of-type {
        margin-top: 9.41vw;
    }
    .value_info{
        flex-flow: column-reverse;
    }
    .value_info img{
        width: clamp(200px, 54.12vw, 230px);
        margin-right:0;
        margin-top:1rem;
    }
    .value_content:nth-of-type(2) .value_info img{
        margin-top:2rem;
    }
    .value_info .value_name{
        text-align: center;
        width: 100%;
    }
    .value_info .value_name .number{
        margin-bottom: 1rem;
    }
    .value_info .value_name .value_en {
        font-size: 40px;
    }
    .value_info .value_name .value_txt {
        font-size: 1rem;
        margin-top: .5rem;
    }


    /*サービス*/
    #service {
        padding-bottom: 16.47vw;
    }
    .circle {
        width: 141.18vw;
        left: -55vw;
    }
    .circle img {
        width: 141.18vw;
    }
    .service_content .service_inner img {
        width: 90%;
        height: 42.35vw;
        border-radius: 10px;
    }
    .service_content .service_inner .service_info {
        width: 90%;
    }
    .service_info .view_btn{
        width:100%;
    }
    .service_info .view_btn a{
        padding: 1.25rem 0;
        width: 100%;
    }
    .service_info .view_btn a div{
        justify-content: center;
    }


    /*私たちについて*/
    .company_content img:not(.view_btn img){
        width: 100%;
        height:47.06vw;
    }
    .company_content .view_btn{
        width:100%;
    }
    .company_content .view_btn a{
        padding: 1.25rem 0;
        width: 100%;
    }
    .company_content .view_btn a div{
        justify-content: center;
    }
    .company {
        padding-bottom: 32.94vw;
    }
    .page_top{
        right:20px;
    }

}


@media(max-width:375px){
    /*私たちについて*/
    .company {
        padding-bottom: 34.94vw;
    }
    .page_top{
        bottom: 1rem;
    }

}

@media(max-width:320px){
    /*バッグ背景*/
    .bg_img {
        margin: 11.5vw auto 0 auto;
    }
    .copy {
        margin-top: 45vw;
    }

    /*ミッション*/
    .mission_txt .br_no{
        display: none;
    }
}