@charset "utf-8";
/*
Theme Name: originals
*/

/* swiper start*/
.swiper {
  height: 100vh;
}
.works-gallery .swiper{
  height: 100vh;
  max-height: 480px;
}
@keyframes focus {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: focus 15s linear .5s 1 normal both;
}

.slide-img img{
  display: block;
  width: 100%;
}

.text-area {
    position: absolute;
    top: 45%;
    left: 3%;
    color: #fff;
    font-size: clamp(2.2rem, 30 / 375 * 100vw , 3rem);
    font-weight: bold;
    z-index: 100;
    padding: 0 3%;
}
.swiper-top .text-area p{
  text-indent: -.65rem;
}
.text-area .base-w span:not(:first-of-type){
  margin-left: -10px;
}
.text-area p {
  animation: slideFromRight .3s ease 0s 1 normal;
}
.text-area p span:nth-child(2){
  animation: slideFromRight .35s ease 0s 1 normal;
}
.text-area p span:nth-child(3){
  animation: slideFromRight .4s ease 0s 1 normal;
}
.text-area p span:nth-child(4){
  animation: slideFromRight .45s ease 0s 1 normal;
}
.text-area p span:nth-child(5){
  animation: slideFromRight .5s ease 0s 1 normal;
}
.text-area p span:nth-child(6){
  animation: slideFromRight .55s ease 0s 1 normal;
}
.text-area p span:nth-child(7){
  animation: slideFromRight .6s ease 0s 1 normal;
}
.text-area p span:nth-child(8){
  animation: slideFromRight .65s ease 0s 1 normal;
}
.text-area p span:nth-child(9){
  animation: slideFromRight .7s ease 0s 1 normal;
}
.text-area p span:nth-child(10){
  animation: slideFromRight .75s ease 0s 1 normal;
}
.text-area p span:nth-child(11){
  animation: slideFromRight .8s ease 0s 1 normal;
}
.text-area p span:nth-child(12){
  animation: slideFromRight .85s ease 0s 1 normal;
}
.text-area p span:nth-child(13){
  animation: slideFromRight .9s ease 0s 1 normal;
}
.text-area p span:nth-child(14){
  animation: slideFromRight .95s ease 0s 1 normal;
}
@keyframes slideFromRight {
  0%, 45% {
    transform: translateY(10px);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    filter: blur(0);
    opacity: 1;
  }
}

/* swiper end */

/* content main start */
.main-wrapper > section > div:not(.company-wrapper){
  padding: 5% 0;
}
.padding-lr{
  padding: 0 3%;
}
.top-main h2{
  font-size: clamp(2.8rem, 30 / 375 * 100vw , 4.5rem);
  font-weight: 600;

}
.en-title-center p,
.en-title-left p{
  transform: translateY(-20px);
  transition: 1s;
  font-size: 1rem;
}
.en-title-center p{
  margin: 5px auto;
}
.en-title-left p{
  margin: 5px 0 0 5px;
}
.item-title-center,
.en-title-center{
  overflow: hidden;
  text-align: center;
  font-size: 0;
}
.item-title-left,
.en-title-left{
  overflow: hidden;
  text-align: left;
}
.news-title{
  overflow: hidden;
  text-align: left;
  width: 90%;
  margin: auto;
}
.heading h2,
.item-title-center h3{
  transform: translateY(100%);
  transition: 1s;
}

/* about start */
.about {
    width: 100%;
    margin: auto;
}
.about-title{
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
  width: 90%;
}
.about-title h2{
  text-align: justify;
  display: inline-block;
}
.top-about-text{
  overflow: hidden;
  text-align: left;
  margin: 6% auto;
  width: 90%;
}
.top-about-text > p {
  line-height: 1.8rem;
  margin-top: 3%;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: justify;
  display: inline-block;
}
/* about end */

