@charset "UTF-8";

.l-mainv_ttl_en{
    width: 66.9rem;
}
.about-video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    z-index: -2;
}
.about-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .l-mainv_ttl_en{
    width: 30.9rem;
    display: block;
}
    .l-mainv_ttl{
        display: block;
    }
    .l-mainv_ttl_ja{
        margin-left: 0;
        margin-top: 1rem;
        display: block;
    }
    .about-video{}
    .about-video video{}

    .c-side_menu{
        display: none;
    }

}

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

.about_navi{
    margin-bottom: -1px;
    position: relative;
    z-index: 5;
}
.about_navi_inner{}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .about_navi{
    padding-bottom: 1rem;
}
    .about_navi_inner{}


}


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


.vision{
    height: 300rem;
    position: relative;
    z-index: 1;
}
.vision_main{
    top: 0;
    left: 0;
    z-index: 1;
    position: sticky;
    height: 100dvh;
    overflow: hidden;
}
.vision_bg{
    display: block;
    background: #F7F7F7 url(../img/common/bg01.png) 0 0 repeat;
    background-size: 100px;
    z-index: 1;
    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    mask-size: 103% 100%, calc(100% - 8rem) calc(100% - 8rem);
    mask-position: center, center;
    mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.vision_logo{
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16.8%;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1);
}
.anim2 .vision_logo{
    opacity: 0;
}


.vision_logo_bg{
    position: absolute;
    z-index: 1;
    width: 100dvh;
    height: 100dvh;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    overflow: hidden;
}



.vision_logo_bg1{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: url(../img/about/vision_logo1.svg) 0 0 no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 1.3s cubic-bezier(0.4, 0, 1, 1), height 0.9s cubic-bezier(0.4, 0, 1, 1);


}
.vision_logo_bg2{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 0;
    bottom: 0px;
    left: 0;
    background: url(../img/about/vision_logo2.svg) 0 100% no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 1.3s cubic-bezier(0.4, 0, 1, 1), height 0.9s cubic-bezier(0.4, 0, 1, 1);
}


.anim2 .vision_logo_bg1 {
    height: calc(100% + 2px);
    opacity: 1;
}


.anim2 .vision_logo_bg2 {
    height: calc(100% + 2px);
    opacity: 1;
}


.vision_data{
    color: #F7F7F7;
    position: absolute;
    z-index: 5;
    top: 46%;
    left: 0;
    right: 0;
    transform: translate(0px, -50%);
    display: flex;
    justify-content:center;
}
.vision_data_inner{
    display: flex;
    gap: 0 16rem;
}
.vision_mes_ttl{
    font-size: var(--f18);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 1, 1);
}
.vision_mes{
}
.vision_mes_txt{
    overflow: hidden;
}
.vision_mes_txt span{
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    /* padding: 1vw 0; */
    transform: translate(0, 150%);
    display: inline-block;
}  



.vision_mes_txt1{
    font-size: var(--f40);
    letter-spacing: 0;
    line-height: 1;
}
.vision_mes_txt2{
    font-size: var(--f54);
    line-height: 1;
    letter-spacing: 0.1em;
    margin-top: 4rem;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}


