@charset "utf-8";



/* ==========================================================================
	mv
========================================================================== */
#mv {
    position: relative;
    padding-top: 405px;
}
 #mv .title_area {
     position: relative;
     padding-left: 9.72vw;
     z-index:50;
}
 #mv .title_area h2{
     font-size: 54px;    
     letter-spacing: 0.15em;
}
 #mv .title_area h3{
     font-size: 18px;
     color:#919f9f;
     margin-top: 34px;
     letter-spacing: 0.1em;
}
#mv .img_area{
    position: absolute;
    right: 0;
    top: 0;
    z-index:5;
    width: 58.3%;
    height: 880px;
    background:url(../image/about/main_bg.jpg) right center;
    background-size:cover;
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    border-radius:0 0 0 10px;
}


@media screen and (max-width : 800px ){
    
    #mv {
        padding-top:0;
    }
     #mv .title_area {
         position: relative;
         padding:78px 0;
    }
     #mv .title_area h2{
         font-size: 32px;
         text-align: center;
    }
     #mv .title_area h3{
         font-size: 13px;
         margin-top: 16px;
         text-align: center;
    }
    #mv .img_area{
        position: relative;
        width: 100%;
        height: 124vw;
        background:url(../image/about/main_bg.jpg) right center;
        background-size:cover;
        box-shadow: none;
        border-radius:0;
    }


   
}




/* ==========================================================================
	intro
========================================================================== */
.intro {
    position: relative;
    z-index:1;
    margin-top: 375px;
    padding:94px 0 80px;
}
.intro:before{
    content:"";
    display: block;
    width: 70.13%;
    /*
    height: 1950px;
    */
    height: 88%;
    position: absolute;
    left: 0;
    top: -180px;
    z-index:1;
    background:#f4f7f7;
}
.intro .enh {
    position: relative;
    font-size: 84px;
    font-size: min(84px,6.5vw);
    color:#919f9f;
    z-index:10;
    margin-left: 10vw;
}
.intro .inview.bt.move.enh{
    opacity:0.3;
}
.intro .box01 {
    position: relative;
    z-index:10;
    padding:0 10vw;
    box-sizing:border-box;
}
.intro .box01 .text_area {
    margin-top: 124px;
    margin-top: 8.3vw;
}
.intro .text_area h3{
    font-size: 36px;
    margin-bottom: 70px;
    letter-spacing: 0.1em;
}
.intro .text_area p{
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.1em;
}
.intro .box01 .text_area p{
    width: 60%;
}
.intro .box01 .img_area {
    display: block;
    position: absolute;
    right: 13.47vw;
    top: -40px;
    width: 24%;
    max-width:400px;
}
.intro .box01 .img {
    position: relative;
    width: 100%;
    border-radius:5px;
    background:url(../image/about/intro_img01.jpg) center center;
    background-size:cover;
    z-index:10;
    box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 10%);
}

.intro .box01 .img:before{
    content:"";
    display: block;
    padding-top: 164%;
}
.intro .box01 .img_area .square {
    max-width: 220px;
    width: 15.27vw;
    position: absolute;
    right: -120px;
    bottom:-68px;
    z-index:1;

}
.intro .box01 .img_area .square img {
    border-radius:5px;
}

.intro .box02 {
    position: relative;
    z-index:10;
    margin:150px 0 ;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
}
.intro .box02 .text_area {
    width: 51%;

    display: flex;
    align-items: center;
    justify-content: center; 
}
.intro .box02 p {
    position: relative;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.1em;
    width: 100%;
    max-width: 450px;
    padding: 0 15px;
    box-sizing: border-box;
}
.intro .box02 .img_area {
    width: 49%;
    height: 440px;
    border-radius:0 5px 5px 0;
    background:url(../image/about/intro_img02.jpg) center center;
    background-size:cover;
    box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 10%);
}

.intro .box03 {
    position: relative;
    z-index:10;
    padding:0 10vw;
    box-sizing:border-box;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
}
.intro .box03 .text_area {
    width: 52.63%;
    max-width:600px;
}
.intro .box03 .text_area p{
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.1em;
}
.intro .box03 .img_area {
    width: 39.6%;

    display: flex;
    align-items: center;
    justify-content: center; 
}
.intro .box03 .img_area img {
    border-radius:5px;
    box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 10%);
}


@media screen and (max-width : 1150px ){
    .intro .box01 .img_area {top: 120px;}
    .intro p .sp_off{display:none;}
}

