/* --- Top --- */
/* Top-Header */
div.content_box_wrapper.top-header{
    height: 100vh;
    margin-bottom: 3rem;
    position: relative;
    background-color: rgb(var(--color-black));
}

div.content_box_wrapper.top-header video{
    position: absolute;
    opacity: 0.5;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
div.content_box_wrapper.top-header::before{
    content: "";
    position: absolute;
    left: 20%;
    top: 0;
    width: 5rem;
    height: 100%;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
    z-index: 1;
}
div.content_box_wrapper.top-header::after{
    content: "";
    position: absolute;
    left: 20%;
    bottom:0;
    width: 80%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 29%, rgba(0, 0, 0, 1) 90%),
                linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 10%),
                linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 10%);
}

div.content_box_wrapper.top-header .content_box{
    height: 100%;
    max-width: var(--general-max-width);
    justify-content: start;
    padding-top: 15lvh;
    padding-left: 5.9rem;
    padding-right: 5.9rem;
    align-items: start;
    z-index: 50;
}

div.content_box_wrapper.top-header .title_box{
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 1.5rem;
}

div.content_box_wrapper.top-header .content_box h1.title_en{
    color: rgb(var(--color-white));
    font-size: 3.3rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    z-index: 2;
}
div.content_box_wrapper.top-header .content_box p{
    font-family: "Noto Serif JP";
    font-size: 1.2rem;
}
div.content_box_wrapper.top-header .content_box a{
    font-size: 0.7rem;
    font-family: "Noto Serif JP";
    padding: 0.8rem 2rem;
    border-radius: 100rem;
    border: solid 0.1rem rgb(var(--color-primary));
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.top-header .content_box{
        padding: 0 3rem;
    }

    div.content_box_wrapper.top-header video{
        width: 100%;
    }
    div.content_box_wrapper.top-header .content_box{
        padding-top: 10vh;
    }
    div.content_box_wrapper.top-header::before{
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
        z-index: 1;
    }
    div.content_box_wrapper.top-header::after{
        content: "";
        position: absolute;
        left: 0;
        bottom:0;
        width: 100%;
        height: 20%;
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
    }
    div.content_box_wrapper.top-header .content_box h1.title_en,
    div.content_box_wrapper.top-header .content_box h1.title_ja{
        /* font-size: 2rem; */
        font-size: clamp(1.5rem, 10vw, 2.5rem);
    }
    div.content_box_wrapper.top-header .content_box p{
        font-family: "Noto Serif JP";
        font-size: 0.8rem;
    }

}

.top-section-title{
    /* width: 13rem; */
    flex-shrink: 0;
}
.top-section-title h2.title_en{
    display: flex;
    justify-content: space-between;
}
.top-section-title h2.title_en span{
    font-size: 2rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    letter-spacing: 0.3rem;
}

/* Top-Services */
div.content_box_wrapper.top-services{
    row-gap: 7rem;
    margin-top: 10rem;
}
div.content_box_wrapper.top-services .content_box.title-box{
    align-items: start;
}
div.content_box_wrapper.top-services .content_box.para-box{
    align-items: center;
}
div.content_box_wrapper.top-services .content_box.para-box p{
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem;
}
div.content_box_wrapper.top-services .content_box.tab-box{
    row-gap: 2rem;
}
div.content_box_wrapper.top-services .body-slides .swiper-slide{
    position: relative;
    width: 100%;
    min-height: 40rem;
    background-color: rgb(var(--color-black));
    border-radius: 3rem;
    padding: 3rem;
    padding-bottom: 6rem;
    overflow: hidden;
}
div.content_box_wrapper.top-services .body-slides .swiper-slide img{
    /* bg video */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: 1;
}
div.content_box_wrapper.top-services .body-slides .swiper-slide .para-box{
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: 85%;
    height: 100%;
}
div.content_box_wrapper.top-services .body-slides .swiper-slide .para-box h3{
    font-family: "Noto Serif JP", serif;
    font-size: 2rem;
    font-weight: 400;
    color: rgb(var(--color-white));
}
div.content_box_wrapper.top-services .body-slides .swiper-slide .para-box p{
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}
div.content_box_wrapper.top-services .body-slides .swiper-slide::after{
    content: "";
    position: absolute;
    background-image: url("../img/arrow_right.svg");
    filter: invert(100%) sepia(0%) saturate(363%) hue-rotate(165deg) brightness(109%) contrast(110%);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100rem;
    border-style: solid;
    border-color: rgb(var(--color-black));
    border-width: 0.1rem;
    width: 2rem;
    height: 2rem;
    z-index: 50;
    right: 2rem;
    bottom: 2rem;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.top-services{
        row-gap: 5rem;
    }
    div.content_box_wrapper.top-services .content_box.title-box{
        align-items: start;
    }
    div.content_box_wrapper.top-services .content_box.para-box{
        align-items: start;
    }
    div.content_box_wrapper.top-services .content_box.para-box::before{
        content: "";
        width: 5rem;
        height: 0.8rem;
        background-color: rgb(var(--color-primary));
    }
    div.content_box_wrapper.top-services .content_box.para-box p{
        width: 70%;
        font-size: 1rem;
    }
    div.content_box_wrapper.top-services .content_box.tab-box{
        row-gap: 3rem;
    }
    div.content_box_wrapper.top-services .body-slides .swiper-slide{
        min-height: 34rem;
        padding-top: 3rem;
        padding-right: 3rem;
        padding-left: 3rem;
    }
    div.content_box_wrapper.top-services .body-slides .swiper-slide .para-box{
        width: 100%;
    }
}

/* Top-Projects */

div.content_box_wrapper.top-projects{
    row-gap: 5rem;
    margin-top: 15rem;
    overflow-x: hidden;
}
div.content_box_wrapper.top-projects .content_box.title-box{
    align-items: start;
}
div.content_box_wrapper.top-projects .content_box.para-box{
    align-items: center;
}
div.content_box_wrapper.top-projects .content_box.para-box p{
    font-family: "Noto Serif JP", serif;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem;
}
div.content_box_wrapper.top-projects .content_box.card-box{
    padding: 0;
}