.vision_mes_txt2:before {
    content: "";
    z-index: 1;
    position: absolute;
    background-image: linear-gradient(90deg, #26A7BB 0%, #C67FC8 50%, #E68264 100%);
    height: 2px;
    bottom: 0;
    right: 3rem;
    left: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.6s cubic-bezier(0.26, 0.06, 0, 1);

}

.anim2 .vision_mes_txt2:before{
    transform: scale(1, 1);
    transition-delay: 1.31s;
}

.anim2 .vision_mes_txt span{
    transform: translate(0, 0%);
    transition-delay: 1.15s;
}

.anim2 .vision_mes_ttl{
    opacity: 1;
    transition-delay: 1.15s;    
}

.vision_box {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 50dvh;
    bottom: 50dvh;
    width: 10px;
}
.vision_box .vision_box1{
    flex: 1;
}
.vision_box .vision_box2{
    height: 70%;
}





/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .vision{}
    .vision_main{}
    .vision_bg{
    mask-size: 103% 100%, calc(100% - 3rem) calc(100% - 3rem);
}
    .vision_logo{
    width: 50.8%;
}
    .anim2 .vision_logo{}
    .vision_logo_bg{
    width: 90vw;
    height: 90vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
    .vision_logo_bg1{}
    .vision_logo_bg2{}
    .anim2 .vision_logo_bg1 {}
    .anim2 .vision_logo_bg2 {}
    .vision_data{}
    .vision_data_inner{
    gap: 0 6rem;
    display: block;
}
    .vision_mes_ttl{
    font-size: 1.6rem;
    margin-bottom: 3rem;
}
    .vision_mes{}
    .vision_mes_txt{}
    .vision_mes_txt span{}  
    .vision_mes_txt1{
    font-size: 2rem;
}
    .vision_mes_txt2{
    font-size: 2.5rem;
    margin-top: 1rem;
}
    .vision_mes_txt2:before {}
    .anim2 .vision_mes_txt2:before{}
    .anim2 .vision_mes_txt span{}
    .anim2 .vision_mes_ttl{}
    .vision_box {}
    .vision_box .vision_box1{}
    .vision_box .vision_box2{}


}


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

.message{
    position: relative;
    z-index: 5;
}
.message_inner{
    padding-top: 10rem;
    padding-bottom: 15rem;
}
.message_body{
    margin-top: 15rem;
    display: flex;
    justify-content:space-between;
}
.message_head{
    width: 28rem;
    margin-right: 18.7rem;
    position: relative;
    z-index: 1;
}
.message_head_inner{
    position: sticky;
    top: 74px;
    left: 0;
}
.message_img{}
.message_name{
    text-align: center;
    line-height: 1;
    margin-top: 2rem;
}
.message_name_txt1{
    display: block;
    font-size: var(--f14);
    color: #555555;
}
.message_name_txt2{
    font-size: var(--f26);
    font-weight: 500;
    margin-top: 1.5rem;
    display: block;
}
.message_mes{
    flex: 1;
    font-size: var(--f16);
    line-height: 2;
    margin-top: -1rem;
    display: grid;
    gap: 3.3rem 0;
}
.message_mes_ttl{
    font-size: var(--f32);
    font-weight: 400;
    line-height: 1.7;
    padding: 3.4rem 0 0 4.3rem;
    margin-bottom: -1rem;
    position: relative;
    z-index: 1;
}
.message_mes_ttl:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: url(../img/common/icon_dotto.svg) 0 0 no-repeat;
    background-size: contain;
    width: 3.3rem;
    height: 2.6rem;
    top: 1rem;
    left: 0;
}
.message_mes p{}


/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .message{}
    .message_inner{
    padding-top: 6rem;
    padding-bottom: 9rem;
}
    .message_body{
    display: block;
    margin-top: 0;
}
    .message_head{
    margin: 0 auto;
    width: 23rem;
}
    .message_img{}
    .message_name{}
    .message_name_txt1{
    font-size: 1.2rem;
}
    .message_name_txt2{
    font-size: 2rem;
}
    .message_mes{
    margin-top: 2rem;
    font-size: 1.4rem;
    gap: 1.3rem 0;
}
    .message_mes_ttl{
    padding: 2.4rem 0 0 3.3rem;
    font-size: 2.4rem;
    margin-bottom: 0rem;
}
    .message_mes_ttl:before{
    width: 3rem;
    height: 2.3rem;
}
    .message_mes p{}

}


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


.mission{}
.mission_inner{
    padding-top: 11.8rem;
    padding-bottom: 15.3rem;
}