@media screen and (max-width : 980px ){
    .intro .box03 .text_area{
        width: 100%;
        max-width:950px;
    }
    .intro .box03 .img_area{
        display: block;
        width: 600px;
        margin:90px auto 0;
    }
}
@media screen and (max-width : 800px ){
    
    .intro {
        margin-top:0;
        padding:70px 0 80px;
    }
    .intro:before{
        width: 100%;
        height: 200px;
        top: 0;
    }
    .intro .enh {
        font-size: 12px;
        margin-left: 8.75vw;
    }
    .intro .box01 {
        padding:0 8.75vw;
    background:#f4f7f7;
    }
    .intro .box01:before{
        content:"";
        display: block;
        position: absolute;
        left: 0;
        bottom:-1px;
        background:#fff;
        width: 100%;
        height: 35vw;
    }
    .intro .box01 .text_area {
        margin-top: 30px;
    }
    .intro .text_area h3{
        font-size: 25px;
        line-height: 35px;
        margin-bottom: 47px;
    }
    .intro .text_area p{
        font-size: 12px;
        line-height: 27px;
    }
    .intro .box01 .text_area p{
        width: 100%;
    }
    .intro .box01 .img_area {
        position: relative;
        right: auto;
        top: auto;
        width: 69.375vw;
        margin:60px 0 60px 30.625%;
        max-width:800px;
    }
    .intro .box01 .img {
        position: relative;
        width: 100%;
        border-radius:5px;
        background:url(../image/about/intro_img01.jpg) center center;
        background-size:cover;
        z-index:10;
        box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 10%);
    }

    .intro .box01 .img:before{
        content:"";
        display: block;
        padding-top: 164%;
    }
    .intro .box01 .img_area .square {
        max-width: 220px;
        width: 15.27vw;
        position: absolute;
        right: -120px;
        bottom:-68px;
        z-index:1;

    }
    .intro .box01 .img_area .square img {
        border-radius:5px;
    }

    .intro .box02 {
        margin:0;
        display: block;
    }
    .intro .box02 .text_area {
        display: block;
        width: 100%;
        padding:0 8.75vw;
        box-sizing:border-box;
    }
    .intro .box02 p {
        font-size: 12px;
        line-height: 27px;
        padding:0;
    }
    .intro .box02 .img_area {
        width: 88.75%;
        height: auto;
        margin:65px 0 60px;
    }
    .intro .box02 .img_area:before{
        content:"";
        display: block;
        padding-top: 61.69%;
    }

    .intro .box03 {
        position: relative;
        z-index:10;
        padding:0 8.75vw;
        display: block;
    }
    .intro .box03 .text_area {
        width: 100%;
    }
    .intro .box03 .text_area p{
        font-size: 12px;
        line-height: 27px;
    }
    .intro .box03 .img_area {
        width: 100%; 
        margin-top: 55px;
    }

    
}
/* ==========================================================================
	intro_bottom
========================================================================== */
.intro_bottom {
    position: relative;
    margin:94px auto 143px;
}
.intro_bottom h2 {
    width: 218px;
    margin:0 auto 70px;
}
.intro_bottom .img_area {
    position: relative;
    width: 100%;
    height: 68.75vw;
}
.intro_bottom .img_area img{
    position: relative;
    border-radius:5px;
    z-index:10;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
}
.intro_bottom .img_area .square img{
    box-shadow: none;
}
.intro_bottom .img01 {
    position: absolute;
    width: 26.688%;
    right: 0;
    top: 0;
}
.intro_bottom .img01 img {
    border-radius:5px 0 0 5px;
}
.intro_bottom .img02 {
    position: absolute;
    width: 13.19%;
    top: 18.75vw;
    left: 51.38%;
}
.intro_bottom .img03 {
    position: absolute;
    width: 21.52%;
    top: 36.8vw;
    left: 27%;
}
.intro_bottom .img04 {
    position: absolute;
    width: 35.41%;
    right: 2.777%;
    top:46.52vw;
}
.intro_bottom .img05 {
    position: absolute;
    width: 31.9444%;
    left: 0;
    top: 2.77vw;
}
.intro_bottom .img05 img {
    border-radius:0 5px 5px 0;
}
.intro_bottom .img06 {
    position: absolute;
    width: 16.666%;
    left: 4.86%;
    top:41.66vw;
}

.intro_bottom .img02 .square{
    display: block;
    position: absolute;
    z-index:1;
    width: 12.5vw;
    top: -11.11vw;
    right: -6.25vw;    
    border-radius:5px;
}
.intro_bottom .img03 .square{
    display: block;
    position: absolute;
    z-index:1;
    width: 18.75vw;
    height: 18.75vw;
    bottom: -10.41vw;
    right: -6.45vw;    
    border-radius:5px;
    background:#f4f7f7;
}

.intro_bottom .img04 .square{
    display: block;
    position: absolute;
    z-index:1;
    width: 32.63vw;
    top: -5.55vw;
    right: -2.77vw;    
}

.intro_bottom .img05 .square{
    display: block;
    position: absolute;
    z-index:1;
    width: 27.77vw;
    bottom: -4.16vw;
    right: -9.72vw;    
}

.intro_bottom .img06 .square{
    display: block;
    position: absolute;
    z-index:1;
    width: 11.11vw;
    top: -9.02vw;
    left: -4.86vw;    
}



.intro_bottom .op{
    opacity:0;
    transition: all 0.8s ease;
}



.intro_bottom.move .op{
    opacity:100;
    transition: all 0.8s ease;
}

