@charset "utf-8";



/* ==========================================================================
	mv
========================================================================== */
.load {
    width: 100%;
    height: 100vh;
    z-index:99999999;
    background:#fff;
    position:fixed;
    display: flex;
    align-items: center;
    justify-content: center; 

}
#mv{
    position: relative;
    width: 100%;
    /*
    height: calc(100vh - 120px);
    
    */
    height: calc(100vh + 8.33vw);
    min-height:750px;
    position: relative;
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    transition: transform 2s ease;
    background:#fff;
    z-index:50;
}

#mv.on{
    -ms-transform: scale(1);
    transform: scale(1);
    
    transition: transform 2s ease;
}
#mv .text_area{
    position: absolute;
    top: 357px;
    left: 8.333vw;
    z-index:50;
}

#mv .text_area h1{
     display: block;
    font-size: 50px;
    font-size: clamp(48px,3.472vw,54px);
    line-height: 1.4;
    letter-spacing: 0.15em;
    font-weight: 300;
}
#mv .text_area p{
    position: relative;
    font-size: 18px;
    font-size: clamp(17px,1.25vw,20px);
    display: block;
    margin-top: 50px;
    color:#555555;
    letter-spacing: 0.1em;
    transform: translateX(10px);
}
#mv .img_area{
    position: absolute;
    width: 77.7777%;
    height: 100%;
    right: 0;
    top: 0;
    z-index:1;
    overflow: hidden;
}

#mv .img_area li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 100;
    -webkit-animation: main 20s linear 0s infinite ;
    animation: main 20s linear 0s infinite ;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    
}
#mv .img_area li:nth-child(1) { 
    background-image: url(http://2021tuboyama.anabukicg.com/creit/assets/image/nanase_bg01.jpg);  
}
#mv .img_area li:nth-child(2) {
    background-image: url(http://2021tuboyama.anabukicg.com/creit/assets/image/nanase_bg02.jpg);  
    -webkit-animation-delay: 11.5s;
    animation-delay: 11.5s;
    opacity:0;
}
@-webkit-keyframes main { 
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: scale(1);
    }
    6% {        
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    25% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: scale(1.03);
        opacity: 1;
    }
    56% {
        opacity:1;
    }
    62% {
        opacity: 0;
    }
    70%{
        
        -webkit-transform: scale(1.06);
    }
    
    
    100% { opacity: 0 }
}
@keyframes main { 
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: scale(1);
    }
    6% {        
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    25% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: scale(1.03);
        opacity: 1;
    }
    56% {
        opacity:1;
    }
    62% {
        opacity: 0;
    }
    70%{
        
        -webkit-transform: scale(1.06);
    }
    
    
    100% { opacity: 0 }
}


.scroll{
  display: inline-block;
  position: absolute;
    left: 4.5vw;
  bottom: 8.3vw;
    bottom:calc(8.3vw - 20px);
  z-index: 2;
  padding: 0 0 100px;
  overflow: hidden;
  color: #222;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    animation: s-views 1.5s cubic-bezier(.25, .46, .45, .94) forwards;
    animation-delay:1.5s;
    opacity:0;
}
@keyframes s-views {
  0% {
    opacity:0;
  }
    100%{
    opacity:100;
    transform: translateY(0);
    }
}
.scroll:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 47%;
  width: 1px;
  height: 80px;
  background: #222;
  animation: sdl 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}




@media screen and (max-width : 800px ){
    #mv{
        height: 100vh;
        height:calc(100vh - 95px);
        min-height:100px;
    }
    #mv .text_area{
        position: absolute;
        top:auto;
        bottom:45px;
        left: 5.8vw;
        z-index:50;
    }

    #mv .text_area h1{
        font-size: 30px;
        font-size: clamp(29px,7.625vw,32px);
        line-height: 1.4;
    }
    #mv .text_area p{
        font-size: 12px;
        font-size: clamp(12px,3.2vw,14px);
        margin-top: 30px;
        transform: translateX(5px);
    }
    #mv .img_area{
        position: absolute;
        width: 100%;
        height: 80%;
        height:calc(100% - 150px);
        right: 0;
        top: 0;
        z-index:1;
        overflow: hidden;
    }
    .scroll{
        left: auto;
      bottom: 0;
        right: 5vw;
      padding-bottom:52px;
      overflow: hidden;
      color: #222;
      font-size: 10px;
    }
    .scroll:after {
      height: 42px;
    }
}