.mission_head{
    position: relative;
    z-index: 1;
    margin-top: 13rem;
}
.mission_ttl{}
.mission_ttl_txt1{
    font-size: var(--f32);
    line-height: 2;
    font-weight: 400;
}
.mission_ttl_txt2{
    font-size: var(--f56);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.03em;
    display: block;
    margin-top: 0rem;
}
.mission_mes{
    flex: 1;
    font-size: var(--f16);
    line-height: 2;
    margin-top: 0;
    display: grid;
    gap: 3.3rem 0;
    margin-top: 4.4rem;
}
.mission_mes p{}
.mission_img1{
    position: absolute;
    z-index: 1;
    top: -3rem;
    right: 5rem;
    width: 35.5rem;
}
.mission_img2{
    position: absolute;
    z-index: 1;
    top: 27.7rem;
    right: 0rem;
    width: 19.8rem;
}
.mission_body{}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .mission{}
    .mission_inner{
    padding-top: 8rem;
    padding-bottom: 9rem;
}
    .mission_head{
    margin-top: 0;
    margin-bottom: 10rem;
}
    .mission_ttl{}
    .mission_ttl_txt1{
    font-size: 2.4rem;
}
    .mission_ttl_txt2{
    font-size: 3.2rem;
}
    .mission_mes{
    margin-top: 3.4rem;
    font-size: 1.4rem;
    gap: 2.3rem 0;
    padding-bottom: 23rem;
}
    .mission_mes p{}
    .mission_img1{
    bottom: 0;
    top: auto;
    left: 1rem;
    width: 23.5rem;
    z-index: 2;
}
    .mission_img2{
    top: auto;
    bottom: 9rem;
    width: 9.8rem;
    right: 2rem;
}
    .mission_body{}


}


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



.philosophy{}
.philosophy_inner{
    padding-bottom: 15rem;
    padding-top: 12rem;
}
.philosophy_list{
    margin-top: 12rem;
    display: grid;
    gap: 10rem 0;
}
.philosophy_list li{}
.philosophy_list_head{
    font-size: var(--f14);
    letter-spacing: 0.03em;
    color: #555555;
    position: relative;
    z-index: 1;
    margin-bottom: 6rem;
}
.philosophy_list_head:before{
    content: "";
    z-index: 1;
    position: absolute;
    
    border-top: 1px dashed #252421;
    height: 1px;
    top:50%;
    right:0;
    left: 0;
}
.philosophy_list_head_inner{
    display: inline-flex;
    gap: 0 2rem;
    background: url(../img/common/bg01.png) 0 0 repeat;
    background-size: 100px auto;
    position: relative;
    z-index: 4;
    padding-right: 2rem;
}
.philosophy_list_no{}
.philosophy_list_name{}
.philosophy_list_ttl{
    font-weight: 400;
    font-size: var(--f32);
    margin-bottom: 2rem;
}
.philosophy_list_mes{}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .philosophy{}
    .philosophy_inner{
    padding-bottom: 9rem;
    padding-top: 8rem;
}
    .philosophy_list{
    gap: 5rem 0;
    margin-top: 0;
}
    .philosophy_list li{}
    .philosophy_list_head{
    font-size: 1.2rem;
    margin-bottom: 3rem;
}
    .philosophy_list_head:before{}
    .philosophy_list_head_inner{
    padding-right: 1rem;
    gap: 0 1.3rem;
}
    .philosophy_list_no{}
    .philosophy_list_name{}
    .philosophy_list_ttl{
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}
    .philosophy_list_mes{}

}


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

.member{}
.member_inner{
    padding-bottom: 15rem;
    padding-top: 12rem;    
}
.member_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 9rem;
    gap: 2rem;
}
.member_list a{}
.member_list_img{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.member_list_img1{}
.member_list_img2{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.26, 0.06, 0, 1), transform 400ms cubic-bezier(0.43, 0.05, 0.17, 1);
    transform: scale(1);
}
a:hover .member_list_img2{
    opacity: 1;
    transform: scale(1);
}