.intro_bottom.move .img02.op{
    transition-delay: .2s;
}
.intro_bottom.move .img03.op{
    transition-delay: .4s;
}
.intro_bottom.move .img04.op{
    transition-delay: 0.6s;
}
.intro_bottom.move .img05.op{
    transition-delay: .8s;
}
.intro_bottom.move .img06.op{
    transition-delay: 1s;
}
@media screen and (max-width : 800px ){

    .intro_bottom {
        margin:0 auto;
    }
    .intro_bottom h2 {
        width: 28.75%;
        min-width:115px;
        margin:0 auto 17.5vw;
    }
    .intro_bottom .img_area {
        position: relative;
        width: 100%;
        height: 237.5vw;
    }
    .intro_bottom .img01 {
        width: 50.75%;
        right: 0;
        top: 8vw;
    }
    .intro_bottom .img02 {
        width: 25.375%;
        top: 0;
        left: 0;
    }
    .intro_bottom .img03 {
        width: 41.375%;
        top: 65vw;
        left: 0;
    }
    .intro_bottom .img04 {
        width: 68%;
        right:0;
        top:114.75vw;
    }
    .intro_bottom .img05 {
        width: 61.25%;
        left: 0;
        top: 165.5vw;
    }
    .intro_bottom .img06 {
        width: 30.875%;
        left:auto;
        right: 0;
        top:184.125vw;
    }

    .intro_bottom .img02 .square{
        width: 24.125vw;
        top: 21.875vw;
        right: -9.375vw;
    }
    .intro_bottom .img03 .square{
        width: 36.25vw;
        height: 36.25vw;
        bottom: -15vw;
        right: -13.75vw; 
    }

    .intro_bottom .img04 .square{
        width: 53.25vw;
        top:auto;
        right: 0;
        bottom:-13.75vw;
    }

    .intro_bottom .img05 .square{
        display: block;
        position: absolute;
        z-index:1;
        width: 53.5vw;
        bottom: auto;
        right: auto;
        left:-33.75vw;
        top:-26.625vw;
    }

    .intro_bottom .img06 .square{
        display:none;
    }

    .intro_bottom .square{
        transform: translate(0) !important;
    }

}

/* ==========================================================================
	project
========================================================================== */
.project {
    position: relative;
    z-index:5;
    margin:140px auto 0;
    background:#fff;
    /*
    margin-bottom: 380px;
    */
}
.project .con_inr{
    padding-bottom: 130px;
    
}
.project .square{
    display: block;
    width: 108px;
    position: absolute;
    right: 0;
    top: 50px;
    z-index:10;
}
.projext .m_con .square img{
     position: relative;
    z-index:10;
    border-radius:5px;
}
.project .square02{
     display: block;
    width: 112px;
    height: 186px;
    border-radius:5px;
    background:#f4f7f7;
    position: absolute;
    right: 60px;
    top:202px;
    z-index:5;
}




.project .square05{
    display: block;
    width: 139px;
    position: absolute;
    left: 0;
    top: 505px;
    z-index:10;
}
.projext .square05 img{
     position: relative;
    z-index:10;
    border-radius:5px;
}
.project .square06{
     display: block;
    width: 89px;
    height: 159px;
    border-radius:5px;
    background:#f4f7f7;
    position: absolute;
    left: -59px;
    top:715px;
    z-index:5;
}

.project h3 {
    display: block;
    width: 394px;
    margin:90px auto 80px;
}
.project .c_txt {
    position: relative;
    width: 90%;
    max-width:800px;
    margin:0 auto 95px;
    font-size: 16px;
    line-height: 2.5;
    letter-spacing: 0.1em;
    z-index:20;
    color:#222;
}
.project_list {
    position: relative;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    z-index:10;
}
.project_list li {
    width: 30.32%;
    margin:0 4.52% 50px 0;
}

.project_list li:nth-child(3n){
    margin-right: 0;
}
.project_list a {
    display: block;
}
.project_list .img_area {
    position: relative;
}
.project_list .inr {
    position: relative;    
    border-radius:5px;
    overflow: hidden;
    box-shadow: 7px 7px 10px 0px rgb(0 0 0 / 2%);
}
.project_list .inr img{
    transition: transform 0.4s cubic-bezier(.25, .46, .45, .94);
    border-radius:5px;
}
.project_list a:hover .inr img{
    transform: scale(1.1);
    transition: transform 0.4s cubic-bezier(.25, .46, .45, .94);
}
.project_list .inr:before{
    content:"";
    display: block;
    padding-top: 62.16%;
}
.project_list .img_area .v_txt {
    
    position: absolute;
    right: -18px;
    bottom: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.project_list .mincho {
    font-size: 22px;
    line-height: 36px;
    letter-spacing: 0.1em;
    margin:35px 0 25px;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94);
}

.project_list a:hover .mincho {
     color:#799191;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94);
}
.project_list .tag {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 14px;
    border: 1px solid #d1dada;
    color: #799191;
    margin: 0 10px 10px 0;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94),background 0.4s cubic-bezier(.25, .46, .45, .94);
}
.project_list .tag:hover{
    background:#d1dada;
    color: #fff;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94),background 0.4s cubic-bezier(.25, .46, .45, .94);
}

.project .box03 .box_square{
    width: 200px;
    height: 350px;
    background:none;
}

.project_link{
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 600px;
    height: 60px;
    font-size: 15px;
    border-radius:60px;
    border:1px solid #d1dada;
    margin:0 auto;
    box-shadow: 8px 8px 0px 0px #f4f7f7;
    margin-top: 70px;
    margin-top:max(70px,4.86vw);
    z-index:30;
}
.project_link:hover{
    border-color:#555;
}
.project_link:after{
    content: "";
    display: block;
    position: absolute;
    right: 28px;
    top: 0;
    bottom:0;
    margin:auto;
    width: 5px;
    height: 5px;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: right 0.4s cubic-bezier(.25, .46, .45, .94);
}
.project_link:hover:after{
    right:23px;
    transition: right 0.4s cubic-bezier(.25, .46, .45, .94);
}
.project .square03{
     display: block;
    width: 99px;
    height: 200px;
    border-radius:5px 0 0 5px;
    background:#f4f7f7;
    position: absolute;
    right: 0;
    bottom:70px;
    z-index:5;
}
.project .square04{
    display: block;
    width: 75px;
    position: absolute;
    right: 75px;
    bottom: -2px;
    z-index:10;
}

