/* CSS Document */
@import url(footer.css);

/****************
  intro
******************/
.intro_area {
  padding-top:var(--size60);
  padding-bottom:var(--size80);
  background: linear-gradient(rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 1) 100%);
  position:relative;
}
.intro_area:before {
    content:"";
    width:100%;
    height:100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(35, 24, 21, 0.1) 100%);
    position:absolute;
    left:0;
    top:0;
}

.second_page .sec_tit .en {
  font-size:calc(1.1*var(--size40));
  line-height: 0.75;
}
.aproach_img .scroll_inner img {
  min-width:752px;
}
.intro_area .img_box {
  mix-blend-mode: darken;
}
@media (max-width: 768px) {
.intro_area .outer {
  padding-inline: 0;
}
}
@media (min-width: 769px) {
  .intro_area {
    padding-top: var(--size100);
    padding-bottom: var(--size100);
  }
  .second_page .sec_tit .en {
    font-size: calc(0.86*var(--fsize48));
  }
}
@media (min-width: 1025px) {
  .intro_area {
    padding-top: var(--size100pc);
  }
  .intro_area .img_box {
    width:100%;
    margin-left:auto;
    margin-right:0;
  }

}
@media (min-width: 1281px) {

}



/****************
 facade_area 
******************/
.facade_area {
    background-color: white;
    position:relative;
    padding: 0 0 var(--size100pc) 0 ;
}
.facade_area:before {
    content:"";
    width:100%;
    height:100%;
    background: rgba(35, 24, 21, 0.1) ;
    position:absolute;
    left:0;
    top:0;
} 
.facade_material_box {
    display: flex;
    align-items: center
}
.facade_material_box p {
    white-space: nowrap;
    text-align: left
}
.sec_lead {
  font-size:var(--fsize24);
  line-height: 1.6;
}
.item .txt_box{
  position:relative;
}
.item .txt_box * {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease);
}
.item .item_head{
  flex-direction: column;
  justify-content: flex-start;
  align-items:  center;
  margin-top:var(--size20);
}
.item_head h4 {
  font-size:var(--fsize20);
  line-height: 1.125;
}
.item .txt_box p {
  line-height: 1.6;
}
.item_head .spec {
  font-size:var(--fsize18);
}
.facade_scroll_box figure {
    padding-bottom:var(--size20);
}
.pulsate-fwd {
	-webkit-animation: pulsate-fwd 3s ease-in-out infinite both;
	        animation: pulsate-fwd 3s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  animation-name: slideUp;
}
.slide-up {
  height: 0px;
  padding-bottom: 0;
  overflow: hidden;
}
.facade_scroll_box {
    width:100%;
    height:auto;
    position:relative;
    overflow: hidden
}
.scrollicn {
    position:absolute;
    display: block;
    width:130px;
    height:130px;
    left:calc(50% - 65px);
    top:calc(40% - 65px);
    z-index: 3;
    transition:opacity .3s var(--easeout);
}
.scrollicn img {
    width:100%;
    min-width: 0;
    height:auto;
}
.scrollicn.off{
    opacity:0;
}
@media (max-width: 768px) {
  .item .txt_box .more {
    font-size:var(--fsize18);
  }

  .item_head h4 {
        font-size: var(--fsize20);
        line-height: 1.125;
    }
  .facade_scroll_box_wrap {
        padding-inline:0;
    }
  .facade_scroll_box .scroll_inner img {
        min-width: 0;
        max-width:1600px;
        width:auto;
    }
  .facade_material_box {
    flex-direction: column
}
}
@media (max-width: 500px) {
   .item_head h4 {
        font-size: var(--fsize18);
    }
  .facade_scroll_box .scroll_inner img {
        max-width:1000px;
    }
    .page_lead {
       letter-spacing: -1px;
    }
}
@media (min-width: 769px) {
  .sec_lead {
    font-size: var(--fsize28);
  }

  .item_head h4 {
    font-size: var(--fsize20);
    line-height: 1.4;
  }
  .item_head .spec {
    text-align:left;
    font-size: var(--fsize12);
  }
  .page_lead + p {
        font-size: var(--fsize18);
  }

}
@media (min-width: 1025px) {
  .sec_lead {
    font-size: var(--fsize32);
  }

  .facade_area {
      padding: var(--size100pc) 0 ;
  }
  .item {
    padding-bottom:var(--size10pc)
  }
  .item_head {
    display: block;
    padding-bottom:var(--size10pc);
    margin-bottom:var(--size10pc);
    position:relative;
  }

  .item_head h4 {
    font-size: var(--fsize20);
  }

  .item_head + p {
    font-size:var(--fsize14);
    line-height: 1.4;
  }

}
@media (min-width: 1600px) {
  .sec_lead {
    font-size: calc(0.8*var(--fsize42));
  }
  .topic_tit {
    font-size: var(--fsize32);
  }
}

/****************
 entrance_area
******************/
.entrance_area {
    background:url("../img/design/bg_design_entranced.png") repeat;
    background-size: 250px auto;
    position:relative;
    padding:var(--size100) 0;
}
@media (max-width: 1024px) {
.item_index_wrap.columns.col3x {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 1.785vw, 25px) !important;
}
.item_index_wrap.columns.col2x {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 1.785vw, 25px) !important;
}
}