/* ==========================================================================
	intro
========================================================================== */
.intro {
    position: relative;
    z-index:100;
    padding-bottom:14.652vw;
    background:#fff;
}
.intro .b_img {
    position: absolute;
    left: 0;
    top: -8.33vw;
    width: 43.05vw;
    border-radius:0 5px 5px 0;    
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    z-index:50;
    background:url(http://2021tuboyama.anabukicg.com/creit/assets/image/nanase_img01.jpg) center center;
    background-size:cover;
}
.intro .b_img .img_area{
    position: relative;
    border-radius:0 5px 5px 0;    
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    z-index:50;
    min-height: 870px;
    background:url(http://2021tuboyama.anabukicg.com/creit/assets/image/nanase_img01.jpg) center center;
    background-size:cover;
    
}
.intro .b_img .img_area:before{
    content:"";
    display: block;
    padding-top: 174.19%;
}
.intro .b_img img{
    position: relative;
    border-radius:0 5px 5px 0;    
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    z-index:10;
}
.intro .b_img span{
    display: block;
    width: 25.69vw; 
    position: absolute;
    right: -5.5vw;
    bottom:-7.5vw;
    z-index:1;
}
.intro .b_img span {
    /*
  animation: fuwafuwa 5s infinite ease-in-out .8s alternate;
    */
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0,0); opacity:100;
  }
  50% {
    transform:translate(.5vw, -.2vw); opacity:0.4;
  }
  100% {
    transform:translate(0,0); opacity:100;
  }
}

.intro .b_img span img{
    box-shadow: none;
    
}
.intro .text_area01 {
    position: relative;
    padding:9vw 20px 0 54vw;
    box-sizing:border-box;
    z-index:10;
}
.intro .enh {
    font-size: 16px;
    color:#919f9f;
}
.intro h2 {
    position: relative;
    font-size: 36px;
    font-size: clamp(34px,2.5vw,40px);
    line-height: 1.333;
    letter-spacing: 0.14em;
    margin:50px 0 75px;
}
.intro p {
    position: relative;
    font-size: 16px;
    font-size: clamp(15px,1.11vw,17px);
    line-height: 2.5;
    z-index:10;
}

.intro .m_con {
    position: relative;
    margin-top: 9.3vw;
    z-index:60;
}
.intro .m_con .square{
    display: block;
    width: 80px;
    position: absolute;
    right: 41.3vw;
    top: 7.5vw;
    z-index:1;
}
.intro .m_con .square img{
     position: relative;
    z-index:10;
    border-radius:5px;
}
.intro .m_con .square img:last-child{
     position: absolute;
    z-index:15;
    width: 60px;
    left: -40px;
    bottom:-60px;
}
.intro .m_con .square02{
    display: block;
    width: 120px;
    left: 0;
    bottom: 6.9vw;
    position: absolute;
}
.intro .m_con .square02 img{
     position: relative;
    z-index:10;
    border-radius:0 5px 5px 0;
}
.m_con .m_img {
    position: absolute;
    right: 0;
    top: 0;
    width: 27vw;
}
.m_con .m_img img {
    position: relative;
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    z-index:50;
    border-radius:5px 0 0 5px;
}
.m_con .m_img span{
    display: block;
    width: 21.52vw; 
    position: absolute;
    right: 12.5vw;
    bottom:-7.63vw;
    z-index:-1;
}
.m_con .m_img span {
    /*
  animation: fuwafuwa 8s infinite ease-in-out .8s alternate;
    */
}
.m_con .m_img span img{
     z-index:1;   
    box-shadow:none;
    border-radius:5px;
}
.m_con p {
    padding:13.19vw 0 0 18.4vw;
    z-index:10;
}