@media screen and (max-width : 800px ){
    
    .project {
        margin-top: 0;
        padding:18.5vw 0;
    }
    .project .area_tit{margin-left: 6vw;}
    .project .con_inr{padding-bottom: 0;padding-right: 0;padding-left: 0;}
    .project h3 {
        width: 51%;
        max-width: 394px;
        margin:52px auto 48px;
    }
    .project .c_txt {
        width: 100%;
        font-size: 12px;
        font-size: clamp(11px,2.933vw,13px);
        line-height: 2.27;
        margin-bottom: 60px;
        padding:0 6vw;
        box-sizing:border-box;
    }
    
    .project_list {
        display: block;
        padding-left: 6vw;
    }
    .project_list li {
        width: 267px;
        margin:0 35px 0 0;
    }

    .project_list li:nth-child(3n){
        margin-right: 35px;
    }
    .project_list .inr {
        box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 2%);
    }
    .project_list .img_area .v_txt {

    right: -18px;
    font-size: 10px;
    }
    .project_list .mincho {
        font-size: 16px;
        line-height: 24px;
        margin: 25px 0 20px;
    }

    .project_list .tag {
        padding: 4px 10px;
        margin: 0 5px 5px 0;
        font-size: 10px;
    }

    .project_link{
        width: calc(100% - 12.5vw);
        height: 43px;
        font-size: 11px;
        border-radius:43px;
        box-shadow: 3px 3px 0px 0px #f4f7f7;
        margin-top: 65px;
        margin-top:min(65px,16.25vw);
    }
    .project_link:after{
        right: 20px;
        width: 3px;
        height: 3px;
    }
    .project_link:hover:after{
        right:17px;
    }
    .project .square03,
    .project .square04{
        display:none;
    }
}

/* ==========================================================================
	sora
========================================================================== */

.sora{
    position: relative;
    width: 100%;
    height: 380px;
    background: url(../image/sora.jpg) center center;
    background-size: cover;
    /*
    position:fixed;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin:auto;
    background-attachment: fixed;
    */
    z-index:50;
}

@media screen and (max-width : 800px ){
    .sora{height: 48.875vw;}
    
}
/* ==========================================================================
	team
========================================================================== */
.team{
    position: relative;
    z-index:10;
    padding:130px 0 70px;
    background:#fff;
}
.team_list {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    margin-top: 94px;
}
.team_list a {
    display: block;
    width: 26.61%;
    margin-bottom: 100px;
}
.team_list .img_area {
    position: relative;
}
.team_list .img_area .img{
    overflow: hidden;
    border-radius:5px;
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.05);
    width: 100%;
    height: 100%;
}
.team_list .img_area img {
    position: relative;
    border-radius:5px;
    z-index:10;
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.team_list a:hover .img img{
     transform: scale(1.05);
    
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.team_list .enh {
    display:inline-block;
    position: absolute;
    left: -30px;
    bottom:60px;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 0.1em;
    transform: rotate(-30deg);
    color:#222;
    z-index:20;
}
.team_list .square {
    display: block;
    position: absolute;
    z-index:1;
    width: 15.2vw;
    right: -4.86vw;
    bottom:-2.77vw;
}
.team_list a:nth-child(2) .square,
.team_list a:nth-child(5) .square {
    bottom:auto;
    top:-2.77vw;
}
.team_list .square img {
    border-radius:5px;
    box-shadow:none;
    z-index:1;
}
.team_list .s_txt {
    position: relative;
    display: block;
    padding:58px 1.319vw 10px;
    box-sizing:border-box;
    font-size: 14px;
    letter-spacing: 0.1em;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94); 
    z-index:10;
}
.team_list .mincho {
    position: relative;
    padding:0 1.319vw;
    font-size: 26px;
    font-size: clamp(24px,1.8vw,27px);
    letter-spacing: 0.08em;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94); 
    z-index:10;
    
}
.team_list .mincho span {
    font-size: 15px;
}
.team_list a:hover .s_txt,
.team_list a:hover h3{
    color:#799191;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94); 
}

@media screen and (max-width : 1370px ){

    .team_list .mincho .pc_off{
         display:inline;   
    }
}

