@charset "UTF-8";
/* common */

html{
    font-size: 62.5%;
}

body{
    font-family: 
        "Zen Antique",
        "Noto Sans JP",
        Arial;
    font-optical-sizing: auto;
    font-weight: 400;
    color: #2F2F2F;
    font-style: normal; 
    background-color: white;
    line-height: 1.5;
    overflow-x: hidden;
    
}

.article_header{
    overflow: hidden;
}

img{
    max-width: 100%;
    height: auto;
}

.topic{
    color: #141414;
    font-family: "Zen Antique";
    font-size: 2rem;
    display: block;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
}

.topic::after {
  content: "";
  width: 100%;
  height: 1px;
  top: 50%;
  left: 50%;
  background-color: #000;
  position: absolute;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.topic_span {
  padding: 30px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  z-index: 3;
}


/*==========================
fadeIn
==========================*/

.fadeIn{
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated{
    transform: translate(0, 0);
    opacity: 1;
}

/* header */

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_topic,
.nav_logo{
    display: block;
    width: 110px;
}

.header_topic{
    margin: 10px 0px 10px 20px;
}

/* nav */

.nav_btn,
.header_btn{
    width: 30px;
}

.nav_btn,
.header_btn{
    position: absolute;
    top: 0;
    right: 0;
    margin: 15px 23px 0px 0px;
}

.nav{
    background: rgba(255, 253, 253, 0.89);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav_header{
    padding: 10px 6.4% 16px;
}


.nav_list{
    padding: 83px 0px 0px 0px ;
}

.nav_item {
    margin-top: 22px;
    color: #2F2F2F;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 2.4px;
    display: flex;
    align-items: center;
}

.nav_item::before{
    content: '';
    display: inline-block;
    width: 32px;
    height: 2px;
    background-color: #3778bb;
    margin-right: 16px;
}

a{
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

.nav.active{
    transform: translateX(0);
}

.section{
    text-align: center;
}

/* .header PC */
@media screen and (min-width:769px) {

    .brsp{
        display: none;
    }

    .topic{
        font-size: 4rem;
        margin-top: 50px;
    }

    .header {
        max-width: 1440px;
        height: 80px;
        padding: 20px 60px 20px 20px;
    }

    .header_topic {
        width: 150px;
        left: 45px;
    }

    .nav{
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translateX(0);
    }

    .nav_header {
        display: none;
    }

    .nav_list {
        padding: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
    } 

    .nav_item{
        margin-top: 0;
        font-size: 1.6rem;
    }

    .nav_item::before{
        width: 12px;
        height: 2px;
        margin: 0px 16px;
    }

    .header_btn{
        display: none;
    }

    .nav_btn{
        display: none;
    }

    .background_txt{
        font-size: 19rem;
        top: -200px;
        margin-bottom: -200px;
    }

}

/* pc 769px */

/* ==============================
main visual
================================= */

.mainVisual {
    width: 100%;
    height: calc(100vh - 55px);
    top: 55px;

    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
}


.mv__topic {
    position: absolute;
    top: 33%;
    left: 0%;
    transform: translatey(-60%);
    z-index: 2;
    background: #3779bb63;
    padding: 44px 28px 54px 60px;
    box-sizing: border-box;
    width: 100%;
    max-width: 324px;
    position: absolute;
}

.mv__topic ::before{
    content: '';
    width: 3px;
    height: 116px;
    background-color: #FFF;
    position: absolute;
    top: -11px;
    left: -15px;
}

.copy__en {
    color: #FFF;
    font-family: var(--font-en);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -2px;

    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform; /* パフォーマンス最適化 */

}

.copy__ja {
    color: #fff;
    font-family: var(--font-ja);
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: -1.28px;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform; /* パフォーマンス最適化 */
}

.copy__ja.visible {
    opacity: 1;
    transform: translateY(0);
}

.visible {
    opacity: 1;
}

.article{
    margin-top: 16px;
    background-image: url(../images/bg-main-sp.png);
    height: 400px;
    background-repeat: no-repeat;
    background-position: left 16px bottom;
    background-size: cover;
    position: relative;

}



@media screen and (min-width: 769px) {
    .mainVisual {
        width: 100%;
        height: calc(100vh - 80px);
        top: 80px;
    }

    .mainVisual::after {
        height: calc(100vh - 80px);
        top: 80px;
        clip-path: polygon(15% 100%, 100% 15%, 100% 100%, 0 100%);
    }

    .mv__topic {
        top: 27%;
        left: 0%;
        transform: translatey(-60%);
        padding: 56px 70px 70px 220px;
        max-width: 1018px;
    }

    .mv__topic ::before{
        width: 3px;
        height: 182px;
        top: 20px;
        left: -39px;
    }

    .copy__en {
        font-size: 9rem;
        letter-spacing: -4px;
    }

    .copy__ja {
        font-size: 6rem;
        letter-spacing: -2.56px;
        margin-top: -20px;
    }

     .article {
        height: 515px;
        margin: 0;
        background-image: url(../images/bg-main-pc.png);
        background-position: left 140px bottom;
    }
}


/* message */

.section_massage{
    position: relative;
}

.background_gray{
    width: 50%;
    height: 500px;
    background: #6464640d;
    position: absolute;
    top: 0%;
    z-index: 4;
}

.message_list{
    padding: 10px 30px;
}

.message_txt{
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 1.8;
}

.message_items{
    margin-top: 23px;
}

.txt_yellow{
    color: #3778bb;
    font-size: 2rem;
}

.topic_txt_bold{
    font-weight: 600;
}


/* .message PC */
@media screen and (min-width:769px) {
 
    .message_list{
        /* padding: 10px 340px; */
    }

    .message_txt{
        font-size: 2rem;
    }

    .background_gray{
        height: 580px;
    }

    .br_sp{
        display: none;
    }

    .txt_yellow{
        font-size: 3rem;
    }
}

/* vv */

.vv_list{
    padding: 10px 30px;

}

.section_vv{
    position: relative;
    overflow: hidden;
}

.vv_img_sp{
    display: block;
    position: absolute;
    width: 100%;
    top: 16%;
    z-index: -1;
}

.vv_img_pc{
    display: none;
}

.vv_item{
    margin-top: 40px;
}

.vv_item:first-of-type{
     margin-top: 10px;
}

.vv_item_mission{
    text-align: left;
}

.vv_item_vision{
    text-align: right;
    background-color: #3778bb;
    padding: 20px 10px;
}

.vv_item_value{
    text-align: center;
    margin-top: 40px;
}

.vv_title{
    font-size: 1.8rem;
}


.vv_title_vision{
    color: #ffffff;
    -webkit-text-stroke: 1px #ffffff;
    text-stroke: 1px #ffffff;
    paint-order: stroke;
}

.vv_txt_white{
    color: #ffffff;
}

.vv_txt_bold{
    color: #3778bb;
    font-size: 1.6rem;
    margin-top: 10px;
}

.value_number{
    color: #3779bb42;
    font-size: 4.8rem;
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.value_title{
    font-size: 1.6rem;
}

.vv_txt{
    margin-top: 10px;
    font-size: 1.4rem;
}

.value_list{
    margin-bottom: 20px;
}

.value_item{
    margin: 0 auto;
    margin-top: 30px;
    width: 258px;
    height: 180px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.10);
    text-align: center;
    padding: 10px 20px 10px 20px;
}

.background_yellow{
    width: 100%;
    height: 700px;
    background: #3779bb42;
    position: absolute;
    top: 40%;
    z-index: -1;
}

/* .vv PC */
@media screen and (min-width:769px) {
 
    .vv_list{
    }

    .vv_img_sp{
        display: none;
    }

    .vv_img_pc{
        display: block;
        position: absolute;
        width: 100%;
        top: 25%;
        z-index: -1;
    }

    .vv_title{
        font-size: 8rem;
    }

    .value_number{
        font-size: 6rem;
        top: -57px;
        margin-bottom: -57px;
    }

    .value_title{
        font-size: 4rem;
    }

    .vv_txt{
        font-size: 2rem;
    }

    .vv_txt_bold{
        font-size: 3rem;
    }

    .vv_item_value{
        margin-top: 70px;
    }

    .value_item{
        width: 800px;
        height: 300px;
    }

    .background_yellow{
        height: 2000px;
        top: 40%;
    }

    .vv_item_vision{
    padding: 30px 30px;

    }
}

/* services */

.services_list{
    padding: 10px 30px 10px 30px;
}

.services_title{
    font-size: 2rem;
    margin-top: 10px;
}

.services_subtxt{
    font-size: 1.3rem;
    margin-top: 10px;
}

.services_txt{
    font-size: 1.4rem;
    margin-top: 10px;
    line-height: 1.8;
}

.number_img{
    width: 100px;
}

.services_item{
    text-align: left;
}


.services_img{
    display: block;
    width: 300px;
    margin-top: 20px;
}

.services_item02{
    margin-top: 30px;
}

.services_img_pc{
    display: none;
}

.services_img_sp{
    display: block;
    margin: 20px 0px 10px 110px;
}

/* recruit PC */
@media screen and (min-width:769px) {


    .services_title{
        font-size: 2.5rem;
    }

    .services_subtxt{
        font-size: 1.4rem;
    }

    .services_txt{
        font-size: 1.8rem;
    }

    .services_group{
        width: 30%;
    }

    .services_item02{
        margin-top: 80px;
    }

    .number_img{
        width: 200px;
    }

    .services_item{
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
    }

    .services_img{
        width: 50%;
        margin-top: 20px;
        object-fit: cover;
    }

    .services_img_pc{
        display: block;
        margin: 20px 0px 10px 0px;
    }

    .services_img_sp{
        display: none;
    }

    .services_description{
        font-size: 2rem;
    }
}

/* company */

.nav_item {
    color: black;
}

.section_company{
    overflow: hidden;
    text-align: center;
}

.company_list{
    display: block;
    margin: 0 auto 30px auto;
    width: 350px;
}

.company_item{
    text-align: left;
    padding: 10px 30px;
}

.company_line{
    width: 100%;
    height: 2px;
    background-color: #3778bb;
}

.company_title{
        font-size: 1.5rem;
    }

.google_map{
    width: 100%;
}

.map{
    padding: 30px;
}

.company_txt{
    margin-top: 10px;
    line-height: 2;
    font-size: 1.3rem;
}

/* company PC */
@media screen and (min-width:769px){
  
    .company_list{
        width: 1000px;
    }


    .company_txt{
        font-size: 1.8rem;
    }

    .company_title{
        font-size: 2rem;

    }

}

/*message02 */

.message02_title{
    font-size: 1.8rem;
}

.message02_txt{
    line-height: 2;
    font-size: 1.3rem;
    text-align: left;
}

.message02_name{
    margin-top: 10px;
    font-size: 1.4rem;
    text-align: left;
}

.message02_group{
    margin: 25px 25px 0px 25px;
}

.message02_img{
    display: block;
    width: 80%;
    margin: 0 0 0 auto;

}

/* message PC */
@media screen and (min-width:769px){
  
    .message02_title{
        font-size: 2rem;
    }

    .message02_txt{
        line-height: 2;
        font-size: 1.8rem;
    }

    .message02_name{
        margin-top: 10px;
        font-size: 2rem;
    }

    .message02_group{
        margin: 25px 30px 0px 90px;
    }

    .message02_img{
        display: block;
        width: 40%;
        margin: 0 0 0 auto;

    }

    .pc_flex{
        display: flex;
        flex-wrap: wrap;
        align-items: end;
    }

}



/* contact */

    .section_contact{
        overflow: hidden;
    }

    .footer{
        margin-top: 30px;
    }

    .contacturl{
        width: 320px;
        border-radius: 4px;
        background-color: #3778bb;
        margin: 0 auto;
        justify-content: center;
        padding: 20px 30px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: background-color 0.5s;
        color: #FFF;
        font-size: 2rem;
    }

    .contacturl:hover{
        background-color:#61a5e9;
    }

/* contact PC */
@media screen and (min-width:769px){

   
}

/* fotter */

.footer_group{
    max-width: 100%;
    padding: 0px 30px 30px 30px;
}

.footer_logo{
    width: 100px;
    margin: 0 auto;
}

.footer_list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0px 20px;
}

.footer_item{
    font-size: 1.2rem;
    line-height: 1.8;
}

.copy{
    text-align: center;
    margin-bottom: 40px;
}

/* footer PC */
@media screen and (min-width:769px){
    
    
    .footer_list{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0px 20px;
    }

    .footer_item{
        font-size: 2rem;
    }
    
    .copy{
        font-size: 1.8rem;
    }

}