.member_list_name{
    margin-top: 2rem;
}
.member_list_name_en{
    font-size: var(--f14);    
    color: #555555;
    line-height: 1;
}
.member_list_name_ja{
    font-weight: 500;
    font-size: var(--f26);    
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-right: 55px;
}
.member_list_name_ja .c-plus{
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.member_list_post{
    font-size: var(--f16);    
    color: #555555;
}
.member_list_mes{
    display: none;
}


.p-member_list{
    display: flex;
}

.p-member_list_img{
    width: 30rem;
    margin-right: 7rem;
    position: relative;
    z-index: 1;
}

.p-member_list_img .member_list_img1{
    opacity: 0;
}
.p-member_list_img .member_list_img2{
    opacity: 1;
}

.p-member_list_main{
    flex: 1;
}

.p-member_list_name{
    margin-top: 4.5rem;
}
.p-member_list_name_en{
    font-size: var(--f14);
    color: #555555;
    line-height: 1;
    margin-bottom: 1.5rem;
}
.p-member_list_name_ja{
    font-weight: 500;
    font-size: var(--f32);
    position: relative;
    z-index: 1;
    display: inline-block;
    /* padding-right: 55px; */
    line-height: 1;
}
.p-member_list_name_ja .c-plus{
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.p-member_list_post{
    font-size: var(--f16);
    color: #555555;
}
.p-member_list_mes{
    margin-top: 2rem;
    line-height: 2;
}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .member{}
    .member_inner{
    padding-bottom: 9rem;
    padding-top: 8rem;
}
    .member_list{
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
}
    .member_list a{}
    .member_list_img{}
    .member_list_name{}
    .member_list_name_en{
    font-size: 1.2rem;
}
    .member_list_name_ja{
    font-size: 2rem;
    padding-right: 4rem;
}
    .member_list_name_ja .c-plus{
}
    .member_list_post{}
    .member_list_mes{
}
    .p-member_list{}
    .p-member_list_img{
    width: 13rem;
    margin-right: 0;
    position: absolute;
    top: 2rem;
    left: 2rem;
}
    .p-member_list_main{}
    .p-member_list_name{margin-top: 0;}
    .p-member_list_name_en{
    font-size: 1.2rem;
}
    .p-member_list_name_ja{
    font-size: 2rem;
}
    .p-member_list_name_ja .c-plus{}
    .p-member_list_post{
    font-size: 1.4rem;
}
    .p-member_list_mes{
    margin-top: 2rem;
}
    .p-member_list_inner{
    margin-left: 15rem;
    padding-top: 3rem;
    min-height: 17.4rem;
    }

}


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

.corporate{}
.corporate_inner{
    padding-top: 11.7rem;
    padding-bottom: 16rem;
}
.corporate_body{
    margin-top: 12.4rem;
    display: flex;
    align-items: flex-start;
    gap: 0 8rem;
}

.corporate_data{
    display: grid;
    gap: 3.2rem 0;
    flex: 1;
}
.corporate_data dl{
    display: flex;
    gap: 0 2rem;
}
.corporate_data dt,
.corporate_data dd{

    border-bottom: 1px solid rgba(37, 36, 33, 0.24);
}
.corporate_data dt{
    font-weight: 500;
    font-size: var(--f16);
    width: 14.3rem;

}
.corporate_data dd{
    font-size: var(--f16);
    flex: 1;
    padding-bottom: 1.6rem;
}
.corporate_img{width: 45rem;background: #fff;border-radius: 1rem;padding: 4.6rem 3.5rem;margin-top: -3rem;}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .corporate{}
    .corporate_inner{
    padding-top: 8rem;
    padding-bottom: 9rem;
}
    .corporate_body{
    display: block;
    margin-top: 0;
}
    .corporate_data{
    gap: 2.2rem 0;
}
    .corporate_data dl{}
    .corporate_data dt,
    .corporate_data dd{}
    .corporate_data dt{
    font-size: 1.4rem;
    width: 7.3rem;
}
    .corporate_data dd{
    font-size: 1.4rem;
    padding-bottom: 0.6rem;
}
    .corporate_img{
    width: auto;
    padding: 2.6rem 2.5rem;
    margin-top: 5rem;
}

}


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

.history{
    overflow: hidden;
}
.history_inner{
    padding-top: 11.8rem;
    padding-bottom: 7rem;
}
.history_slide{
    margin-top: 11rem;
    position: relative;
    z-index: 1;
}
.history_slide:before{
    content: "";
    z-index: 10;
    position: absolute;
    background: #deddd7;
    background: linear-gradient(90deg, rgba(222, 221, 215, 0) 0%, rgb(247 247 247) 90%);
    width: 5rem;
    top:0;
    bottom: 0;
    right:calc(-4rem);
    right:calc(((100% + 22rem) - 100vw - 4rem) / 2);
}


.history_list{}
.history_list li{
    position: relative;
    z-index: 1;
    min-height: 30rem;
    padding-left: 6%;
    padding-top: 7px;
}
.history_list li:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: var(--color-black);
    height: 2px;
    bottom: 7px;
    right:0;
    left: 0;
}
.history_list li:after{
    content: "";
    z-index: 1;
    position: absolute;
    background: rgba(37, 36, 33, 0.24);
    width: 2px;
    top: 0;
    bottom: 7px;
    left: 7.4%;
}
.history_list_y{
    font-weight: 400;
    font-size: 6.4rem;
    font-family: "Instrument Serif", serif;
    margin-bottom: 1.2rem;
}
.history_list_mes{
    font-size: var(--f22);    
    line-height: 1.7;
}
.history_list_dotto{
    position: absolute;
    z-index: 5;
    background: url(../img/common/bg01.png) 0 0 repeat;
    background-size: 100px auto;
    bottom: 0;
    width: 14px;
    height: 23px;
    display: block;
    left: calc(7.4% - 6px);
}
.history_list_dotto:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: var(--color-black);
    width: 6px;
    height: 6px;
    bottom: 5px;
    right:0;
    left: 0;
    margin: auto;
}