@media screen and (max-width : 800px ){

    .team{
        padding:18.8vw 0 12.5vw;
    }
    .team_list .slick-list{
        overflow: visible !Important;
    }
    .team_list {
        margin-top: 70px;
    }
    .team_list a {
        position: relative;
        display: block;
        width: 224px;
        margin-bottom: 0;
        margin-right: 42px;
        z-index:10;
    }
    
    .team_list a:nth-child(2){z-index:9;}
    .team_list a:nth-child(3){z-index:8;}
    .team_list a:nth-child(4){z-index:7;}
    .team_list a:nth-child(5){z-index:6;}
    .team_list a:nth-child(6){z-index:5;}
    .team_list a:nth-child(7){z-index:4;}
    .team_list a:nth-child(8){z-index:3;}
    .team_list a:nth-child(9){z-index:2;}
    .team_list .img_area {
        position: relative;
    }
    .team_list .enh {
        left: -15px;
        bottom:38px;
        font-size: 16px;
        line-height: 21px;
    }
    .team_list .square,
    .team_list a:nth-child(5) .square {
        display: block;
        position: absolute;
        z-index:1;
        width: 117px;
        left: -45px;
        right:auto;
        bottom:auto;
        top:-4.16vw;
    }
    .team_list a:nth-child(2) .square,
    .team_list a:nth-child(4) .square,
    .team_list a:nth-child(6) .square {
        width: 160px;
        bottom:-8.75vw;
        left:-23.12vw;
        top:auto;
        right:auto;
    }
    .team_list .s_txt {
        padding:26px 0 10px;
        font-size: 10px;
    }
    .team_list .mincho {
        position: relative;
        padding:0;
        font-size: 17px;
        font-size: clamp(16px,4.25vw,18px);
    }
    .team_list .mincho span {
        font-size: 10px;
    }
    .team .slick-num{
        position: relative;
        display: block;
        width: 108px;
        margin-top: 42px;
        text-align: center;
    }
    .team .slick-num:before{
        content:"";
        display: block;
        width: 11px;
        height: 1px;
        background:#d7dfdf;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }
    .team .slick-num span{
        display:inline-block;
        font-size: 10px;
    }
    .team .slick-num .now-count{
        margin-right: 15px;
    }
    .team .slick-num .all-count{
        margin-left: 15px;
    }
    
    .team .slick-next{
        position: absolute;
        left: 95px;
        right: auto;
        bottom:-63px;
        top:auto;
        z-index:50;
    }
    .team .slick-prev{
        position: absolute;
        left: 0;
        right: auto;
        bottom:-63px;
        top:auto;
        z-index:50;
    }
    .team .slick-prev.slick-disabled,
    .team .slick-next.slick-disabled{
        opacity:0.5;
    }
    /*
.service .tit_area #arrow .slick-next.slick-disabled, .service .tit_area #arrow .slick-prev.slick-disabled
    */
}
/* ==========================================================================
	remove
========================================================================== */
.remove {
    position: relative;
    margin-bottom: 100px;
}
.remove .enh {
    display: block;
    font-size: 34px;
    font-size: clamp(32px,23.6vw,26px);
    line-height: 1.41176;
    padding-left: 6.94vw;
    z-index:10;
    position: absolute;
    top: 26.38vw;
}

.remove .img_area {
    position: relative;
    width: 86%;
    margin-left: 14%;
    border-radius:5px 0 0 5px;
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.05);
    z-index:5;
    background:url(../image/remove_img.jpg) center center;
    background-size:cover;
}
.remove .img_area:before{
    content:"";
    display: block;
    padding-top: 50.86%;
}
.remove .squarea {
    display: block;
    position: absolute;
    left: 0;
    top: 13.888vw;
    width: 25.69vw;
    height: 36.8vw;
    background:#f4f7f7;
    border-radius:0 5px 5px 0;
    z-index:1;
}
@media screen and (max-width : 800px ){
    .remove {
        margin-bottom: 10.5vw;
    }
    .remove .enh {
        font-size: 15px;
        font-size: clamp(14px,3.75vw,16px);
        line-height: 1.714;
        padding-left: 5.8vw;
        z-index:10;
        position: absolute;
        top: 44.75vw;
    }

    .remove .img_area {
        width: 88.75%;
        margin-left: 11.25%;
        background-image:url(../image/remove_img_sp.jpg);
    }
    .remove .img_area:before{
        padding-top: 76.75%;
    }
    .remove .squarea {
        top: 26.8vw;
        width: 42vw;
        height: 52vw;
    }

    
}


/* ==========================================================================
	bnr_area
========================================================================== */
.bnr_area {
    position: relative;
    padding:100px 0;
    background:url(../image/bnr_bg.jpg) center center;
    background-size:cover;
}
.bnr_area .link_area {
    position: relative;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    width: 90%;
    max-width:1240px;
    margin:0 auto;
}
.bnr_area a {
    display: block;
    border-radius:5px;
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.05);
    width: calc(25% - 13px);
    margin-right: 13px;
}
.bnr_area a:hover{
    box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.1);
    
}
.bnr_area a img{        
    border-radius:5px;
}
.bnr_area a:nth-child(4n){
    margin-right: 0;
}