.m_con .mc_img{
    position: relative;
    width: 11.11vw;
    margin:9.72vw 0 0 24.51vw;
}

.m_con .mc_img img{
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 5%);
    border-radius:5px;    
}
.m_con a{
    display: block;
    position: absolute;
    
    left: 54.02vw;
    bottom:0;
    width: 50%;
    max-width: 480px;
    padding-bottom:17px;
    border-bottom:1px solid #c2cccc;
    letter-spacing: 0.1em;
    font-size: 15px;
    font-size: clamp(15px,10.416vw,16px);
    
}
.m_con a:before{
    content: "";
    display: block;
    position: absolute;
    left: 120px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: left 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.m_con a:hover:before{
    left: 125px;
    transition: left 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.m_con a:after{
    position: absolute;
    left: 0;
    content: '';
    width:0;
    height: 1px;
    background: #222;
    bottom: 0;
    transition: width 0.6s cubic-bezier(.25, .46, .45, .94);
}
.m_con a:hover:after{
    width: 100%;
    transition: width 0.6s cubic-bezier(.25, .46, .45, .94);
}
    
.intro .bottom{
    position: absolute;
    width: 100%;
    left: 0;
    bottom:0;
    z-index:1;
}

@media screen and (max-width : 1200px ){
    
.m_con a{
    left:auto;
    right:3vw;
    }
}
@media screen and (max-width : 800px ){

    .intro {
        padding-bottom:17.5vw;
        padding-top: 3.75vw;
    }
    .intro .b_img {
        position: relative;
        width: 66.75%;
        top:0;
    }
    .intro .b_img .img_area{
        min-height:100px;
    }
    .intro .b_img .img_area:before{
        content:"";
        display: block;
        padding-top: 174.19%;
    }
    .intro .b_img span{
        display: block;
        width: 49.375%; 
        position: absolute;
        right: -24.375%;
        bottom:-11.8vw;
    }

    .intro .text_area01 {
        padding:28.375vw 2vw 0 8vw;
    }
    
    .square_sp{
        display: block;
        width:21.375vw;
        height: 42.75vw;
        position: absolute;
        right: 0;
        top: 62vw;
        background:#f4f7f7;
        border-radius:5px;
        z-index:1;
    }
    
    .square_sp img{
        display: block;
        width: 16.125vw;
        position: absolute;
        right: 12.5vw;
        bottom:-11.25vw;
        border-radius:5px;
    }
    .intro .enh {
        font-size: 12px;
    }
    .intro h2 {
        font-size: 25px;
        font-size: clamp(24px,6.125vw,26px);
        margin:24px 0 45px;
    }
    .intro p {
        position: relative;
        font-size: 12px;
        font-size: clamp(12px,2.93vw,13px);
        line-height: 2.27;
        padding-right: 3vw;
        box-sizing:border-box;
    }

    .intro .m_con {
        margin-top: 11vw;
    }
    .m_con .m_img {
        position: relative;
        right: auto;
        top: 0;
    width: 64%;
    margin-left: 36%;
    }
    .m_con .m_img img.index {
    z-index:50;}
    .m_con .m_img span{
        width: 57.3vw; 
        right: 34.375vw;
        bottom:-7.75vw;
    }
    .m_con p {
        padding:17.8vw 2vw 0 8vw;
    }

    .m_con .mc_img{
        width: 32%;
        margin:15.6vw auto 16vw;
    }

    .m_con a{
        display: block;
        position: relative;
        left: auto;
        right: auto;
        margin:0 auto;
        width: 66.8%;
        padding-bottom:10px;
        font-size: 12px;

    }
    .m_con a:before{
        left: 81px;
        top:4px;
    }
    .m_con a:hover:before{
        left: 85px;
    }
}
/* ==========================================================================
	project
========================================================================== */
.project {
    position: relative;
    z-index:5;
    padding:9.02vw 0;
    background:#fff;
    /*
    margin-bottom: 380px;
    */
}
.project .square{
    display: block;
    width: 10.27vw;
    position: absolute;
    right: 3.47vw;
    top: -4.86vw;
    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: 10.41vw;
    top:11.111vw;
    z-index:5;
}
.project h3 {
    display: block;
    width: 394px;
    margin:90px auto 80px;
}
.project .c_txt {
    position: relative;
    width: 90%;
    max-width:1035px;
    margin:0 auto;
    font-size: 16px;
    font-size: clamp(15px,1.11vw,17px);
    line-height: 2.5;
    letter-spacing: 0.1em;
    z-index:20;
}
.project_box_wrap{
    position: relative;
}
.project_box {
    position: relative;
	-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;
    align-content: flex-start;
    margin-top: 110px;
    margin-top:max(110px,8.33vw);
    z-index:30;
}
.project_box:nth-child(2){
    z-index:20;
}
.project_box:nth-child(3){
    z-index:10;
}
.p-slide{
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
}
.project_box .img_area {
    position: relative;
    width: 59.6%;
    border-radius:5px;
    /*
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    */
}

.project_box .slick-list{
    border-radius:5px;
}
.p-slide .img{
    position: relative;
}
.p-slide .img:before{
    content:"";
    display: block;
    padding-top: 62.14%;
}


.project_box:hover .img_area img{
    transform: scale(1.05);
    transition: transform 0.4s cubic-bezier(.25, .46, .45, .94);     
}

.project_box .img_area img {
    border-radius:5px;
    transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.project_box .text_area {
    position: relative;
    /*
    width: 38%;
    max-width:400px;
    */
    width: 32.5%;

    display: flex;
    align-items: center;
    justify-content: center; 
    z-index:20;
}
.project_box .img_area .v_txt{
    display:inline-block;
    position: absolute;
    right: -20px;
    bottom:0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    
}
.project_box .enh {
    font-size: 12px;
    color:#919f9f;
}
.project_box h4 {
    font-size: 26px;
    line-height: 40px;
    letter-spacing: 0.1em;
    margin:44px 0 30px;
}
.project_box:hover h4 a{
    color: #799191;
}
.project_box .tag_area{
    display: block;
}
.project_box .tag_area a{
    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;
}
.project_box .tag_area a:hover{
    color:#fff;
    background:#d1dada;
}
.project_box .text_area p {
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.1em;
    margin:40px 0 54px;
}
.project_box .text_area a.ensb {
    position: relative;
    display: block;
    font-size: 14px;
    letter-spacing: 0.1em;
}
.project_box .text_area a.ensb:before{
    content:"";
    display: block;
    position: absolute;
    width: 160px;
    height: 1px;
    left:100px;
    top: 8px;
    background:#d1dada;
}
.project_box .text_area a.ensb:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:100px;
    top: 8px;
    background:#222;
    z-index: 10;
    transition: width 0.6s cubic-bezier(.25, .46, .45, .94);
}
.project_box:hover .text_area a.ensb:after{
    width: 160px;
    transition: width 0.6s cubic-bezier(.25, .46, .45, .94);
}

.project_box .slick-dots{
    position: absolute;

    bottom:auto;
    width: 10px;
    right: -20px;
    top: 0;
}
.project_box .slick-dots li{
    display: block;
    margin:0 0 6px;
}
.project_box .slick-dots li button{
    width: 8px;
    height: 8px;
    border-radius:8px;
    background:#fff;
    border:1px solid #d1dada;
    box-sizing:border-box;
}
.project_box .slick-dots li.slick-active button{
    background:#d1dada;
}
.project_box .slick-dots li button:before{
    display:none;
}
.project .box_square{
    display: block;
    width: 150px;
    height: 340px;
    position: absolute;
    left:-6.94vw;
    top: -80px;
    border-radius: 0 5px 5px 0;
    background:#f4f7f7;
    z-index:1;
}

.project_box:nth-child(2){
    flex-direction: row-reverse;
}
.project_box:nth-child(2) .slick-dots{
    right: auto;
    left: -20px;
}
.project_box:nth-child(2) .img_area .v_txt{
    right: auto;
    left: -20px;    
}
.project_box:nth-child(2) .box_square{
    width: 200px;
    height: 350px;
    left:auto;
    right:-6.94vw;
    border-radius: 5px 0 0 5px;
    background:none;
}
.project_box:nth-child(3) .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;
    background:#fff;
    margin-top: 120px;
    margin-top:max(120px,8.33vw);
    z-index:50;
}
.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;
}
.intro .m_con .square04 img{
     position: relative;
    z-index:10;
    border-radius:5px;
}

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

    .project_box {align-items: flex-start;}
}


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

    .project_box .img_area {
        width: 100%;
    }
    .project_box .text_area {
        width: 100%;
        padding-top: 40px;
    }
    .project_box h4 {
        margin:34px 0 20px;
    }
}