/* business start */
.business-title{
  width: 90%;
  margin-left: 5%;
}
.business-inner{
  width: 90%;
  justify-content: space-between;
  gap: 20px;
  margin: 5% auto;
}
.business-items{
  display: block;
  width: 32%;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  overflow:hidden;
}
.business-items-inner{
  display: block;
  position: relative;
  overflow: hidden;
  padding: 60% 0;
}
.business-items-inner::after{
  position: absolute;
  display: block;
  content: '';
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  background-position: 50% 50%;
}
.construction::after{
  background-image: url("../img/top-biz-1.jpg");
}
.sale::after{
  background-image: url("../img/top-biz-2.jpg");
}
.repair::after{
  background-image: url("../img/top-biz-3.jpg");
}
.business-items h3{
  position: absolute;
  writing-mode: vertical-lr;
  font-size: 2rem;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.business-items h3 span{
  display: inline-block;
  padding: 8px;
  position: relative;
}
.business-items h3 span::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left top;
  transform: scale(0,0);
  transition: 1.8s;
  background: #282936;
  border: solid 1px #282936;
  border-radius: 5px;
  z-index: -1;
}
.business-items .learn-button{
  display: block;
  position: absolute;
  right: 5px;
  bottom: 20px;
  z-index: 2;
  overflow: hidden;
  padding: 33px 0;
  width: 170px;
}
button.learn-more {
 width: 10.5rem;
 height: auto;
 position: absolute;
 right: 0;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
 transition: 1.4s;
}
button.slide-x{
  transform: translateX(-100%);
}

button.learn-more .circle {
 -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 display: block;
 margin: 0;
 width: 2rem;
 height: 2rem;
 background: #282936;
 border-radius: 1.625rem;
}

button.learn-more .circle .icon {
 -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}

button.learn-more .circle .icon.arrow {
 -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: .7rem;
 height: 0.125rem;
 background: none;
}

button.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
         transform: rotate(45deg);
}

button.learn-more .button-text {
 -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 20px;
 color: #282936;
 font-weight: 600;
 line-height: .6;
 text-align: center;
 text-transform: uppercase;
}

.business-items:hover .circle,
.works-items:hover .circle {
 width: 100%;
}

.business-items:hover .circle .icon.arrow,
.works-items:hover .circle .icon.arrow {
 background: #fff;
 -webkit-transform: translate(.5rem, 0);
     -ms-transform: translate(.5rem, 0);
         transform: translate(.5rem, 0);
}

.business-items:hover .button-text,
.works-items:hover .button-text {
 color: #fff;
}