@media screen and (max-width : 800px ){
    
    .bnr_area {
        padding:10vw 0 5vw;
    }
    .bnr_area .link_area {
        width: 87.5%;
        max-width:1240px;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .bnr_area a {
        width: 48.5%;
        margin-right: 0;
        margin-bottom: 5vw;
    }
    

}
/* ==========================================================================
	works
========================================================================== */
.works {
    position: relative;
    margin:100px auto 42px;
    padding-bottom: 55px;
}


.works ul {
    width:calc(100% - var(--rt-tit-width));
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding-left: 10px;
    box-sizing:border-box;
}
.works li {
    position: relative;
    width: calc(100% / 3 - 6.66px);
    height: 360px;
}
.works li:first-child,
.works li:nth-child(2){
    width: calc(50% - 5px);
    margin-bottom: 10px;
}
.works li a {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 280px;
    border-radius:3px;
}
.works li:first-child a,
.works li:nth-child(2) a{
    height: 360px;
}

.works li a:before{
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background:#000;
    opacity:.2;
    z-index:5;
    transition: opacity .3s var(--easeInOutCubic);
    
}

.works li a:hover:before{
    transition: opacity .3s var(--easeInOutCubic);
    opacity:0;
}

.works .text_area {
    position: absolute;
    width: calc(100% - 130px);
    left: 30px;
    bottom: 21px;
    z-index:20;
}
.works li a img{    
    border-radius:3px;
    transition: transform .3s var(--easeInOutCubic);
}
.works li a p {
    font-size: 22px;
    font-weight: 700;
    color:#fff;
    margin-bottom: 11px;
    transition: color .3s var(--easeInOutCubic);
}
.works li .text_area span.tag {
    display:inline-block;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
    color:#fff;
    padding-left: 30px;
    transition: color .3s var(--easeInOutCubic);
}
.works li .text_area span.tag:before{
     content:"";
    display: block;
    width: 21px;
    height: 1px;
    position: absolute;
    left: 0;
    top: 10px;
    background:#fff;
    transition: background .3s var(--easeInOutCubic);
}

.works li a .text_area span.tag span{
    position: relative;
    font-size: 13px;
    margin-right: 8px;
    
}
.works li a .text_area span.tag span:before{
    content: ",";
    display: block;
    position: absolute;
    left: -9px;
    top: 0;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    
}
.works li a .text_area span.tag span:first-child:before{
    display:none;
}

.works li a:hover .img_area img{    
    transform: scale(1.1);
}



.works li a .ar{
    display: block;
    width: 46px;
    height: 46px;
    position: absolute;
    right: 30px;
    bottom:26px;
    margin:auto;
    border-radius:46px;
    border:1px solid #fff;
    z-index:10;
    box-sizing:border-box;
    transition:all .3s var(--easeInOutCubic);
    
}
.works li a .ar:before{
    content:'';
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    width: 25px;
    height: 1px;
    background:#fff;
    transition:all .3s var(--easeInOutCubic);
}
.works li a .ar:after{
    content: '';
    position: absolute;
    top: 19px;
    right: 9px;
    width: 10px;
    height: 1px;
    transform: rotate(35deg);
    background:#fff;
    transition:all .3s var(--easeInOutCubic);
}

.works li a:hover .ar{
    background:var(--base-link-color);
    border-color:var(--base-link-color);
    transition:all .3s var(--easeInOutCubic);
}
.works li a:hover .ar:before,
.works li a:hover .ar:after{
    background:#fff;
    transition:all .3s var(--easeInOutCubic);
}


@media screen and (max-width : 1050px ){
    
    .works ul {width: 100%;}
}



@media screen and (max-width : 850px ){
    
    .works {padding-bottom: 125px;}
    .works li {
        width: 100%;
        height: 180px;
        margin-bottom: 10px;
    }
    .works li:first-child,
    .works li:nth-child(2){
        width: 100%;
        height: 250px;
    }
    .works li a {
        height: 180px;
    }

    .works li:first-child a,
    .works li:nth-child(2) a{
        height:250px;
    }

}

/*
@media screen and (max-width : 850px ){
    

    .works .text_area {
        width: calc(100% - 70px);
        left: 20px;
        bottom: 16px;
    }

    .works li a .ar{
        width: 30px;
        height: 30px;
        right: 20px;
        bottom:16px;
        margin:auto;

    }
    .works li a .ar:before{
        width: 13px;
    }
    .works li a .ar:after{
        top: 12px;
        right: 8px;
        width: 5px;
    }
}
*/
@media screen and (max-width : 800px ){
    
    .works {
        margin:25px auto 30px;
        padding-bottom: 90px;

    }
    .works ul {
        padding-left: 5px;
    }
    
    .works li {
        height: 160px;
        margin-bottom: 5px;
    }
    .works li:first-child, .works li:nth-child(2){
        margin-bottom: 5px;
    }
    .works li:first-child,
    .works li:nth-child(2){
        height: 190px;
    }
    .works li a {
        height: 160px;
    }

    .works li:first-child a,
    .works li:nth-child(2) a{
        height:190px;
    }
    .works .text_area {
        width: calc(100% - 80px);
        left: 4.25vw;
        bottom: 14px;
    }
    .works li a p {
        font-size: 17px;
        margin-bottom: 8px;
    }
    .works li .text_area span.tag {
        font-size: 11px;
        padding-left: 25px;
    }
    .works li .text_area span.tag:before{
        width: 15px;
        top: 8.5px;
    }



    .works li a .ar{
        width: 30px;
        height: 30px;
        right: 35px;
        right: 4.3vw;
        bottom:16px;
        border-radius:30px;

    }
    .works li a .ar:before{
        width: 14px;
    }
    .works li a .ar:after{
        top: 12px;
        right: 8px;
        width: 6px;
    }

}

/* ==========================================================================
	about
========================================================================== */
.about {
    position: relative;
}

.about.rt_box .tit_area{
    padding-top: 166px;
}
.about.rt_box .tit_area:before{
    top: 39px;
}

.about .text_area{
    position: relative;
    width:calc(100% - var(--rt-tit-width));
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
    justify-content: flex-end;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding-top: 145px;
    padding-bottom: 146px;
}

.about .bg_txt{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 160px;
    font-size: clamp(160px,11.11vw,180px);
    line-height: 160px;
    line-height: clamp(160px,11.11vw,180px);
    
    color:#f6f6f6;
    z-index:1;
}

.about .bg_txt.txt02{
    top: 538px;
    top:clamp(538px,32.5vw,630px);
}
.about .bg_txt.txt02:before{
    content:"";
    display: block;
    width: 890px;
    width: clamp(500px,61.8vw,1186px);
    height: 925px;
    position: absolute;
    left: 0;
    top:calc(100% - 30px);
    z-index:1;
    border-radius:0 3px 3px 0;
    background:#f6f6f6;
}





.about .txt_box{
    position: relative;
    width: 95%;
    max-width:890px;
    
}
.about h3 {
    position: relative;
    display:inline-block;
    margin-bottom: 4px;
    height: 88px;
    overflow: hidden;
    z-index:10;
}
.about .txt_box.move h3{
    /*
    animation: a-txt-views .4s var(--easeInOutCubic) forwards;
    animation-delay:.4s;    
    */
}
    
.about h3:before{
    content:"";
    display: block;
    width: 0;
    height: 2px;
    background:#222;
    position: absolute;
    left: 0;
    bottom:8px;
    z-index:1;
}
    
.about h3 span {
    position: relative;
    left: 0;
    bottom: 0;
    font-size: 70px;
    letter-spacing: 0.1em;
    font-weight: 700;
    top: 115%;
    z-index:5;
    font-weight: 700;
}

.about .txt_box.move h3 span{
    animation: a-t-views .8s var(--easeInOutCubic) forwards;
    animation-delay:.4s;
    
}
.about .txt_box.move h3:before{
    animation: a-txt-views .4s var(--easeInOutCubic) forwards;
    
}


@keyframes a-txt-views {
  0% {
    width: 0;
  }
  100% {
    width:100%;
  }
}

@keyframes a-t-views {
  0% {
    top:100%;
  }
    100%{
    top:15px;
    }
}


.about .b_txt {
    position: relative;
    width: 90%;
    max-width:890px;
    font-size: 18px;
    line-height: 46px;
    font-weight: 700;
    margin-top: 69px;
    z-index:10;
    letter-spacing: 0.1em;
}


@media screen and (min-width : 1450px ){
    .about .bg_txt.txt02:before{
        height: 850px;
    }
}

@media screen and (max-width : 1050px ){
    .about .text_area{width: 100%;}
    .about.rt_box .tit_area{padding-top: 0;}
    .about.rt_box .tit_area:before{top: 0;}
    .about h3 {
        height: 83px;
    }

    .about h3 span {
        font-size: 65px;
    }
}

@media screen and (max-width : 940px ){
    .about h3 {
        height: 83px;
    }

    .about h3 span {
        font-size: 65px;
    }


}
@media screen and (max-width : 880px ){
    .about h3 {
        height: 80px;
    }

    .about h3 span {
        font-size: 60px;
    }
    .about h3:before{bottom:3px;}

}


@media screen and (max-width : 800px ){
    
    .about {
        width: 100%;
        padding-right:0;
    }
    .about .tit_area{
        width: 80px;
    }
    .about .text_area{
        display: block;
        width:calc(100% - 10vw);
        padding-top: 20px;
        padding-bottom: 88px;
        margin:0 auto;
    }

    .about .bg_txt{
        position: absolute;
        left: calc(-5vw - 10px);
        top: 0;
        font-size: 80px;
        font-size: clamp(80px,18vw,150px);
        line-height:1.125;
    }

    .about .bg_txt.txt02{
        top: 70vw;
        top: clamp(310px,60vw,500px);
    }
    .about .bg_txt.txt02:before{
        display:none;
    }





    .about .txt_box{
        width: 100%;
    }
    
    .about h3 {
        height: 77px;
    }

    .about h3 span {
        font-size: 55px;
    }



    .about .b_txt {
        width: 100%;
        font-size: 13px;
        line-height: 26px;
        margin-top: 30px;
    }


}
@media screen and (max-width : 750px ){
    
    .about h3 {
        height: 64px;
    }

    .about h3 span {
        font-size: 50px;
    }

}
@media screen and (max-width : 710px ){
    
    .about h3 {
        height: 63px;
    }

    .about h3 span {
        font-size: 43px;
    }


}
@media screen and (max-width : 610px ){
    
    .about h3 {
        height: 53px;
    }
    .about h3 span {
        font-size: 36px;
    }


}

@media screen and (max-width : 510px ){
    
    .about h3 {
        height: 46px;
    }
    .about h3 span {
        font-size: 29px;
    }


}
@media screen and (max-width : 430px ){
    
    .about h3 {
        height: 41px;
    }

    .about h3 span {
        font-size: 24px;
    }

}

/* ==========================================================================
	service
========================================================================== */
.service {
    position: relative;
    z-index:50;
    margin-top:120px;
    margin-bottom: 120px;
    padding-bottom: 129px;
}
/*
.service.rt_box .tit_area{
    padding-top: 177px;
}
*/
.service.rt_box .tit_area h2{
    letter-spacing: 0.1em;
}
.service.rt_box .tit_area span{
    transform: translateY(30px);
}
.service .tit_area #arrow{
     position: relative;
    width:100%;
    margin:112px auto 0;
    z-index:100;
}
.service .tit_area #arrow .slick-next,
.service .tit_area #arrow .slick-prev{
     width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    margin:auto;
    background:url(../image/slide_ar01.png);
    background-size:cover;
    border:1px solid #222;
    border-radius:60px;
    z-index:100;
}
.service .tit_area #arrow .slick-prev{
    top: 80px;
    background-image:url(../image/slide_ar02.png);
}