div.content_box_wrapper.top-projects .card-box .card-list{
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    overflow-x: scroll;
    scrollbar-width: none;
}
div.content_box_wrapper.top-projects .card-box .card-list::-webkit-scrollbar {
    display: none;
}
div.content_box_wrapper.top-projects .card-box .temp_card{
    width: auto;
    min-width: 15rem;
    flex: 1 1 15rem;
    min-height: 25rem;
}
div.content_box_wrapper.top-projects .card-box .temp_card:first-child{
    margin-left: var(--general-contents-box-padding);
}
div.content_box_wrapper.top-projects .card-box .temp_card:last-child{
    margin-right: var(--general-contents-box-padding);
}

div.content_box_wrapper.top-projects div.link-box{
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 1rem;
}
div.content_box_wrapper.top-projects div.link-box a{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.top-projects{
        row-gap: 5rem;
    }
    div.content_box_wrapper.top-projects .content_box.para-box{
        align-items: start;
    }
    div.content_box_wrapper.top-projects .content_box.para-box::before{
        content: "";
        width: 5rem;
        height: 0.8rem;
        background-color: rgb(var(--color-primary));
    }
    div.content_box_wrapper.top-projects .content_box.para-box p{
        width: 70%;
        font-size: 1rem;
        text-align: left;
    }
    
    div.content_box_wrapper.top-projects .card-box .temp_card{
        width: 70vw;
        height: 25rem;
        flex: 1 0 70vw;
    }
    div.content_box_wrapper.top-projects .card-box .temp_card:first-child{
        margin-left: var(--general-contents-box-padding-smt);
    }
    div.content_box_wrapper.top-projects .card-box .temp_card:last-child{
        margin-right: var(--general-contents-box-padding-smt);
    }

}


/* Top-Recruit */

div.content_box_wrapper.top-recruit{
    row-gap: 4rem;
    margin-top: 15rem;
}
div.content_box_wrapper.top-recruit .title-box{
    display: flex;
    align-items: start;
    margin-bottom: 3rem;
}

div.content_box_wrapper.top-recruit .copy-box{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
}
div.content_box_wrapper.top-recruit .copy-box div{
    position: relative;
    margin-bottom: 1rem;
}
div.content_box_wrapper.top-recruit .copy-box div span{
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    z-index: 50;
}
div.content_box_wrapper.top-recruit .copy-box div.highlight::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -1rem;
    display: inline-block;
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--color-primary));
}

div.content_box_wrapper.top-recruit .link-box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
div.content_box_wrapper.top-recruit .link-box a{
    width: fit-content;
    padding: 0.8rem 5.5rem;
    font-size: 0.8rem;
    font-family: "Noto Serif JP", serif;
    border-radius: 100rem;
    border-style: solid;
    border-color: rgb(var(--color-primary));
    border-width: 0.2rem;
}   
div.content_box_wrapper.top-recruit .voice-box{
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: hidden;
    max-width: none;
    padding: 0;
    margin: 3rem 0;
}
div.content_box_wrapper.top-recruit .voice-box .swiper-container{
    width: 100%;
    height: 100%;
}
div.content_box_wrapper.top-recruit .voice-box .swiper-wrapper{
    transition-timing-function: linear;
    width: 100%;
}
div.content_box_wrapper.top-recruit .voice-box .swiper-slide{
    width: clamp(25rem, 70vw, 35rem);
    min-height: 20rem;
    flex-grow: 0;
    padding: 2rem;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
div.content_box_wrapper.top-recruit .voice-box .swiper-slide::after{
    content: "";
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background-image: url("../img/arrow_right.svg");
    width: 2rem;
    height: 2rem;
    text-align: end;
    filter: invert(100%) sepia(0%) saturate(363%) hue-rotate(165deg) brightness(109%) contrast(110%);
}
div.content_box_wrapper.top-recruit .voice-box .swiper-slide span{
    font-weight: 600;
}
div.content_box_wrapper.top-recruit .voice-box .swiper-slide p{
    font-size: 1.2rem;
    font-weight: 600;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.top-recruit .title-box{
        align-items: start;
        margin-bottom: 0;
    }
    div.content_box_wrapper.top-recruit .copy-box{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        row-gap: 0.3rem;
    }
    div.content_box_wrapper.top-recruit .copy-box div span{
        margin-bottom: 0;
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    div.content_box_wrapper.top-recruit .copy-box div.highlight::after{
        content: " ";
        z-index: 1;
        left: 0;
        bottom: 1.8em;
        bottom: 0rem;
        width: 100%;
        height: 1.2rem;
        background-color: rgb(var(--color-primary));
    }
    div.content_box_wrapper.top-recruit .link-box{
        align-items: end;
    }
    div.content_box_wrapper.top-recruit .link-box a{
        padding: 1rem 3rem;
    }  
    div.content_box_wrapper.top-recruit .voice-box .swiper-slide p{
        font-size: 1rem;
    }
}

/* Top-Links */
div.content_box_wrapper.top-links-smt{
    display: none;
    row-gap: 3rem;
    padding-bottom: 0;
}
div.content_box_wrapper.top-links-smt .content_box{
    position: relative;
    padding-bottom: 2rem;
}

div.content_box_wrapper.top-links-smt .content_box .title-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 2rem;
}
div.content_box_wrapper.top-links-smt .content_box .title-box span{
    font-family: "Noto Serif JP";
    min-width: 50%;
    font-weight: 600;
    font-size: 1.5rem;
    flex-shrink: 0;
}
div.content_box_wrapper.top-links-smt .content_box .title-box::after{
    content: "";
    width: 100%;
    height: 0.2rem;
    background-color: rgb(var(--color-primary));
}
div.content_box_wrapper.top-links-smt .content_box .desc-para{
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom: 3rem;
}
div.content_box_wrapper.top-links-smt .content_box .link-text{
    font-family: "Noto Serif JP", serif;
}
div.content_box_wrapper.top-links-smt .content_box .bg-box{
    position: absolute;
    width: 100%;
    height: 80%;
    z-index: 1;
    left: 0;
    bottom: 0;
    background-color: rgb(var(--color-black));
}
div.content_box_wrapper.top-links-smt .content_box .bg-box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    opacity: 0.7;
}
div.content_box_wrapper.top-links-smt .content_box .bg-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
div.content_box_wrapper.top-links-smt .content_box .bg-box::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.top-links-smt{
        display: flex;
    }
}