@media screen and (max-width : 800px ){
    
    .project {
        padding:18.5vw 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;
    }
    .project_box {
        margin-top: 75px;
        margin-top:min(75px,19.6vw);
    }
    .project_box .slick-list{
        border-radius:0 5px 5px 0;
        
    }
    .project_box:nth-child(2n) .slick-list{
        border-radius: 5px 0 0 5px;
    }
    .project_box:nth-child(2),
    .project_box:nth-child(3) {
        margin-top: 55px;
        margin-top:min(55px,13.75vw);
    }
    
    
    .project_box .img_area {
        width: calc(100% + 6.25vw - 15px);
        transform: translateX(-6.25vw);
        border-radius:0 5px 5px 0;
     }
    .project_box .img_area img{
        border-radius:0 5px 5px 0;        
    }
    .project_box:nth-child(2) .img_area {
        width: calc(100% + 6.25vw - 15px);
        transform: translateX(6.25vw);
        border-radius: 5px 0 0 5px;
     }
    .project_box:nth-child(2) .img_area img{
        border-radius: 5px 0 0 5px;
     }
    .project_box .text_area {
        padding: 35px 0 0 3.75vw;
        box-sizing:border-box;
    }
    .project_box .img_area .v_txt{
        right: -16px;
        font-size: 10px;
    }
    .project_box .enh {
        font-size: 10px;
    }
    .project_box h4 {
        font-size: 19px;
        line-height: 26px;
        margin:23px 0 15px;
    }
    .project_box .tag_area a{
        padding:5px 10px;
        margin:0 5px 5px 0;
        font-size: 10px;
    }
    .project_box .text_area p {
        font-size: 11px;
        line-height: 24px;
        margin:20px 0 30px;
    }
    .project_box .text_area a.ensb {
        font-size: 11px;
    }
    .project_box .text_area a.ensb:before{
        width: 113px;
        height: 1px;
        left:75px;
        top: 6px;
    }
    .project_box .text_area a.ensb:after{
        height: 1px;
        left:75px;
        top: 6px;
    }
    .project_box .text_area a.ensb:hover:after{
        width: 113px;
    }

    .project_box .slick-dots{
        width: 7px;
        right: -15px;
    }
    .project_box .slick-dots li{
        margin:0 0 5px;
    }
    .project_box .slick-dots li button{
        width: 7px;
        height: 7px;
        border-radius:7px;
        background:#fff;
    }
    .project .box_square{
        width: 17.5vw;
        height: 170px;
        left:-6vw;
        top: -7.5vw;
    }
    .project_box:nth-child(2) .slick-dots{
        right: auto;
        left: -15px;
    }
    .project_box:nth-child(2) .img_area .v_txt{
        right: auto;
        left: -15px;    
    }
    .project_box:nth-child(2) .box_square{
        width: 17.5vw;
        height: 170px;
        right:-6vw;
    }
    .project_box:nth-child(3) .box_square{
        width: 17.5vw;
        height: 170px;
    }

    .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{
         display: block;
        width: 54px;
        height: 107px;
        right: 0;
        bottom:23px;
        z-index:5;
    }
    .project .square04{
        width: 40px;
        right: 42px;
        bottom: -16px;
    }
}