.service .tit_area #arrow .slick-next.slick-disabled,
.service .tit_area #arrow .slick-prev.slick-disabled{
    opacity:.5;
}

.service .tit_area #arrow .slick-prev.slick-arrow{
    z-index:300;
}

.service .link_area{
    position: relative;
    width:calc(100% - var(--rt-tit-width));
    padding-left: 10px;
    box-sizing:border-box;
}
.service .link_area ul{
     width: 100%;   
}
.service li {
    width: 310px;
    max-width:310px;
    height: 640px;
    margin-right: 10px;
}
.service li a {
    display: block;
    position: relative;
    width: 100%;
    height: 310px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius:3px;
}

.service li a.pc_off{
     display:none;   
}
.service li a:before{
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius:3px;
    background:#000;
    opacity:.2;
    z-index:5;
    transition: opacity .3s var(--easeInOutCubic);
    
}

.service li a:hover:before{
    transition: opacity .3s var(--easeInOutCubic);
    opacity:0;
}

.service li a .text_area {
    position: absolute;
    width: calc(100% - 30px);
    left: 0px;
    bottom: 30px;
    padding-left: 30px;
    box-sizing:border-box;
    z-index:20;
}

.service li a img{    
    border-radius:3px;
    transition: transform .3s var(--easeInOutCubic);
}
.service li a p {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    color:#fff;
    margin-bottom: 10px;
    transition: color .3s var(--easeInOutCubic);
}