/* --- Company --- */
/* Temp2 Company Top */

div.content_box_wrapper.temp2.company-top-body{
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp2.company-top-body .content_box{
    padding: 0;
}

div.content_box_wrapper.temp2.company-top-body .card-box .card-list{
    display: flex;
    flex-direction: row;
    column-gap: 2.5rem;
    row-gap: 2.5rem;
    overflow-x: scroll;
    scrollbar-width: none;
    padding: 4rem 0;

}
div.content_box_wrapper.temp2.company-top-body .card-box .card-list::-webkit-scrollbar {
    display: none;
}

div.content_box_wrapper.temp2.company-top-body .card-box .link-card{
    width: auto;
    min-width: 20rem;
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    align-items: center;
    padding: 5rem 3rem;
    border-radius: 2rem;
    border: solid 0.1rem rgba(var(--color-white-gray), 0.1);
    box-shadow: 0 0 0rem rgba(var(--color-primary), 1);
    transition: box-shadow 0.2s ease-in-out;
}
div.content_box_wrapper.temp2.company-top-body .card-box .link-card:hover{
    box-shadow: 0 0 3rem rgba(var(--color-primary), 1);

}
div.content_box_wrapper.temp2.company-top-body .card-box .link-card img{
    width: 4rem;
}
div.content_box_wrapper.temp2.company-top-body .card-box .link-card div.separator{
    width: 100%;
    height: 0.1rem;
    background-color: rgb(var(--color-white));
}
div.content_box_wrapper.temp2.company-top-body .card-box .link-card {
    font-family: "Noto Serif JP";
    font-size: 1.4rem;
}
div.content_box_wrapper.temp2.company-top-body .card-box .link-card h2{
    font-family: "Noto Serif JP";
    font-weight: 700;
}

div.content_box_wrapper.temp2.company-top-body .card-box .link-card:first-child{
    margin-left: var(--general-contents-box-padding);
}div.content_box_wrapper.temp2.company-top-body .card-box .link-card:last-child{
    margin-right: var(--general-contents-box-padding);
}

div.content_box_wrapper.temp2.company-top-body div.link-box{
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 1rem;
}
div.content_box_wrapper.temp2.company-top-body div.link-box a{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp2.company-top-body .card-box .card-list{
        flex-direction: column;
        padding: 0 var(--general-contents-box-padding-smt);
    }
    div.content_box_wrapper.temp2.company-top-body .card-box .link-card:first-child{
        margin-left: 0;
    }
    div.content_box_wrapper.temp2.company-top-body .card-box .link-card:last-child{
        margin-right: 0;
    }
}

/* Temp1 Company Philosophy */


div.content_box_wrapper.temp1.company-philosophy-body {
    --line-radius: 2rem;
    --line-width: 0.3rem;
    --line-area-width: 3rem;
    --paragraph-marker-width: 1.5rem;
    --paragraph-indent: 1.5rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp1.company-philosophy-body h3{
    display: flex;
    column-gap: var(--paragraph-indent);
    font-size: var(--paragraph-marker-width);
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
}
div.content_box_wrapper.temp1.company-philosophy-body h3::before{
    content: "";
    height: var(--paragraph-marker-width);
    width: var(--paragraph-marker-width);
    flex-shrink: 0;
    transform: translateY(0.2rem);

    border-radius: 100rem;
    background-color: rgb(var(--color-primary));
    display: inline-block;
}
div.content_box_wrapper.temp1.company-philosophy-body .heading-en{
    font-size: 1.7rem;
}
div.content_box_wrapper.temp1.company-philosophy-body .heading-en::before{
    transform: translateY(0.35rem);
}

div.content_box_wrapper.temp1.company-philosophy-body p{
    display: flex;
    column-gap: var(--paragraph-indent);
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 1.1rem;
}
div.content_box_wrapper.temp1.company-philosophy-body p::before{
    content: "";
    flex-shrink: 0;
    width: var(--paragraph-marker-width);
    height: 100%;
    display: inline-block;
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box .paragraph{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    margin-bottom: 1rem;
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box{
    position: relative;
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box::before{
    content: "";
    flex-shrink: 0;
    width: var(--line-area-width);
    height: 100%;
    margin-right: 0.5rem;
}

div.content_box_wrapper.temp1.company-philosophy-body .line-box h2{
    font-size: var(--line-area-width);
    font-family: "Noto Sans JP";
    font-family: "Barlow";
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box.line-top::after{
    content: "";
    width: var(--line-area-width);
    height: calc(var(--line-area-width) * 2);
    border-color: rgb(var(--color-primary));
    position: absolute;
    top: 50%;
    left: 0;
    border-top-left-radius: var(--line-radius);
    border-left-width: var(--line-width);
    border-top-width: var(--line-width);
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box.line-middle .paragraph{
    padding-bottom: 5rem;
}

div.content_box_wrapper.temp1.company-philosophy-body .line-box.line-middle::after{
    content: "";
    width: var(--line-area-width);
    height: 100%;
    border-color: rgb(var(--color-primary));
    position: absolute;
    top: 0;
    left: 0;
    border-left-width: var(--line-width);
}
div.content_box_wrapper.temp1.company-philosophy-body .line-box.line-end::after{
    content: "";
    width: var(--line-area-width);
    height: calc(var(--line-area-width) * 2);
    border-color: rgb(var(--color-primary));
    position: absolute;
    bottom: 50%;
    left: 0;
    border-bottom-left-radius: var(--line-radius);
    border-left-width: var(--line-width);
    border-bottom-width: var(--line-width);
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp1.company-philosophy-body {
        --line-radius: 1rem;
        --line-width: 0.3rem;
        --line-area-width: 2rem;
        --paragraph-marker-width: 1.2rem;
        --paragraph-indent: 1rem;
    }
}

/* Company Overview */
div.content_box_wrapper.temp1.company-overview-body {
    row-gap: 3rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp1.company-overview-body .overview-box {
    display: flex;
    flex-direction: column;
    row-gap: 6rem;
    padding: 8rem 10rem;
}
div.content_box_wrapper.temp1.company-overview-body .overview-box table {
    text-align: left;
    border-collapse: separate;
}
div.content_box_wrapper.temp1.company-overview-body .overview-box th,
div.content_box_wrapper.temp1.company-overview-body .overview-box td {
    font-family: "Noto Serif JP";
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 1.5rem;
}

div.content_box_wrapper.temp1.company-overview-body .overview-box th {
    width: 25%;
    padding-right: 2rem;
}
div.content_box_wrapper.temp1.company-overview-body .overview-box table tr:last-of-type th,
div.content_box_wrapper.temp1.company-overview-body .overview-box table tr:last-of-type td {
    padding-bottom: 0;
}

div.content_box_wrapper.temp1.company-overview-body .access-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
div.content_box_wrapper.temp1.company-overview-body .access-box iframe{
    width: 100%;
    height: 30rem;
}
div.content_box_wrapper.temp1.company-overview-body .access-box p{
    font-family: "Noto Serif JP";
    font-size: 1rem;
    line-height: 1.1rem;
    font-weight: 600;
}

@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp1.company-overview-body .overview-box {
        display: flex;
        flex-direction: column;
        row-gap: 3rem;
        padding: 3rem 2rem;
    }
    div.content_box_wrapper.temp1.company-overview-body .overview-box th,
    div.content_box_wrapper.temp1.company-overview-body .overview-box td {
        font-size: 0.8rem;
    }
    div.content_box_wrapper.temp1.company-overview-body .access-box iframe{
        height: 20rem;
    }
    div.content_box_wrapper.temp1.company-overview-body .access-box p{
        font-size: 0.8rem;
    }
}

/* Company CEO Message */


div.content_box_wrapper.temp1.company-ceo-body {
    row-gap: 3rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp1.company-ceo-body .content_box {
    display: flex;
    flex-direction: column;
    column-gap: clamp(2rem, 13vw, 10rem);
}
div.content_box_wrapper.temp1.company-ceo-body .name-box{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: end;

    row-gap: 0.5rem;
    padding-top: 10rem;
}
div.content_box_wrapper.temp1.company-ceo-body .name-box span{
    font-family: "Noto Serif JP";
    font-size: 1rem;
}
div.content_box_wrapper.temp1.company-ceo-body .name-box div.name{
    position: relative;
}
div.content_box_wrapper.temp1.company-ceo-body .name-box div.name span{
    position: relative;
    font-size: 2rem;
    font-family: "Noto Serif JP", sans-serif;
    font-weight: 600;
    margin-bottom: -0.2rem;
    z-index: 50;
}
div.content_box_wrapper.temp1.company-ceo-body .name-box div.name:before{
    content: "";
    position: absolute;
    bottom: 0.2rem;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0.2rem;
    background-color: rgb(var(--color-primary));
}
div.content_box_wrapper.temp1.company-ceo-body .msg-box{
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
div.content_box_wrapper.temp1.company-ceo-body .msg-box p{
    font-size: 1rem;
    font-family: "Noto Serif JP", serif;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp1.company-ceo-body .content_box {
        display: flex;
        align-items: end;
        row-gap: 3rem;
        column-gap: clamp(2rem, 13vw, 10rem);
    }
    div.content_box_wrapper.temp1.company-ceo-body .name-box{
        align-items: end;
        padding-top: 4rem;
    }
    div.content_box_wrapper.temp1.company-ceo-body .name-box .name-wrapper{
        display: flex;
        align-items: end;
        flex-direction: column;
    }
    div.content_box_wrapper.temp1.company-ceo-body .name-box span{
        font-size: 1rem;
    }
}

/* ---Recruit--- */
/* Recruit Top */
div.content_box_wrapper.recruit-top-title {
    height: 90vh;
    min-height: 30rem;
    position: relative;
    z-index: 20;
}
@keyframes recruit-top-title-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

div.content_box_wrapper.recruit-top-title .content_box{
    display: flex;
    position: relative;
    z-index: 2;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: recruit-top-title-animation 1s ease-in-out forwards;
    animation-delay: 0.5s;
}
div.content_box_wrapper.recruit-top-title .content_box h1,
div.content_box_wrapper.recruit-top-title .content_box span{
    position: relative;
    z-index: 100;
    font-family: "Barlow", sans-serif;
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    line-height: 6.5rem;
}
div.content_box_wrapper.recruit-top-title .content_box span::after{
    content: "";
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    width: 100%;
    height: 0.8rem;
    background-color: rgb(var(--color-primary));
}
div.content_box_wrapper.recruit-top-title .bg-video-wrapper{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
}
div.content_box_wrapper.recruit-top-title .bg-video-wrapper video{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transform: translate(-50%, -50%);
}
div.content_box_wrapper.recruit-top-title .bg-video-wrapper::before{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
}
div.content_box_wrapper.recruit-top-title .bg-video-wrapper::after{
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
}
div.content_box_wrapper.recruit-top-para1{
    height: 40rem;
    margin-bottom: 7rem;
}
div.content_box_wrapper.recruit-top-para1 .content_box{
    align-items: center;
    row-gap: 0.5rem;
}
div.content_box_wrapper.recruit-top-para1 .content_box p{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 3.2rem;
}
div.content_box_wrapper.recruit-top-list1{
    margin-bottom: 9rem;
}
div.content_box_wrapper.recruit-top-list1 .title-box{
    align-items: center;
    margin-bottom: 7rem;
}
div.content_box_wrapper.recruit-top-list1 .title-box h2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
div.content_box_wrapper.recruit-top-list1 .title-box span{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    text-align-last: center;
}
div.content_box_wrapper.recruit-top-list1 .list-wrapper .list-box{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    padding: 4rem 2rem;
    padding-bottom: 10rem;
    padding-left: 0;
    border: 0.3rem solid rgb(var(--color-primary));
    border-radius: 1rem;
}
div.content_box_wrapper.recruit-top-list1 .list-box span.list-title{
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 3.5rem;
    flex: 0 0;
    translate: -2rem 0;
}
div.content_box_wrapper.recruit-top-list1 .list-box .list-row{
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
}
div.content_box_wrapper.recruit-top-list1 .list-box .list-item{
    display: grid;
    row-gap: 1rem;
    grid-template-columns: 2rem auto;
    grid-template-rows: auto auto;
    width: 100%;
}

div.content_box_wrapper.recruit-top-list1 .list-box .list-item h3,
div.content_box_wrapper.recruit-top-list1 .list-box .list-item span{
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Barlow", sans-serif;
    font-feature-settings: "palt" 1;
    font-weight: 600;
    font-size: 1.5rem;
}
div.content_box_wrapper.recruit-top-list1 .list-box .list-item span{
    grid-column: 1/2;
    grid-row: 1/3;
}
div.content_box_wrapper.recruit-top-list1 .list-box .list-item p{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    padding-left: 0.1rem;
}
div.content_box_wrapper.recruit-top-list1 .smt-bg-animation-wrapper{
    display: none;
}

div.content_box_wrapper.recruit-top-card-title{
    min-height: auto;
}
div.content_box_wrapper.recruit-top-card-title .content_box{
   row-gap: 0;
}
div.content_box_wrapper.recruit-top-card-title h2{
    font-family: "Barlow", serif;
    font-weight: 700;
    font-size: 3rem;
}
div.content_box_wrapper.recruit-top-card-title p{
    font-family: "Barlow", serif;
    font-weight: 600;
    font-size: 1.5rem;
}
div.content_box_wrapper.recruit-top-card{
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 15rem;
}
div.content_box_wrapper.recruit-top-card .content_box{
    padding: 0;
}
div.content_box_wrapper.recruit-top-card .temp_card{
    width: auto;
    min-width: 20rem;
    flex: 1 1 20em;
    min-height: 28rem;
}
div.content_box_wrapper.recruit-top-card .temp_card .card_contents h3{
    font-size: 1.4rem;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
}
div.content_box_wrapper.recruit-top-card .temp_card .card_contents p{
    font-size: 1.2rem;
}

div.content_box_wrapper.recruit-top-card .temp_card:hover .hover_overlay{
    right: 100%;
}
div.content_box_wrapper.recruit-top-card .card-box .card-list{
    display: flex;
    flex-direction: row;
    column-gap: 2.5rem;
    row-gap: 2.5rem;
    overflow-x: scroll;
    scrollbar-width: none;
}
div.content_box_wrapper.recruit-top-card .card-box .card-list::-webkit-scrollbar {
    display: none;
}
div.content_box_wrapper.recruit-top-card .card-box .temp_card .hover_overlay:after{
    background-image: none;
}
div.content_box_wrapper.recruit-top-card .card-box .temp_card:first-child{
    margin-left: var(--general-contents-box-padding);
}
div.content_box_wrapper.recruit-top-card .card-box .temp_card:last-child{
    margin-right: var(--general-contents-box-padding);
}

@media screen and (max-width: 800px) {
    div.recruit-top-bg-wrapper{
        position: relative;
    }
    div.recruit-top-bg-wrapper::before{
        content: "";
        height: 100%;
        position: absolute;
        z-index: 30;
        left: calc(var(--general-contents-box-padding-smt) + 0.5rem);
        border-left: 0.3rem solid rgb(var(--color-primary));
        opacity: 0.6;
        border-image-source: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(var(--color-primary), 1) 5%, rgba(var(--color-primary), 1) 95%, rgba(0, 0, 0, 0) 100%);
        border-image-slice: 1;
    }
    div.recruit-top-bg-wrapper .content_box_wrapper{
        background-color: rgba(var(--color-black), 00);
    }
    div.content_box_wrapper.recruit-top-title {
        height: 20rem;
    }
    div.content_box_wrapper.recruit-top-title .content_box h1,
    div.content_box_wrapper.recruit-top-title .content_box span{
        font-size: clamp(3rem, 13vw, 4.5rem);
        line-height: 4.5rem;
    }
    div.content_box_wrapper.recruit-top-para1{
        height: 20rem;
        align-items: end;
        margin-bottom: 3rem;
    }
    div.content_box_wrapper.recruit-top-title .content_box span::after{
        display: none;
    }
    div.content_box_wrapper.recruit-top-para1 .content_box{
        align-items: start;
        width: 80%;
    }
    div.content_box_wrapper.recruit-top-para1 .content_box::before{
        content: "";
        display: block;
        width: 5rem;
        height: 0.8rem;
        background-color: rgb(var(--color-primary));
        margin-bottom: 1rem;
    }
    div.content_box_wrapper.recruit-top-para1 .content_box p{
        font-size: 0.9rem;
        line-height: normal;
    }
    div.content_box_wrapper.recruit-top-list1{
        margin-bottom: 5rem;
    }
    div.content_box_wrapper.recruit-top-list1 .title-box h2{
        justify-content: start;
    }
    div.content_box_wrapper.recruit-top-list1 .title-box span{
        font-size: clamp(1rem, 6vw, 1.5rem);
    }
    div.content_box_wrapper.recruit-top-list1 .title-box{
        align-items: center;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    div.content_box_wrapper.recruit-top-list1 .list-box span.list-title{
        display: none;
    }
    div.content_box_wrapper.recruit-top-list1 .list-wrapper .list-box{
        border: none;
        padding: 0;
        padding-left: 1.5rem;
        margin-bottom: 8rem;
    }
    div.content_box_wrapper.recruit-top-list1 .list-box .list-row{
        row-gap: 5rem;
    }
    div.content_box_wrapper.recruit-top-list1 .list-box .list-item{
        row-gap: 2rem;
		column-gap: 0.5rem
        grid-template-columns: 1.5rem auto;
    }
    div.content_box_wrapper.recruit-top-list1 .list-box .list-item h3,
    div.content_box_wrapper.recruit-top-list1 .list-box .list-item span{
        font-size: 1.2rem;
    }
    div.content_box_wrapper.recruit-top-list1 .list-box .list-item p{
        font-size: 1rem;
    }
    div.content_box_wrapper.recruit-top-list1 .smt-bg-animation-wrapper{
        display: flex;
        overflow-x: hidden;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    div.content_box_wrapper.recruit-top-list1 .smt-bg-animation-wrapper div{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    div.content_box_wrapper.recruit-top-list1 .smt-bg-animation-wrapper span{
        --recruit-top-smt-bg-animation-width: 20rem;
        font-family: "Barlow", sans-serif;
        font-weight: 600;
        height: 2rem;
        line-height: 2rem;
        font-size: 2rem;
        opacity: 0.08;
        animation: recruit-top-smt-bg-animation 10s linear infinite;
        user-select: none;
    }
    @keyframes recruit-top-smt-bg-animation {
        0% {
            transform: translateX(calc(100% + var(--recruit-top-smt-bg-animation-width)));
        }
        100% {
            transform: translateX(calc(0% - var(--recruit-top-smt-bg-animation-width)));
        }
        
    }

    div.content_box_wrapper.recruit-top-card-title .content_box{
        row-gap: 0;
        align-items: end;
    }
    div.content_box_wrapper.recruit-top-card-title h2{
        font-family: "Barlow", serif;
        font-weight: 600;
        font-size: 2rem;
    }
    div.content_box_wrapper.recruit-top-card-title p{
        font-family: "Barlow", serif;
        font-weight: 600;
        font-size: 1.5rem;
    }
    div.content_box_wrapper.recruit-top-card{
        margin-top: 3rem;
        margin-bottom: 15rem;
    }
    div.content_box_wrapper.recruit-top-card .card-box .card-list{
        padding: 0 var(--general-contents-box-padding-smt);
    }
    div.content_box_wrapper.recruit-top-card .card-box .temp_card{
        flex: 1 0 80vw;
        min-width: auto;
        max-width: 20rem;
        height: 25rem;
    }
    div.content_box_wrapper.recruit-top-card .card-box .temp_card:first-child{
        margin-left: 0;
    }
    div.content_box_wrapper.recruit-top-card .card-box .temp_card:last-child{
        margin-right: 0;
    }
    div.content_box_wrapper.recruit-top-card .temp_card .card_contents{
        margin-bottom: 0;
        padding-left: 2rem;
    }
}


/* Temp1 Recruit Info*/
div.content_box_wrapper.temp1.recruit-info-body {
    row-gap: 6rem;
    margin-bottom: 10rem;
}

div.content_box_wrapper.temp1.recruit-info-body h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: "Noto Serif JP";
}

div.content_box_wrapper.temp1.recruit-info-body h2::before{
    content: "＜";
    user-select: none;
}
div.content_box_wrapper.temp1.recruit-info-body h2::after{
    content: "＞";
    user-select: none;
}

div.content_box_wrapper.temp1.recruit-info-body p, 
div.content_box_wrapper.temp1.recruit-info-body li{
    color: rgb(var(--color-white-gray));
    font-size: 1rem;
    font-weight: 600;
    font-family: "Noto Serif JP";
}
div.content_box_wrapper.temp1.recruit-info-body ul li::before{
    font-weight: 300;
}    

div.content_box_wrapper.recruit-info-link{
    min-height: auto;
}
div.content_box_wrapper.recruit-info-link-smt{
    min-height: auto;
}  
@media screen and (max-width: 800px) {
    div.content_box_wrapper.recruit-info-link{
        display: none;
    }
}

/* Temp2 Members Info */
div.content_box_wrapper.temp2.members-info-body {
    row-gap: 5rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp2.members-info-body .content_box {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
div.content_box_wrapper.temp2.members-info-body .name_box {
    min-width: 20rem;
    width: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}
div.content_box_wrapper.temp2.members-info-body .name_box h2 {
    font-size: 2rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
div.content_box_wrapper.temp2.members-info-body .name_box .separator {
    width: 100%;
    height: 4px;
    background-color: rgb(var(--color-primary));
}
div.content_box_wrapper.temp2.members-info-body .name_box span{
    font-size: 1rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
}
div.content_box_wrapper.temp2.members-info-body .content_box ul li {
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
}
    
div.content_box_wrapper.temp2.members-info-body .content_box a{
    width: fit-content;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 0.8rem;
}



@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp2.members-info-body .name_box {
        width: 100%;
    }
}

/* Temp1 Recruit Team */
div.content_box_wrapper.temp1.recruit-team-section-header{
    min-height: auto;
    padding: 5rem 0;
}
div.content_box_wrapper.temp1.recruit-team-section-header .content_box{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.content_box_wrapper.temp1.recruit-team-section-header .content_box h2{
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
}

div.content_box_wrapper.temp1.recruit-team-members {
    row-gap: 8rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp1.recruit-team-members .content_box {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}
div.content_box_wrapper.temp1.recruit-team-members .name_box {
    min-width: 20rem;
    width: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}
div.content_box_wrapper.temp1.recruit-team-members .name_box h3{
    font-size: 1.6rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
}
div.content_box_wrapper.temp1.recruit-team-members .name_box .separator {
    width: 100%;
    height: 4px;
    background-color: rgb(var(--color-primary));
}
div.content_box_wrapper.temp1.recruit-team-members .name_box span{
    font-size: 1rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
}
div.content_box_wrapper.temp1.recruit-team-members .content_box ul {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}
div.content_box_wrapper.temp1.recruit-team-members .content_box ul li {
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
}

div.content_box_wrapper.temp1.recruit-team-interview-box{
    --iv-box-side-padding: 1.5rem;
    --iv-box-header-overwidth: 1rem;
    padding: 0 var(--iv-box-side-padding);
    margin-bottom: 12rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box{
    padding: 5rem calc(var(--general-contents-box-padding) - var(--iv-box-side-padding));
    border-radius: 1.3rem;
    background-color: rgba(var(--color-white-gray), 0.2);
    padding-bottom: 10rem;
    row-gap: 7rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-wrapper{
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group h3{
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: 1.6rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box::before,
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box::after{
    content: "";
    position: relative;
    display: block;
    width: calc(100% + var(--iv-box-header-overwidth));
    left: calc(-1 * var(--iv-box-header-overwidth) / 2);
    height: 1px;
    background-color: rgb(var(--color-white));
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 1.2rem;
    margin-bottom: 1.5rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box .with-question{
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box .with-question::before{
    content: "Q,";
    flex: 0 0;
    font-family: "Noto Serif JP";
    font-weight: 600;
    font-size: 1.6rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group p,
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group ul li{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}
div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group:nth-child(1) .header-box::before {
    content: none;
}



div.content_box_wrapper.temp1.recruit-team-interview {
    row-gap: 7rem;
    margin-bottom: 12rem;
}
div.content_box_wrapper.temp1.recruit-team-interview .content_box {
    row-gap: 1.5rem;
}
div.content_box_wrapper.temp1.recruit-team-interview .content_box h3,
div.content_box_wrapper.temp1.recruit-team-interview .content_box p,
div.content_box_wrapper.temp1.recruit-team-interview .content_box span{
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1rem;
}
div.content_box_wrapper.temp1.recruit-team-interview .content_box p{
    color: rgb(var(--color-white-gray));
}
div.content_box_wrapper.temp1.recruit-team-interview .content_box h3 {
    font-size: 1.5rem;
    font-weight: 600;
}
div.content_box_wrapper.recruit-team-link{
    min-height: auto;
}
div.content_box_wrapper.recruit-team-link-smt{
    min-height: auto;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp1.recruit-team-members .name_box {
        width: 100%;
        min-width: auto;
    }
    div.content_box_wrapper.temp1.recruit-team-interview-box .content_box{
        padding: 3rem 2rem;
        padding-bottom: 10rem;
    }
    div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group h3,
    div.content_box_wrapper.temp1.recruit-team-interview-box .content_box .iv-group .header-box .with-question::before{
        font-size: 1.2rem;
    }
    div.content_box_wrapper.recruit-team-link{
        display: none;
    }
}

/* Temp2 Services */
div.content_box_wrapper.temp2.services-body{
    row-gap: 8rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.temp2.services-body .content_box {
    display: flex;
    flex-direction: row;
    column-gap: clamp(2rem, 8vw, 6rem);
}
div.content_box_wrapper.temp2.services-body .content_box.reverse {
    flex-direction: row-reverse;
}
div.content_box_wrapper.temp2.services-body .content_box .img-box{
    width: 30%;
    height: 30rem;
    min-width: 10rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1.5rem;
}
div.content_box_wrapper.temp2.services-body .content_box .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
div.content_box_wrapper.temp2.services-body .content_box .desc-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 1.5rem;
}
div.content_box_wrapper.temp2.services-body .content_box .desc-box h2{
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 1.8rem;
}
div.content_box_wrapper.temp2.services-body .content_box .desc-box p{
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
}
div.content_box_wrapper.temp2.services-body .content_box .desc-box a{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 0.8rem;
    margin-top: 1.5rem;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.temp2.services-body .content_box{
        flex-direction: column;
        row-gap: 2.5rem;
    }
    div.content_box_wrapper.temp2.services-body .content_box.reverse {
        flex-direction: column;
    }
    div.content_box_wrapper.temp2.services-body .content_box .img-box{
        width: 100%;
        height: 21rem;
        min-height: auto;
        min-width: auto;
        border: none;
    }
    div.content_box_wrapper.temp2.services-body .content_box .desc-box{
        flex-direction: column;
        justify-content: center;
        row-gap: 2.5rem;
        padding: 0 1.2rem;
    }
    div.content_box_wrapper.temp2.services-body .content_box .desc-box h2{
        font-weight: 400;
        font-size: 1.5rem;
    }
    div.content_box_wrapper.temp2.services-body .content_box .desc-box a{
        margin-top: 0;
    }
}

/* Contact */

div.content_box_wrapper.contact-body{
    min-height: 100lvh;
    padding-bottom: 10rem;
    position: relative;
    flex-direction: row;
}
div.content_box_wrapper.contact-body .content_box{
    display: flex; 
    flex-direction: row;
    column-gap: clamp(2rem, -10.857rem + 22.86vw, 5rem);
}

div.content_box_wrapper.contact-body .content_box .header-box{
    height: 100%;
    flex: 1 1 50%;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    max-width: var(--general-max-width);
    row-gap: 1rem;
    justify-content: start;
    align-items: start;
    z-index: 50;
}

div.content_box_wrapper.contact-body .content_box .header-box .title_box{
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 0.3rem;
}

div.content_box_wrapper.contact-body .content_box .header-box h1.title_en{
    position: relative;
}

div.content_box_wrapper.contact-body .content_box .header-box h1.title_en span{
    font-family: "Noto Serif JP";
    color: rgb(var(--color-white));
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    padding-left: 0.1rem;
    z-index: 50;
}
div.content_box_wrapper.contact-body .content_box .header-box h1.title_en::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    z-index: 2;
    background-color: rgb(var(--color-primary));
}

div.content_box_wrapper.contact-body .content_box .header-box h1.title_ja{
    color: rgb(var(--color-white));
    font-size: 1.8rem;
    font-family: "Noto Serif JP";
    font-weight: 600;
}

div.content_box_wrapper.contact-body .content_box .header-box p{
    color: rgb(var(--color-white));
    font-size: 1rem;
    font-family: "Noto Serif", serif;
    padding-left: 0.1rem;
    z-index: 2;
}

div.content_box_wrapper.contact-body .content_box .form-box{
    flex: 1 1 50%;
}

div.content_box_wrapper.contact-body .content_box .form-box form{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
div.content_box_wrapper.contact-body .content_box .form-box .form-group{
    display: flex;
    flex-direction: column;
    row-gap: 0.3rem;
}
div.content_box_wrapper.contact-body .content_box .form-box .form-group label{
    font-family: "Noto Serif JP";
    font-size: 0.8rem;
    font-weight: 600;
}
div.content_box_wrapper.contact-body .content_box .form-box .form-group input,
div.content_box_wrapper.contact-body .content_box .form-box .form-group textarea{
    width: 100%;
    padding: 0.4rem 1rem;
    font-family: "Noto Serif JP";
    font-size: 1rem;
    font-weight: 400;
    border-radius: 0.8rem;
    border: 0.1rem solid rgb(var(--color-primary));
	color: rgb(var(--color-black));
    background-color: rgb(var(--color-white));
}
div.content_box_wrapper.contact-body .content_box .form-box .form-group.submit-box input{
    font-family: "Noto Serif JP";
    font-size: 0.6rem;
    font-weight: 600;
    width: fit-content;
    padding: 0.5rem 3.5rem;
    margin-top: 2rem;
    border-radius: 100rem;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-white));
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
div.content_box_wrapper.contact-body .content_box .form-box .form-group.submit-box input:hover{
    background-color: rgb(var(--color-white));
    color: rgb(var(--color-primary));
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.contact-body{
        flex-direction: column;
        justify-content: start;
    }
    div.content_box_wrapper.contact-body .content_box{
        flex-direction: column;
        row-gap: 3rem;
        justify-content: start;
    }
}

/* Projects top */
div.content_box_wrapper.projects-top-body{
    margin-bottom: 10rem;
}
div.content_box_wrapper.projects-top-body .content_box.tab-box{
    row-gap: 2rem;
}
div.content_box_wrapper.projects-top-body .body-slides .card-grid.swiper-slide{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 2rem;
}
div.content_box_wrapper.projects-top-body div.proj-card{
    display: flex;
    flex-direction: column;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    overflow: hidden;
    background: rgb(var(--color-dark-gray));
}
div.content_box_wrapper.projects-top-body div.proj-card .card-contents{
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1rem 3rem 1rem;
}
div.content_box_wrapper.projects-top-body div.proj-card img.thumb{
    height: 9rem;
    width: 100%;
    object-fit: cover;
}
div.content_box_wrapper.projects-top-body div.proj-card .c-header{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
div.content_box_wrapper.projects-top-body div.proj-card .c-header::after{
    content: "";
    width: 100%;
    height: 2px;
    background-color: rgb(var(--color-white));
    margin-bottom: 1rem;
}
div.content_box_wrapper.projects-top-body div.proj-card .c-header .category{
    font-family: "Noto Serif JP";
    font-weight: 600;
    font-size: 0.9rem;
}
div.content_box_wrapper.projects-top-body div.proj-card .c-header .title{
    font-family: "Noto Serif JP";
    font-weight: 600;
    font-size: 1.2rem;
    min-height: 3rem;
}

div.content_box_wrapper.projects-top-body div.proj-card .c-body p{
    font-family: "Noto Serif JP";
    font-weight: 500;
    font-size: 1rem;
}


@media screen and (max-width: 800px) {
    div.content_box_wrapper.projects-top-body .content_box.tab-box{
        row-gap: 3rem;
    }
    div.content_box_wrapper.projects-top-body .body-slides .card-grid.swiper-slide{
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }

}

/* Project Description */
div.content_box_wrapper.project-desc-header .content_box{
    align-items: start;
}
div.content_box_wrapper.project-desc-header .content_box span{
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
}
div.content_box_wrapper.project-desc-header .content_box h1{
    font-size: 2rem;
    text-align: start;
}

div.content_box_wrapper.project-desc-body{
    row-gap: 3rem;
    margin-bottom: 10rem;
}
div.content_box_wrapper.project-desc-body .content_box.copy-box span{
    font-family: "Noto Serif JP", serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
div.content_box_wrapper.project-desc-body .content_box h2{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
}
div.content_box_wrapper.project-desc-body .content_box p,
div.content_box_wrapper.project-desc-body .content_box li{
    font-family: "Noto Serif JP", serif;
    font-size: 1.2rem;
    font-weight: 400;
}
@media screen and (max-width: 800px) {
    div.content_box_wrapper.project-desc-header .content_box{
        align-items: start;
        row-gap: 1rem;
    }
    div.content_box_wrapper.project-desc-header .content_box h1{
        font-size: 1.5rem;
    }
    div.content_box_wrapper.project-desc-body .content_box.copy-box span{
        font-size: 1.3rem;
    }

}