.history_list_navi {display: flex;justify-content: center;align-items: center;/* padding: 2.9rem 0; */gap: 0 3rem;margin-top: 4.4rem;}

.history_slide_btn{}
.history_slide-prev,
.history_slide-next{
    width: 5.6rem;
    height: 3.2rem;
    border: 1px solid #252421;
    border-radius: 10rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.history_slide-prev:before,
.history_slide-next:before{
    content: "";
    z-index: 2;
    position: absolute;
    background: url(../img/common/arrow1.svg) 50% 50% no-repeat;
    background-size: contain;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transition: .4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
    width: 1.5rem;
    height: 1.5rem;
}



.history_slide-prev{
    transform: scale(-1,1);
}
.history_slide-next{}

.history .swiper-button-disabled {
    opacity: 0.2;
    cursor: auto;
}


/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .history{}
    .history_inner{
    padding-top: 8rem;
    padding-bottom: 9rem;
}
    .history_slide{
    margin-top: 0;
}
    .history_slide:before{
    right: calc(( 100% - 100vw ) / 2);
}
    .history_list{}
    .history_list li{
    padding-left: 11%;
    padding-top: 7px;
    min-height: 25rem;
}
    .history_list li:before{}
    .history_list li:after{}
    .history_list_y{
    font-size: 5rem;
}
    .history_list_mes{
    font-size: 1.8rem;
}
    .history_list_dotto{}
    .history_list_dotto:before{}
    .history_list_navi {
    margin-top: 3.4rem;
}
    .history_slide_btn{}
    .history_slide-prev,
    .history_slide-next{
    width: 4.6rem;
    height: 2.5rem;
}
    .history_slide-prev:before,
    .history_slide-next:before{
    width: 1rem;
    height: 1rem;
}
    .history_slide-prev{}
    .history_slide-next{}
    .history .swiper-button-disabled {}
}


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