.service li a p.s_txt{
    font-size: 21px;
}
.service li a span {
    position: relative;
    font-size: 13px;
    color:#fff;
    transition: color .3s var(--easeInOutCubic);
}

.service li a p:before{
     content:"";
    display: block;
    width: 21px;
    height: 1px;
    position: absolute;
    left: -30px;
    top: 9px;
    background:#fff;
    transition: background .3s var(--easeInOutCubic);
}
/*
.service li a:hover .text_area p:before{
    background:var(--base-link-color);
    transition: background .3s var(--easeInOutCubic);
}
*/


.service li a:hover img{    
    transform: scale(1.1);
}
/*
.service li a:hover p,
.service li a:hover span{  
    color:var(--base-link-color);
    transition: color .3s var(--easeInOutCubic);
}
*/

@media screen and (min-width : 1920px ){
    
    .service .link_area{
        padding-left: 0;
    }
}


@media screen and (max-width : 1050px ){
    .service{padding-top: 0;}
    
    .service.rt_box{
        padding-right:0;
    }
    .service.rt_box .link_area{
        width: calc(100% - 11.1111vw);
    }
    .service.rt_box .tit_area{
        width: 11.1111vw;
        right:0;
    }
    .service.rt_box .tit_area:before{
        left:0;
    }
    .service.rt_box .tit_area span{
        display:inline-block;
        
    }
}


@media screen and (max-width : 800px ){

    .service {
        padding-top: 65px;
        margin-top:32px;
        margin-bottom: 32px;
        padding-bottom: 90px;
    }
    
    .service.rt_box{
        padding-right: var(--rt-pd);
        
    }
    .service.rt_box .link_area{
        width: 100%;
    }
    .service.rt_box .tit_area{
        right: var(--rt-pd);
        top: 0;
        padding-top: 0;
         width: var(--rt-tit-width); 
    }
    .service.rt_box .tit_area h2{
        font-size: 23px;
        
    }
    .service.rt_box .tit_area:before{
        height: 60px;
        left: auto;
    }
    .service.rt_box .tit_area span{
        display:block;
        display: block;
        transform: translateY(2px);
        text-align: left;
        margin-right: 3px;
    
    
    }
    
    
    
    
    .service .tit_area #arrow{display:none;}

    .service .link_area{
        position: relative;
        width:100%;
        padding-left: 5px;
        box-sizing:border-box;
    }
    .service .link_area ul{
         width: 100%;   
    }
    .service li {
        width: 100%;
        max-width:800px;
        height: 43.5vw;
        height:clamp(175px,43.5vw,280px);
        margin-right: 0;
        margin-bottom: 5px;
        -js-display: flex;
        display:-webkit-box;
        display: -webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .service li a {
        width: calc(50% - 2px);
        height: 43.5vw;
        height:clamp(175px,43.5vw,280px);
        margin-bottom: 0;
    }
    .service li a.sp_off{display:none;}
    .service li a.pc_off{display:block;}

    .service li a .text_area {
        width: calc(100% - 10px);
        left: 0;
        bottom: 15px;
        padding-left: 17px;
    }
    .service li a p{
        margin-bottom: 5px;
    }
    .service li a p,
    .service li a p.s_txt {
        font-size: 14px;
    letter-spacing: 0.06em;
    }
    .service li a span {
        position: relative;
        font-size: 10px;
    }

    .service li a p:before{
        width: 12px;
        left: -17px;
        top: 6px;
    }

}