@charset "utf-8";
/* .cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 1px solid #FF0015;
    opacity: 0.5;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    z-index: 300;
    transform: translate(calc(-50% + 15px), -50%);
}
.cursor2 {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #00ccff;
    mix-blend-mode: difference;
    opacity: 1;
    position: fixed; z-index: 300;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width .3s, height .3s, opacity .3s;
}
.cursorinnerhover {
    width: 50px;
    height: 50px;
    opacity: .5;
}
.expand{
    animation : cursorAnim 0.5s forwards;
} 
@keyframes cursorAnim{
    0%{ transform: scale(1); }
    50%{ transform: scale(3);}
    100%{ transform: scale(1);}
} */

/* modal */
#modal{
    position: fixed;
    top: 50%; right: -460px;
    z-index: 999;
    transform: translate( 0 , -50% );
    width: 480px; height: 600px;
    /* background-color: rgb(255, 255, 255); */
    /* border-left: 1px solid var(--black); */
    /* display: none; */
}
.modalimg{
    position: absolute;
    top: 50%; right: 1%;
    transform: translate(0,-50%);
    height: 100%; 
    border-radius: 5px;
    overflow: hidden;
}
.modalimg>img{
    width: 100%;
    object-fit: contain;
}
.modalclose{
  position: absolute;
  top: 0; left: 0;
  width: 10%; height: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px 0 0 10px;
  /* background-image: radial-gradient(100% 70% at 90% 90%, rgb(245, 59, 102) 00%,rgba(255, 171, 190, 0.2) 100%); */
  font-size: 60px; 
  /* background: linear-gradient(0.25turn,#252525,100%, #ffffff,100%, #7dd4f7 ); */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal.click{
  animation: slide 0.4s forwards;
}
@keyframes slide{
  100%{
    right: 0;
  }  
}

@media all and ( max-width : 1440px){
  #modal{
    width: 450px; height: 100%;
  }
  .modalclose{
    font-size: 50px;
  }
}
@media all and ( max-width : 1024px){
  #modal{
    width: 400px; 
  }
  .modalclose{
    top: 5%; left: calc( 50% - 5vw);
    width: 10vw; height: 10vw;
    font-size: 50px;
  }
}
@media all and ( max-width : 500px){

    .modalimg{
        width: 290px; height: 403px;
        border-radius: 15px;
    }
}