.business-items:hover .business-items-inner::after{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
@media screen and (max-width:894px){
  .business-inner{
    display: block;
  }
  .business-items{
    width: 100%;
    max-height: 241.7px;
    height: 100%;
}
}
@media screen and (max-width:457px){
  .business-items{
    width: 100%;
}
}
/* business end */

/* works start */
.works-wrapper{
  background: url(../img/higuchi-bg-1.png)no-repeat;
  background-size: cover;
}
.works-top-title{
  margin: 5% auto;
}
.works-top-title,
.works-title{
  width: 90%;
  padding: 1.5% 0;
  overflow: hidden;
  white-space: normal;
  height: 80px;
}
.works-title h3{
  font-size: 2rem;
  transform: translateX(-100%);
  transition: 1s;
}
.works-inner{
  width: 90%;
  justify-content: space-between;
  gap: 2.5%;
  margin: 0 auto;
  flex-wrap: wrap;
}
.works-inner article{
  width: 100%;
  flex-basis: 48.5%;
}
.works-items {
  padding: 5%;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 5%;
  min-height: 140px;
  display: block;
}
.works-items .post-thumb{
  position: relative;
  overflow: hidden;
}
.works-items:hover .post-thumb img,
.company-item-inner a:hover .company-bg::before{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.works-items .cat{
  background-color: #282936;
  color: #fff;
  border: none;
}
.works-items .post-thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 /2;
  object-fit: cover;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.post-thumb::before {
    content: '';
    background-color: #fff;
    z-index: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 1.6s;
    transform: translateY(0);
}

.works-text {
    position: relative;
    min-width: 180px;
    min-height: 140px;
    margin-top: 2.5%;
}

.icon-wrapper {
    position: relative;
    height: 32px;
}

@media screen and (max-width:1076px){
  .swiper {
    height: inherit;
  }
  .swiper-wrapper{
    margin-top: 80px;
  }
  .works-items{
    display: block;
  }
}
@media screen and (max-width:457px){
  .works-inner{
    display: block;
}
}
/* works end */
/* company start */
.company-wrapper{
  width: 100%;
}
.company-inner{
  flex-basis: 87.5%;
  padding: 5% 0;
}
.company-inner .detail-link{
  margin-top: 5%;
}
.company-inner-after{
  flex-basis: 12.5%;
}
.company-item{
  justify-content: center;
  gap: 20px;
  margin: 10% 0;
}
.company-item-2{
  width: 65%;
  gap: 20px;
}
.company-item-inner{
  width: 31.47%;
}
.company-item-2 .company-item-inner{
  width: 50%;
}
.company-item-inner a{
  display: block;
  width: 100%;
  position: relative;
}
.company-bg{
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 1s;
}
.company-item-inner .company-bg::before{
  content: '';
  display: block;
  transition: .5s;
  background: url("../img/test-2.jpg");
  background-size: cover;
  padding: 50%;
}
.company-item-inner .company-bg.com-bg-1::before{
  background: url("../img/com-info.jpg")no-repeat center center;
  background-size: cover;
}
.company-item-inner .company-bg.com-bg-2::before{
  background: url("../img/com-history.jpg")no-repeat center center;
  background-size: cover;
}
.company-item-inner .company-bg.com-bg-3::before{
  background: url("../img/map.jpg")no-repeat center center;
  background-size: cover;
}
.company-item-inner a .company-title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(1rem, 30 / 375 * 100vw , 2rem);
  z-index: 1;
  background-color: rgba(40,41,54,.8);
  padding: 10px;
}
.company-inner-after {
  background: url("../img/com-side-bg.jpg")no-repeat center left 43%;
  background-size: cover;
  position: relative;
}
.company-inner-after::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(159, 191, 191, .8);
}
@media screen and (max-width:995px){
  .company-inner{
    flex-basis: 100%;
  }
  .company-inner-after{
    display: none;
  }
}
@media screen and (max-width:545px){
  .company-item-2 .company-item-inner,
  .company-item-inner{
    width: 100%;
  }
  .company-item-2{
    flex-direction: column;
    width: 100%;
  }
  .company-bg{
    border-radius: 5px;
  }
  .company-bg.com-bg-1::before{
    padding: calc(100% + 10px) 50%;
  }
}
/* company end */
/* information start */
.information-title{
  width: 90%;
  margin: 5% auto;
}
.information-inner{
  width: 90%;
  margin: 5% auto;
}
.info-text-wrapper {
    justify-content: space-between;
    width: 64%;
}
.info-parts {
    padding: 5%;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 5%;
    transition: 1s;
}
.info-parts-2 {
}
.info-parts:hover {
    outline: solid 1px;
    transition: 1s;
}
.info-items {
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  position: relative;
}
.info-items .post-thumb{
  overflow: hidden;
  position: relative;
  flex-basis: 32%;
  max-width: 300px;
}
.post-item-inner .news-post-thumb{
  position: relative;
  overflow: hidden;
}
.info-items .post-thumb img{
  max-width: 300px;
  width: 100%;
  height: auto;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.news-post-thumb::before {
    content: '';
    background-color: #F1F2F0;
    z-index: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 1.6s;
    transform: translateY(0);
}
.info-items:hover .post-thumb img{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.info-text{
  flex-direction: column;
  gap: 10px;
  flex-basis: 67%;
}
.info-text-inner {
  gap: 2.5%;
  overflow: hidden;
  margin: 9px;
}
.info-title{
  overflow: hidden;
  height: 118px;
}
.info-title-2{
  overflow: hidden;
}
.info-title h3 {
  transition: 1.8s;
  font-size: clamp(2rem, 30 / 375 * 100vw , 3rem);
  transform: translateX(-100%);
  white-space: normal;
  line-height: 1.1em;
}
.cat,
.post-date{
  transform: translateY(100%);
  transition: 1s;
}
.cat {
    border: solid 1px;
    border-radius: 3px;
    padding: 6px;
}
.works-text-inner{
  overflow: hidden;
  gap: 3%;
}
.post-date {
  display: grid;
  align-items: center;
}

.button-text{
}
button.learn-more.vertical{
  width: inherit;
  height: 10rem;
  flex-direction: column;
}
button.learn-more.vertical .button-text{
  padding: 1.6rem 0;
  left: inherit;
  margin: 0.76rem;
}
button.learn-more.vertical .circle .icon.arrow{
  -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: .9rem;
  width: .125rem;
  height: .7rem;
  background: none;
  top: 10px;
  bottom: inherit;
}

button.learn-more.vertical .circle .icon.arrow::before{
  top: -.1rem;
  right: -0.31rem;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.info-items:hover .circle {
 width: 100%;
}
.info-items:hover .button-text {
 color: #fff;
}
.info-items:hover button.learn-more.vertical .circle .icon.arrow {
  background-color: #fff;
 -webkit-transform: translate(0, .5rem);
     -ms-transform: translate(0, .5rem);
         transform: translate(0, .5rem);
}
.text-archive {
    white-space: normal;
}
@media screen and (max-width:894px){
  .info-items .post-thumb {
    display: none;
}
.info-text .post-item-wrapper .post-item-inner {
    width: 100%;
}
.info-text {
    flex-basis: 100%;
}
}
/* information end */