/* ==========================================================================
	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;
    z-index:50;
}
.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:55px 1.319vw 11px;
    box-sizing:border-box;
    font-size: 14px;
    line-height: 1.5;
    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
========================================================================== */
.blog {
    padding-top:130px;
    padding-bottom:140px;
}
.blog .blog_link_list {
	-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;
    margin-top:94px;
}

.blog .blog_link_list .list{
    position: relative;
     width: 20.96%;   
    margin-right: 4.04%;
}
.blog .blog_link_list .list:nth-child(4){
    margin-right: 0;
}

.blog_link{
    display: block;
    margin-bottom: 15px;
}

.blog_link .img_area{
    position: relative;
    width: 100%;
    border-radius:5px;
}
.blog_link .img_area .en{
     display: block;
    font-size: 16px;
    position: absolute;
    left: 15px;
    top: -10px;
}
.blog_link .img_area .inr{
    position: relative;
    width: 100%;
    border-radius:5px;    
    overflow: hidden;
}
.blog_link .img_area .inr:before{
    content:"";
    display: block;
    padding-top: 100%;
}

.blog_link .img_area .v_txt{
     position: absolute; 
    right: -18px;
    bottom:0;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.blog_link .img_area .new{
     display: block;
    width: 79px;
    height: 38px;
    position: absolute;
    left: 15px;
    top: -26px;
    background:url(../image/common/new.png);
    background-size:cover;
    z-index:10;
}
.blog_link p{
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0.1em;
    margin:35px 0 30px;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.blog_link:hover p{
    color:#799191;
    transition: color 0.4s cubic-bezier(.25, .46, .45, .94); 
}


.blog_link img{  
    transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
    border-radius:5px;
}
.blog_link:hover img{  
    transform: scale(1.05);
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.blog_link .ensb{
     font-size: 14px;   
}
.blog .blog_link_list .list .tag{
    position: relative;
    font-size: 12px;
    color:#799191;
    display:inline-block;
    margin-right: 5px;
    margin-bottom: 8px;
    text-decoration:underline;
}

.blog .blog_link_list .list .tag:after{
    content:",";
    display: block;
    position: absolute;
    right: -2px;
    bottom:0;
}
.blog .blog_link_list .list .tag:last-child:after{
    display:none;
}

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

    .blog {
        padding-top:18vw;
        padding-bottom:15vw;
    }
    .blog .blog_link_list {
        display: block;
        margin-top:45px;
    }

    .blog .blog_link_list .list{
         width: 192px;   
        margin-right: 43px;
    }

    .blog_link{
        display: block;
        margin-bottom: 15px;
    }

    .blog_link .img_area{
        position: relative;
        width: 100%;
        border-radius:5px;
    }
    .blog_link .img_area .v_txt{
        right: -18px;
        font-size: 10px;
    }
    .blog_link .img_area .new{

        width: 60px;
        height: 29px;
        top:-15px;
        left: 10px;
    }
    .blog_link p{
        font-size: 16px;
        line-height: 24px;
        margin:25px 0 20px;
    }
    .blog_link .ensb{
         font-size: 10px;   
    }
    .blog .blog_link_list .list .tag{
        font-size: 10px;
        margin-right: 8px;
        text-decoration:none;
    }
    .blog .blog_link_list .list .tag:after{display:none;}
    
    .blog .slick-list{overflow: inherit !Important;}

}



/* ==========================================================================
	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;
    }

}