.fade-in {
	-webkit-animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fade-out {
	-webkit-animation: fade-out 1s ease-out both;
	        animation: fade-out 1s ease-out both;
}
 @-webkit-keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/*  */


/* hero_section */
.hero_section .main_hero{
  width: 100%;
  height: 100vh;
  min-height: 900px;
  display: flex;
  justify-content: center; align-items: center;
  position: relative;
}
.hero_bg{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(75% 75% at 50% 50%, #FAFAF3 0%, #d3d2d3 100%);
}
.main_tit{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 11;
}
.main_tit h1{
  font-size: 6.5rem;
  font-weight: 200;
  /* letter-spacing: 0.15em; */
  color: var(--black);
}
.main_tit h4{
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--main-color);
  margin-top: 3rem;
}
.hero_circle{
  z-index: 10;
  width: 35vw; height: 35vw;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d( -50%, -50%, 0);
  transform-origin: center;
  filter: blur(15px);
  border-radius: 50%;
  opacity: 0.7;
  /* background-image: linear-gradient(135deg, rgb(188, 218, 174), rgba(250, 250, 243, 0)); */
  /* background-color: #ffbbd1; */
  background-color: #f197b2;
  /* background-color: #fff; */
}
.hero_circle::after {
  content:"";
  width: 100%; height: 100%;
  position: absolute;
  inset: -10px;
  z-index: -1;
  /* opacity: 1; */
  filter: blur(4px);
  background-image: linear-gradient(135deg, rgb(238, 194, 217),75%, rgba(255, 255, 255, 0));
  mix-blend-mode: color-dodge;
  border-radius: inherit;
}

/* about */
.main_about{
  padding: 20rem 0 40rem 0;
  position: relative;
  z-index: 11;
}
.main_about{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.main_about_tit_wrap{
  display: flex;
  justify-content: space-between; align-items: center;
}
.main_about_tit{
  font-size: 6.2rem;
  white-space: nowrap;
  margin: 0 10rem;
}
.main_about_tit h1{
  display: inline-block;
}
.main_about_tit .clipping span{
  display: inline-block;
  color: var(--main-color);
}
.main_about hr{
  margin: 1rem 0;
  width: 0;
}
.main_about_txt{
  /* width: 30%; */
  font-size: 2.2rem; 
  color: var(--outline);
  line-height: 1.6;
  margin-top: 10rem;
  text-align: center;
}

/* ====== main ===== */
.main_section{
  position: relative ; 
}
/* work */
.main_work_bg{
  width: 100%;
  padding: 20rem 0 5rem 0;
}
.main_work_bg h3{
  font-size: 4rem;
  color: var(--black);
  text-align: center;
}
.main_work_wrap{
  width: 100%;
  padding: 5.8rem 0;
}
.main_work_wrap>.main_icon{
  margin: 0 auto;
}
.main_work_flex{
  width: 100%;
  padding: 10rem 0;
  display: flex;
  align-items: center;
}
.main_work_img{
  width: 50%;
  padding: 5rem 8%;
  display: flex;
  justify-content: center; align-items: center;
  position: relative;
}
.main_work_sub{
  position: absolute;
  width: 50px; height: 50px;
}
.main_work_sub_img{
  position: absolute;
}
.main_work_sub_img:nth-child(1){
  background-color: var(--main-color);
}
.main_work_sub_img:nth-child(2){
  border: var(--border-width) solid #fff;
}
/*  */
.main_work_flex.first-flex .main_work_sub{
  top: 5rem;
  right: 25%;
}
.main_work_flex.first-flex .main_work_sub_img{
  width: 50px; height: 50px;
  border-radius: 50%;
}
.main_work_flex.first-flex .main_work_sub_img:nth-child(2){
  top: -10px; right: -10px;
}
/*  */
.main_work_flex.second-flex .main_work_sub{
  bottom: 0rem;
  left: 20%;
}
.main_work_flex.second-flex .main_work_sub_img{
  width: 170px; height: 20px;
}
.main_work_flex.second-flex .main_work_sub_img:nth-child(2){
  top: 10px; left: -40px;
}
/*  */
.main_work_flex.third-flex .main_work_sub{
  top: 0rem;
  left: 20%;
  transform: rotate(30deg);
}
.main_work_flex.third-flex .main_work_sub_img{
  width: 50px; height: 50px;
}
.main_work_flex.third-flex .main_work_sub_img:nth-child(1){
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.main_work_flex.third-flex .main_work_sub_img:nth-child(2){
  top: 10px; right: -15px;
  border: 0px;
  background: url(../../_yj/img/Polygon\ 7.svg) no-repeat;
  background-position: center;
  background-size: contain;
}
.main_work_list{
  width: 50%;
  padding: 8%;
  z-index: 11;
}
.main_work_list.text-right{
  text-align: right;
}
.main_work_list li{
  margin-bottom: 7%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.main_work_list li:last-child{
  margin-bottom: 0;
}
.main_work_list h2{
  font-size: 5rem;
  color: var(--black);
}
.main_work_list h4{
  font-size: var(--font-size-20px);
  color: var(--outline-dark);
}
/*  */
.tri{
  position: relative;
  width: 286px; height: 286px;
}
.tri-img{
  width: 100%; height: 100%;
  position: absolute;
}
.tri-img img{
  position: absolute;
}
.tri-img svg{
  position: absolute;
}
.tri-in-img{
  width: 74px; height: 153px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(-50%,-50%,0);
}
.tri-in-img .in-one{
  position: absolute;
  transform: rotateZ(39.5deg) rotateY(90deg);
}
.tri-in-img .in-two{
  position: absolute;
  transform: rotateZ(-49.5deg) rotateY(90deg);
}
.cir{
  position: relative;
  width: 260px; height: 260px;
}
.cir-img{
  width: 100%; height: 100%;
  position: absolute;
}
.cir-img img{
  position: absolute;
}
.cir-img .two{
  transform: rotateY(40deg);
}
.cir-img .three{
  transform: rotateY(70deg);
}
.cir-in-img .in-one{
  transform: rotateX(70deg);
}
.rect{
  width: 185px; height: 185px;
  position: relative;
  transform-origin: center;
}
.rect-img{
  width: 100%; height: 100%;
  position: absolute;
}
.rect-img img{
  position: absolute;
}

/*  */
.main_biz{
  width: 100%; 
  position: relative;
  z-index: 11;
}
.main_biz_img{
  height: 30rem;
  display: flex;
  justify-content: center; align-items: center;
}
.main_biz_img>img{
  margin: 0 3rem;
  height: 3.0vw;
  object-fit: contain;
}
.main_biz_wrap{
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 0 30rem 0;
  color: var(--surface-dark);
}
.main_biz_tit{
  opacity: 0;
  width: 60%;
}
.main_biz_tit>div{
  display: flex;
}
.main_biz_tit>div:nth-child(2){
  justify-content: flex-end;
}
.main_biz_tit h2{
  font-size: 6.2rem;
  position: relative;
  white-space: nowrap;
}
.main_biz_tit>div:nth-child(2) .main_biz_word.en-ny{
  line-height: 1.7;
}
.main_biz h2:first-child{
  margin-right: 3rem;
}
.main_biz h2 span{
  position: absolute;
  inset: 0;
  color: var(--surface);
  width: 0%;
  overflow: hidden;
}
.more_btn{
  width: 14vw; height: 14vw;
  border-radius: 50%;
  border: var(--border-width) solid var(--outline-light);
  margin-top: 5%;
  display: flex; justify-content: center; align-items: center;
}
.more_btn>a>p{
  font-size: var(--font-size-32px); 
  text-align: center;
  color: var(--outline-light);
}


/* ====== marquee ===== */
.marquee{
  width: 100%;
  position: fixed; z-index: 10;
  padding: 0.2rem 0;
  margin-bottom: 2rem;
  background-color: rgba(0, 0, 0, 0.85);
}
.flow_list_wrap{
  font-size: 15px; 
  color: #ffffff; 
  font-weight: 300;  
  letter-spacing: 0.05em;
  width: 100%;
  overflow: hidden;
}
.flow_list{
  display: flex; justify-content: flex-start;
  min-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
}
.flow_txt{
  animation: flowTxt 60s linear infinite ;
  display: flex; align-items: center;
}
.flow_txt img{
  height: 15px;
  margin-right: 10px;
}

/* animation */
@keyframes rotate{
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
@-webkit-keyframes rotate{
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
@keyframes repeat{
  0% { transform: translateY(0);}
  50% { transform: translateY(10px);}
  100% { transform: translateY(0); }
}
@-webkit-keyframes repeat{
  0% { transform: translateY(0);}
  50% { transform: translateY(10px);}
  100% { transform: translateY(0); }
}
@keyframes flowTxt{
  0%{
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
  }
  100%{
      transform: translate3d(-100%,0,0);
      -webkit-transform: translate3d(-100%,0,0);
  }
}


@media all and (  max-width : 1024px){

  .hero_circle{ width: 45vw; height: 45vw;}
  .main_about_tit{
    margin: 0 5rem;
  }

  .main_work_sub{ width: 25px; height: 25px; }

  .main_work_flex.first-flex .main_work_sub_img{
    width: 30px; height: 30px;
  }
  .main_work_flex.second-flex .main_work_sub_img{
    width: 100px; height: 10px;
  }
  .main_work_flex.second-flex .main_work_sub{
    bottom: -2rem; left: 10%;
  }
  .main_work_flex.second-flex .main_work_sub_img:nth-child(2){
    top: 4px; left: -16px;
  }
  .main_work_flex.third-flex .main_work_sub_img{
    width: 25px; height: 25px;
  }
  .main_work_flex.third-flex .main_work_sub_img:nth-child(2){
    top: 5px; right: -5px;
  }
  .tri{ width: 200px; height: 200px; }
  .tri-in-img{ width: 52px; height: 107px; }
  .cir{ width: 190px; height: 190px; }
  .rect{ width: 130px; height: 130px; }

  .main_work_list{ padding: 8% 3% 8% 5%; }

  .main_biz_img{
    height: 30rem;
    flex-wrap: wrap;    
  }
  .main_biz_img>img{
    height: 5vw;
  }

  .more_btn>a>p{ font-size: var(--font-size-24px); }

  .flow_list_wrap{
    font-size: 13px; 
  }
  .flow_txt img{
    height: 13px;
  }

}

@media all and (  max-width : 768px){

  .main_work_list h2{
    font-size: 5.8rem;
    letter-spacing: -0.02em;
  }
  .more_btn{
    width: 18vw; height: 18vw;
  }

}
@media all and (  max-width : 430px){
  .hero_section .main_hero{
    min-height: 700px;
  }
  .main_about{
    padding: 10rem 0 40rem 0;
  }
  .hero_circle{ width: 70vw; height: 70vw;}
  
  .main_about_tit_wrap{ 
    width: 100%; 
    flex-direction: column;
  }
  .main_about .main_icon{
    margin-top: -50px;
    margin-bottom: 20px;
  }
  .main_about hr{
    margin: 0.1rem 0;
  }
  .main_about_txt{
    /* width: 30%; */
    margin-top: 5rem;
  }
  .main_work_flex{
    flex-direction: column;
  }
  .main_work_flex.second-flex{
    flex-direction: column-reverse;
  }
  .main_work_list{
    width: 100%;
    padding: 3%;
  }
  .main_work_img{
    width: 100%;
    padding: 10rem 8%;
  }
  .main_biz_tit{
    width: 100%;
  }
  .main_biz_img>img{
    height: 8.3vw;
  }

  .more_btn{
    width: 30vw; height: 30vw;
  }

}